PDA

View Full Version : [Problem] Footer not correctly placed in IE



Bankzy108
Feb 10th, 2010, 12:49 AM
I am having a problem with the copyright footer on my webpage - it works fine in Firefox, but doesn't work in IE. The problem is the gap between the content/ nav bar in relevence to the actual copyright footer. For some reason IE won't have the use the margin declared and just puts it altogether. I have just made this site and have uploaded it to a free hosting server till I get it completed properly. Here is the link:

http://pawprintsdoggrooming.clanteam.com/

Here is the HTML Markup code for easier viewing:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link rel="stylesheet" type="text/css" href="css/indexFF.css">
<!--[if IE]>
<link rel="stylesheet" href="css/indexIE.css" type="text/css" media="screen, projection"/>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Welcome To Paw Prints Dog Grooming!</title>
</head>

<body>

<div id="container">

<div id="header">

<div id="logo"><a href="index.html"><img src="images/logo.gif" width="150" height="120" border="0" alt=""></a></div>

<div id="banner"><img src="images/banner.gif" width="600" height="120" border="0" alt=""></div>

</div>

<div class="clear"></div>

<div id="maincontent">

<div id="content">

<p class="heading">Welcome to Paw Prints!</p>

<p class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper porttitor lorem quis lobortis. Pellentesque accumsan blandit justo, vitae sollicitudin leo rhoncus vel. Nulla accumsan, sapien vitae malesuada sagittis, sapien neque sollicitudin nibh, in mattis nisi tortor id nisl. Sed vestibulum nibh vel orci hendrerit consequat. Quisque vel tortor a nulla blandit semper. Nullam pharetra fringilla tellus a euismod. Ut gravida augue vitae diam faucibus tempus. Integer eu dolor ipsum. Mauris purus nisi, laoreet a consectetur eget, dignissim quis nibh. Ut vehicula facilisis ipsum ac accumsan. Quisque in bibendum tortor. Duis a ipsum nec tellus vulputate pulvinar. Cras sed eleifend dui. In adipiscing, nibh eu eleifend auctor, velit erat blandit nisl, quis dapibus mauris arcu nec turpis. Praesent tincidunt ultricies velit non vulputate. Integer non magna purus. Fusce nec neque magna, id euismod lectus. Maecenas auctor odio ac lectus molestie quis semper lectus pellentesque. Integer lectus est, porttitor sit amet commodo sit amet, porttitor vitae ipsum.</p>

<!--Images - Allow for smaller picture and the reference to display the bigger picture on rollover (Done in CSS) - Smaller image first src tag, bigger image second src tag.-->
<p class="img">
<a class="images"><img src="images/photoimages/image1minimized.jpg" width="150" height="150" border="0" alt=""><span><img src="images/photoimages/image1maximized.jpg" alt=""></span></a>
<a class="images"><img src="images/photoimages/image1minimized.jpg" width="150" height="150" border="0" alt=""><span><img src="images/photoimages/image1maximized.jpg" alt=""></span></a>
<a class="images"><img src="images/photoimages/image1minimized.jpg" width="150" height="150" border="0" alt=""><span><img src="images/photoimages/image1maximized.jpg" alt=""></span></a>
</p>
<p class="subcenter">(Hover over a thumbnail for a bigger image)</p>

</div>

<div id="nav">

<div class="hr"><hr /></div>

<a href="#"><img src="images/buttons/clicked/home_button_clicked.gif" width="130" height="25" border="0" alt="Home Button"></a>

<div class="hr"><hr /></div>

<a href="services.html"><img src="images/buttons/unclicked/services_button_unclicked.gif" width="130" height="25" border="0" alt="Services Button"></a>

<div class="hr"><hr /></div>

<a href="prices.html"><img src="images/buttons/unclicked/prices_button_unclicked.gif" width="130" height="25" border="0" alt="Prices Button"></a>

<div class="hr"><hr /></div>

<a href="photos.html"><img src="images/buttons/unclicked/photos_button_unclicked.gif" width="130" height="25" border="0" alt="Photos Button"></a>

<div class="hr"><hr /></div>

<a href="aboutus"><img src="images/buttons/unclicked/about_us_button_unclicked.gif" width="130" height="25" border="0" alt="About Us Button"></a>

<div class="hr"><hr /></div>

<a href="contactus"><img src="images/buttons/unclicked/contact_us_button_unclicked.gif" width="130" height="25" border="0" alt="Contact Us Button"></a>

<div class="hr"><hr /></div>

</div>

</div>

<div id="copyright">
All Rights Reserved to Paw Prints Dog Grooming - 2010
</div>

</div>

</body>
</html>


Here is the CSS code for easier viewing:


body{
background-image:url(../images/background_image.gif);
}

#container{
width:800px;
margin:auto;
}

#header{
background-image:url(../images/header_section.gif);
float:left;
height:180px;
}

#logo{
width:150px;
background-color:#F00;
float:left;
margin-top:15px;
margin-right:10px;
margin-bottom:15px;
margin-left:15px;
}

#banner{
width:600px;
background-color:#F00;
float:left;
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
margin-left:10px;
}

#maincontent{
background-color:#FFF;
float:left;
}

#content{
width:580px;
background-color:#00ccff;
float:left;
margin-top:0px;
margin-right:10px;
margin-bottom:15px;
margin-left:15px;
padding:0px 10px 0px 10px;
}

.img{
text-align:center;
}

/*This is styling for the images*/
.images{
position: relative;
z-index: 0;
}
/*For when an image has a mouse over it*/
.images:hover{
background-color: transparent;
z-index: 50;
}
/*CSS for enlarged image*/
.images span{
position:absolute;
/*background-color:#FFF;*/
padding:5px;
left:-1000px;
/*border:1px solid black;*/
visibility:hidden;
color:black;
text-decoration:none;
}

/*Enlarged image padding and border properties*/
.images span img{
border-width:0;
padding:2px;
}

/*Enlarges images on rollover*/
.images:hover span{
/*Makes the picture now on visable on rollover*/
visibility: visible;
top: -100;
/*position where enlarged image should offset horizontally*/
left: 0px;
}

.heading{
font-family:Huxtable;
font-weight:bold;
text-align:center;
}

.maintext{
font-family:Huxtable;
}

.subcenter{
font-family:Huxtable;
text-align:center;
}

#nav{
width:150px;
background-color:#00ccff;
float:left;
margin-top:0px;
margin-right:15px;
margin-bottom:15px;
margin-left:10px;
text-align:center;
}

div.hr hr{
width:80%;
height:2px;
color:#FFF;
}

#copyright{
width:800px;
background-image:url(../images/footer.gif);
float:left;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
text-align:center;
color:#000;
}

.clear{
clear:both;
}


The only way I can think around it is by adding a spacer image, but I really didn't want to do that. Any help wanted and thanks in advance. :)

Excavator
Feb 10th, 2010, 04:11 AM
Hello Bankzy108,
You don't say what version IE you're seeing your error in but IE7 kind of drops the ball on my end. I don't have IE6 to see how bad that is... :rolleyes:

You seem to float full width divs a lot. We float elements to put other elements beside them... if they're full width, there is no room to put anything beside them so they should not be floated.

If you clear your floats in #maincontent with overflow:auto; (http://www.quirksmode.org/css/clearing.html) you'll notice you get an X scrollbar. That's because your box model (http://www.w3.org/TR/CSS2/box.html) is off. margin/padding/border all count when figuring widths and total width of contained elements cannot exceed the width of their container.
In your case, do the math and you'll see your right and left columns add up to 820px ... they don't quite fit in your 800px wide #maincontent.


Fix your box model
Clear your floats
Run your code through the validator (see the links in my sig below)


Those three things will help your site a lot.

Bankzy108
Feb 10th, 2010, 05:41 AM
If you clear your floats in #maincontent with overflow:auto; (http://www.quirksmode.org/css/clearing.html) you'll notice you get an X scrollbar. That's because your box model (http://www.w3.org/TR/CSS2/box.html) is off. margin/padding/border all count when figuring widths and total width of contained elements cannot exceed the width of their container.
In your case, do the math and you'll see your right and left columns add up to 820px ... they don't quite fit in your 800px wide #maincontent.

I've corrected my floating problem and have come on to the next point - Fixing my box model, yet i'm confused now. I add the totals up and yet I still get 800px.



#content{
width:580px;
background-color:#00ccff;
float:left;
margin-top:0px;
margin-right:10px;
margin-bottom:15px;
margin-left:15px;
padding:0px 10px 0px 10px;
}

#nav{
width:150px;
background-color:#00ccff;
float:left;
margin-top:0px;
margin-right:15px;
margin-bottom:15px;
margin-left:10px;
text-align:center;
}


Now add the numbers together:

Content = 580+10+15+10+10= 625px

Nav = 150 + 15 + 10 = 175px

Total = 625 + 175 = 800px

Or am I missing something - go easy on me its early morning. :)

Thanks in advance.

Excavator
Feb 10th, 2010, 10:35 AM
I'm sorry, my mistake Bankzy108,
I saw the float drop in FF3.6 when I replaced float:left; with overflow:auto; ...then did some quick (wrong) math.

Turns out the float drop is caused by your disjointed rollovers. You'll notice the float drop doesn't happen when you either use overflow:hidden; on #maincontent or remove the .images span styling.

Further up, you have a clearing div. It's outside of #header and not doing anything...
If you move that clearing div to be the last thing before you close #maincontent and then remove the float:left; it works.


You could probably argue that since it works with float:left; on #maincontent, why not leave it that way...
It's just a pet peeve of mine, floating full width elements just doesn't make sense.

Bankzy108
Feb 10th, 2010, 03:22 PM
It works now that I have put that clear in the #maincontent section and removed the float left from the #maincontent, but now I lose my white background. Anyway, to get this back? Also as you say remove floats from full width divs I did with the #copyright and it went right up to the top and copied my background half way down the page. If I re-insert the float:left to the copyright everything is fine and dandy. Is there another way around it without me having to put the float:left in to abide by CSS standards?

Thanks in advance.

ahallicks
Feb 10th, 2010, 03:28 PM
clear: both on #copyright?

abduraooft
Feb 10th, 2010, 03:31 PM
It works now that I have put that clear in the #maincontent section and removed the float left from the #maincontent, but now I lose my white background. Anyway, to get this back? Also as you say remove floats from full width divs I did with the #copyright and it went right up to the top and copied my background half way down the page. If I re-insert the float:left to the copyright everything is fine and dandy. Is there another way around it without me having to put the float:left in to abide by CSS standards?
The number of floats applied to your page is more than what required to make a two column layout. You might have enough reasons to put them all, but you know, IE6 doesn't understand your intentions and thus it may behave oddly. I'd recommend you to reduce the number of floats and widths applied to it.

Take a look at http://bonrouge.com/2c-hf-fluid(r).php, which a good 2 column layout. You could set a fixed width to wrapper and apply the other styles to suit for your needs.

Excavator
Feb 10th, 2010, 05:43 PM
ab is right, floating both columns can be buggy when they are an exact pixel fit like yours. I have a demo of a two-column layout that only floats one column here (http://nopeople.com/CSS/simple_2-column/index.html).
You can avoid a lot of IE bugs by using that method.


For your white background, that must only be IE6?
Fix that by not floating your full width #copyright. Like this -

#copyright{
width:800px;
background-image:url(../images/footer.gif);
height: 20px;
clear: both;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
text-align:center;
color:#000;
}

Bankzy108
Feb 10th, 2010, 07:26 PM
I've sorted the problem now. Heres the link:

Paw Prints (free server at the moment for testing purposes) (http://pawprintsdoggrooming.clanteam.com/index.html)

Can people tell me if it loads out of context, but a second late it loads how it is supposed to look? If it loads out of context, then is it the free server I'm using or is there something I can do to make it load how its supposed to? Also does my image work properly to you all when you go to the photos page and click one of the images?

Thanks in advance for the help.