CSS Forum

**silverglade** · 04-02-2009, 11:55 AM

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

Code:

@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: 850px;
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;
}

and here is the html

Code:

<!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="about.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>

**NewBreed** · 06:18 PM

I think it looks funny on both. But this should fix it. Don't have my tools, so I can't trial and error.

Code:

#footer {
margin: 0 auto; 
width: 100%; /*Changed to 100 because you want the whole #wrapper*/ 
height: 20px; 
background-color: #D56C26; 
color: #000000; 
padding: 5px 0 5px 0; /*This adds top and bottom padding*/ 
clear: both; 
text-align: center; 
}

Tell me what you think after you try this...

**TripleMoons** · 04-02-2009, 01:01 PM

The entire website looks incorrect in FF on a Mac.

You can not have fixed heights on the divs that will change depending on the content that they contain. You will also going to have to rework your background image or you'll have white space. Also remember to validate your XHTML and CSS.

Try this in your CSS to start:

Code:

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

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

#right_content {
    float: left;
    width: 250px;
    background-color: black;
    color: #ffffff;
    padding: 10px;
}

**LadynRed** · 04-02-2009, 01:40 PM

You really need to stop nailing in heights on your divs, they WILL stretch to hold the content within them if you stop doing that. As soon as I removed all the fixed heights, your footer popped down to where it belongs.

**silverglade** · 05:39 PM

thanks everyone for that help! i commented out the heights on every single div, and my footer popped right down where the content ended, what a load of work off my back! that time i really learned something.
but i still had to add a height to my header image for some reason not sure why. anyway, newbreed i used your code to adjust the footer , and it looks good in firefox, but still is coming up short in IE6.

here is the homepage now for the site,

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

here is the code i used

Code:

 #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;
   }

ps- my selling of website dreams are over until i even get to the intermediate level, HAHA> i need some serious basics. and i want to work for a company one day in the far future instead of freelancing if i can.

**mindlesswizard** · 04-03-2009, 05:08 AM

Hey dude !!! It's not about height !!! It about width !!! The actual width of the wrapper is 801px !!! The problem is there in the "UL" !!!! the width is "100%" and the padding-left is :60px;

You don't need to give the width 100%. When u give the width 100% and padding 60px browser takes the width 100% + 60 px padding !!!

Actually the whole width of your page is greater than the give value !! Just remove the width of the "UL" while leave the padding-left:60px;

Hope it works !!!!

**silverglade** · 04-03-2009, 07:07 AM

mindlesswizard you are awesome! that fixed the short footer!. i am still a newbie!! thanks for taking the time to fix my code. that finally finishes my site example. here is the finished site, well kind of unfinished because its just a template kind of, or a very small site.thanks again! derek

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

**mindlesswizard** · 04-05-2009, 01:01 AM

No worries dude !!! Need help ???? Anytime i'm available !!!!! cheers !!!