PDA

View Full Version : footer not placing and sizing right


silverglade
04-02-2009, 03:20 PM
hi, my footer is misbehaving , i thought i filled the wrapper div with it, but it falls short in internet explorer, it looks fine in firefox. any help greatly appreciated. thanks. derek

here is the page im talking about

http://derekvanderven.com/jewel_gallery/home.html

here is the css

@charset "utf-8";
/* CSS Document */

body {
margin: 0;
height: 0;
background-image: url(home/background.jpg);
background-repeat:repeat-x;
}





#header {
margin: 0 auto 0 auto;
width: 801px;
height: 100px;
background-image: url(home/header.jpg);
background-repeat:no-repeat;
}

#wrapper {
margin: auto;
width: 830px;
height: 900px;
background-color: black;
}

#left_content{
float: left;
height:703px;
width: 400px;
background-color: black;
background-image: url(home/vertical_jewels.jpg);
background-repeat:no-repeat;
background-position: right top;
text-align: left;

border-right: 1px dotted gray;


}

#right_content{
float: left;
height:703px;
width: 250px;
background-color: black;
color: white;
padding: 10px;

}

#right_nav {
float: left;
height: 703px;
width: 150px;
background-color: black;
}

.nav_header {
color: #B76C28;
font-size: large;
}
#right_nav a
{
color: #B76C28;
text-decoration: none;
}



/***********************css navigation code*****************/
ul#navigation
{
font-size:.9em;
font-family: "Courier New";
margin: auto;
padding-left: 60px;
list-style-type: none;

color: #FFF;
width: 100%;
}

ul#navigation li
{
display: inline;
}

ul#navigation a
{
float: left;
margin: 0 auto;
display:block;
padding: .2em 2em;
text-decoration:none;
color: #fff; /* text color*/
background: #A06710; /* background color */
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
}

ul#navigation a:hover
{
color: #995522; /* hover text */
background: black; /* background color may be transparent value*/
border-color: #aaab9c #fff #fff #ccc;
}

/*********************END CSS NAVIGATION CODE ********************/

/*****START LEFTCONTENT TEXT ****************/

#left_nav {
width: 177px;
height: 703px;
padding-left: 15px;
text-align: left;
padding-top: 15px;
}

.left_nav {
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
line-height:25px;
}

#left_nav a:hover {
color: #EA4C03;
} /*change the color to w/e means whatever*/

.small_nav:hover {
color:#EA4C03;
text-decoration:none;
}
.small_nav:link {
color:#666666;
text-decoration:none;
}
a:hover {
color:#EA4C03;
}
a:link {
color:#E47941;
}
a:visited {
decoration: none;
}
.small_nav {
color:#666666;
text-decoration: none;
line-height: 25px;
}

.style1 {
color:#666666;
}

/***************************FOOTER***************** *****/

#footer {
margin: 0 auto 0 auto;
width: 99%;
height: 20px;
background-color: #D56C26;
color: #000000;
padding: 5px;
clear: both;
text-align: center;
}



#footer a:link {
text-decoration: none;
color: #000000;
}
#footer a:visited {
text-decoration: none;
color: #000000;
}
#footer a:hover {
text-decoration: none;
color: #CC0066;
}
#footer a:active {
text-decoration: none;
#CC0066;
}

/***************************DESIGN DIRECTORY PAGE CODE**********************/

#design_left_content{
float: left;
height:1425px;
width: 200px;
background-color: black;
text-align: left;
}


#design_right_content h1 {
color: #E47941;
}
#design_right_content{
float: left;
height:1405px;
width: 430px;
background-color: black;
color: white;
padding: 10px;

}
#design_wrapper {
margin: auto;
width: 830px;
height: 1585px;
background-color: black;
}
/****************************education code**************************/

#education_wrapper {
margin: auto;
width: 830px;
height: 2500px;
background-color: black;
}
#education_left_content{
float: left;
height:1425px;
width: 200px;
background-color: black;
text-align: left;
}


#education_right_content h1 {
color: #E47941;
}
#education_right_content{
float: left;
height:2300px;
width: 430px;
background-color: black;
color: white;
padding: 10px;

}
#education_wrapper {
margin: auto;
width: 830px;
height: 2500px;
background-color: black;
}

#education_right_nav {
float: left;
height: 703px;
width: 150px;
background-color: black;
}


here is the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="jewel_gallery.css" rel="stylesheet" type="text/css"/>

<title>Jewel Gallery</title>



</head>

<body>




<div id="wrapper">
<div id="header">
</div>
<ul id="navigation">
<li><a href="home.html">Home</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="services.html">Ask The Experts</a></li>

<li><a href= "archive.html">Archive</a></li>
<li><a href="contact.html">Contact Us</a></li>

</ul> <!--end navigation-->


<div id="left_content">

<div id="left_nav">

<p>
<strong style="color: rgb(255, 255, 255);">Ultimate Bauble Odyssey</strong>
<br/>
<span class="style1">
<a class="small_nav" href="design-directory.html">Designer Directory</a>
<br/>
<a class="small_nav" href="in-the-salon.html">In the Salon</a>
<br/>
<a class="small_nav" href="up-for-auction.html">Up for Auction</a>
<br/>
<a class="small_nav" href="special-pieces-&-places.html">Special Pieces & Places</a>
</span>
<br/>
</p>

<p>
<strong style="color: rgb(255, 255, 255);"> The Deal On Diamonds</strong>
<span class="style1">
<br/>
<a class="small_nav" href="beauty-and-pricing.html">Beauty & Pricing</a>
<br/>
<a class="small_nav" href="special-stones.html">Special Stones</a>
</span>
<br/>
</p>

<p>
<strong style="color: rgb(255, 255, 255);"> Savvy Shopping</strong>
<span class="style1">
<br/>
<a class="small_nav" href="rules-of-engagement.html">Rules of Engagement</a>
<br/>
<a class="small_nav" href="buying-for-the-lady.html">Buying for the Lady</a>
<br/>
<a class="small_nav" href="buying-for-the-gentleman.html">Buying for the Gentleman</a>
<br/>
<a class="small_nav" href="shopping-etiquette.html">Shopping Etiquette</a>
</span>
</p>

<p>
<strong style="color: rgb(255, 255, 255);">Building Your Collection</strong>
<br/>
<span class="style1">
<a class="small_nav" href="the-smart-investor.html">The Smart Investor</a>
<br/>
<a class="small_nav" href="old-rock-new-tricks.html">Old Rocks New Tricks</a>
<br/>
<a class="small_nav" href="how-to-use-you-jewel.html">How to Use your Jewel </a>
<br/>
<a class="small_nav" target="_blank" href="">Jewel Gallery Blog</a>
<br/>
<br/>
<br/>
<img height="118" border="0" width="100" alt="Jewel Gallery Events" src= "home/events.jpg"/>
</span>
</p>


</div><!--end left_nav-->

</div><!--end leftcontent-->

<div id="right_content">

<p> <span class="nav_header">GIA Grading and Reports </span> </p>
<p>A new and vastly improved resource is now available on the web, for those who want to understand the information on a GIA (Gemological Institute of America) diamond grading report. Μore ></p>
<p><span class="nav_header"> Check this out: Jewel Gallery Review:</span>
<br />
</p>
<p> I've known about this design team for a while, since I side-stepped with little dog into the JJ Marco boutique on Madison Avenue last year. Now I can tell you.. a pair of earrings from JJ Marco should be highly considered for a gal that loves everyday luxury. Maybe that gal is yourself. Maybe you drop a hint to your guy. Μore ></p>
<p> <span class="nav_header">The Perfect Ring for the Woman who knows her Diamonds:</span> </p>
<p>This delicious 7.12 Carat Asscher Cut Diamond, in a handmade double prong Platinum mounting is GIA certified E Color, VS1 Clarity and is available through an exclusive network throughout all 50 states. The price is a Jewel Gallery Launch "Party Favor".
$352,440.00 Don't say we never showed you fabulous. Μore> </p>
</div>
<!--end rightcontent-->

<div id="right_nav">
<img height="34" width="150" alt="Friends &amp; Sponsors" src= "home/right_nav/friends-sponsors.jpg"/>

<a href="http://renaissanceplatinum.ad2.com/?section=showcase" target="_blank" >
<img src="home/right_nav/spectacular-platinum-work.jpg" alt="Spectacular Platinum Work" width="150" height="87" border="0" /></a><br /><br />

<a href="http://www.zaffirojewelry.com/" target="_blank" class="sponsors" ><img src= "home/right_nav/delicious-couture-color.jpg" alt="Delicious Couture Color" width="150" height= "94" border="0" /></a><br />
<br />
<a href="http://www.samsclub.com/shopping/search.do?searchtype=simple&amp;catg=1&amp;simplesearchfor =premi er+platinum&amp;simpleitemtype=1&amp;x=14&amp;y=11" target="_blank" class="sponsors"><img src="home/right_nav/timeless-classics.jpg" alt="Timeless Classics Larger Diamonds" width= "150" height="93" border="0" /></a><br />
<br />

<a href="http://www.dovesjewelrydesigns.com/collections/collections.cfm?collection=5" target="_blank" class="sponsors"><img src="home/right_nav/special-in-18-karat.jpg" alt= "Special in 18 Karat White Gold" width="150" height="90" border="0" /></a><br />



</div><!--end rightnav-->

<div id="footer">&copy;<a href="http://derekvanderven.com">Derek Van Derven web design 2009 </a></div>

</div> <!--end wrapper div-->
</body>
</html>

Rob_Che
04-02-2009, 04:58 PM
Try taking the height out of the #right_content...

edit: and your wrapper has a height too...

silverglade
04-02-2009, 08:31 PM
thanks. i took out almost all the heights of my divs except for the header image div. and that made the footer place nicely below the content, but the footer is still showing up short in IE6. any more help greatly appreciated. derek here is the footer


here is the new home page for the site

http://derekvanderven.com/jewel_gallery/home.html


#footer {
margin: 0 auto 0 auto;
width: 100%;
/* height: 20px; */
background-color: #D56C26;
color: #000000;
padding: 5px 0 5px 0;
clear: both;
text-align: center;
}

Rob_Che
04-02-2009, 10:09 PM
Hmmm.. I'm on IE6 at work - I'll check it out tomorrow if I get chance Derek.

RC