CSS Compatability Issues, FF & Safair On Footer

HTML & CSS
1

Hi,

i am building a image gallery website which is on my localhost, i’m having issues on FF(3.6.11) and Safari(5.0.2) where my image gallery is somewhat overlapping my div footer meaning the footer div is right underneath my image gallery. The word footer, is outside the image gallery div which is fine but the actual div bar thing has not been moved down appropriately to deal with images, this also applies to Content div.

IE Test - OK
http://img46.imageshack.us/img46/681/iefooteradjustedok.jpg

FF Test - Not OK
http://img183.imageshack.us/img183/5316/fffooternotadjustedcorr.jpg

Safair Test Not OK
http://img600.imageshack.us/img600/8504/safarifooternotadjusted.jpg

I tried to put clear:both attribute value on my content div but that did not work.


html, body
{   
    height: 100%;
    margin: 0;
    padding: 0;  
}

body
{
    background: #f3f2f3;
    color: #000000;
    font-family: Trebuchet MS, Arial, Times New Roman;
    line-height: 1.3;
    font-size: 0.8em;
}

#wrapper
{
    background: red;
    /* first value represents top/bottom, while second represents left/right margin */
    margin: 0px auto; 
    width: 900px;            
    min-height: 100%;
}

#header
{
    background: #663300;      
    height: 100px;
}



#navigation
{
    overflow: hidden;
    background: #3366CC;             
    height: 50px;
}
#navigation ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#navigation li
{
    display: block;
    float: left;
    padding: 2px;
     
}

#content
{
     
    background: #993300;
                                   
} 

 .pagedesc
{ 
    width: 900px;                    
    font-size: 14px;
    padding: 0px;
    background-color: blue;
    
}

.pagedesc p
{
    margin: 0;
    border: 0;
    padding: 0px;
    
}
 
.imageswrapper
{
    margin: 0;
    padding: 0;
    border: 1px solid #330066;
    margin-left:auto;
    margin-right:auto;
    clear: both;                    
    overflow: hidden;
    text-align: center;
    float: left;
}


.thumb
{
    
    float: left;
    width: 150px;  /** needed so that the thumb img stays the same **/
    padding: 10px 15px;  /** top/bottom value is 10px and right and left is 15px*/
    height: 170px;
    margin: auto;
    text-align:center;
    overflow:hidden;
    background:#ffffcc;
    margin:3px;
    border:1px solid red;
    
    
               
    
}

.thumb img
{
   display: inline;
    margin: 5px;
    border: 1px solid red;
    padding: 0px;
 
}

.thumbdesc
{
    text-align: center;
     border: 1px solid black;
     padding: 5px;
}


#footer
{   margin: 0 auto;
    background: pink;
    height: 50px;
    width: 900px;
    
}

Hope that is quite clear, please help if you can

2

Hi,

We’d really need to see the whole html to debug properly but from your pictures it just looks like you haven’t cleared the floats.

Try adding overflow:hidden to the wrapper to see if this is the issue.


#wrapper{overflow:hidden}

If you need visible overflow then another method would be required (see CSS faq on floats).

3

Thanks for the quick reply, here is the html source code taken from the FF



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	      <title> Shanghai Trip 2010</title>
	      <link rel="stylesheet" type="text/css" href="style_V1.css" />
		
	      <meta http-equiv="content-type"
				content="text/html; charset=utf-8"/>
	</head>
	<body>
	      <div id="wrapper">

		     <div id="header">
			    <h1> SHANGHAI TRIP 2010 </h1>
		     </div> 
        
		     <div id="navigation">
			    <ul>
				   <li><a href="index.php?link=home">Home</a></li>
				   <li><a href="index.php?link=shanghaizoo">Shangai Zoo</a></li>

				   <li><a href="index.php?link=chengtemple">Cheng Huang Temple</a></li>
			    </ul>
		     </div>
		     
		     <div id="content">
			    
			    <div class="pagedesc">
                    <p>
                    
                        Hi, welcome to my site, here you will be able to see a wide variety of holiday pictures taken while
                       I was in Shanghai 2010 during the Summer holidays. You will also be able to see what it was like in
                       The Shanghai World Expo to places such as Shanghai Financial center.sssssssssssssssssssssssssdddddd
                       dddddddddddddddddddddddddddddddd 
                    </p>
   
			    </div>

			    
 		    <div class="imageswrapper">
			    <div class="thumb"><img src="./images/IMG_0075.JPG" width="150" height="100" ><div class="thumbdesc"><b>Description:</b>Temple Area Market</div></div><div class="thumb"><img src="./images/IMG_0109.JPG" width="150" height="100" ><div class="thumbdesc"><b>Description:</b>side view</div></div><div class="thumb"><img src="./images/IMG_0111.JPG" width="150" height="100" ><div class="thumbdesc"><b>Description:</b>Dragon Head</div></div><div class="thumb"><img src="./images/IMG_0302.JPG" width="150" height="100" ><div class="thumbdesc"><b>Description:</b>Just hanging around!</div></div><div class="thumb"><img src="./images/IMG_0196.JPG" width="150" height="100" ><div class="thumbdesc"><b>Description:</b>snake</div></div><div class="thumb"><img src="./images/IMG_0214.JPG" width="150" height="100" ><div class="thumbdesc"><b>Description:</b>Monkey</div></div><div class="thumb"><img src="./images/IMG_0268.JPG" width="150" height="100" ><div class="thumbdesc"><b>Description:</b>Pelecon</div></div><div class="thumb"><img src="./images/IMG_0090.JPG" width="150" height="100" ><div class="thumbdesc"><b>Description:</b>Pond view</div></div><div class="thumb"><img src="./images/IMG_0147.JPG" width="150" height="100" ><div class="thumbdesc"><b>Description:</b>temple test</div></div><div class="thumb"><img src="./images/IMG_0155.JPG" width="150" height="100" ><div class="thumbdesc"><b>Description:</b>temple test 02</div></div>      
			    </div>

			     
		     </div> 
        

  
	      </div><!-- End Wrapper -->
          
          <div id="footer">
                FOOTER
          </div> 
          
			 
			  
		    
		 
	</body>
</html>

And i’ll take a look at what u recommended to see if it helps

4

Hi,

Yes the problem is as I stated and the fix is the one I have given to you above :slight_smile:

5

thanks for the reply, i really don’t mean to be a bother here but after adding that code snippet, i noticed that on FF and Safari from the heading, it seemed to drop revealing my red background as shown in the given link:

http://img502.imageshack.us/img502/4282/backgoundshowing.jpg

6

Hi, i managed to solve it, under my header div i added the following: overflow:hidden, which seemed to work fine. :slight_smile: I don’t know if that is the recommended/standard solution but it worked.

7

Normally the overflow on the wrapper should work like Paul advised. Maybe you could post your CSS as well.

8

Hi,

The red gap that appears at the top is the fact that the top margin on the h1 no longer collapses on to the wrapper and thus pushes the header element away from the top of the wrapper. Originally the margin would collapse and effectively become a top margin on the wrapper instead.

The overflow:hidden stopped the margin affecting the wrapper but then the header was moved down instead and not the h1. When you put overflow:hidden on the header then you again stopped the margin collapse and the h1 was moved down instead :slight_smile:

If you had just removed the top margin for the h1 then there would have been no collapse. You could move it down with a bit of top padding if needed. The overflow:hidden will do the same job and is ok as long as you don’t need visible overflow.