By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,447 Members | 1,172 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,447 IT Pros & Developers. It's quick & easy.

can't get footer div to behave in IE!!

P: 1
Hi All, I have a footer div that I can't make behave!! It has the same css as the div above it, but it won't align...I've included the pertinent css: a container that holds the entire layout, the div above the footer for reference, and the footer itself. I have the pertinent html below the css. BTW, this is only breaking in IE!! (comments added only for this post)

Thanks!!!
/* THE BODY FOR LAYOUT CENTERING */

body {
text-align:center;
background-image: url('graphics/background.gif');
background-repeat: repeat-x;
}

/*THE OVERALL CONTAINER */
#container {
width:765px;
margin:0px auto;
text-align:left; /* to counter the centering from above */
padding:5px;
border-top: 1px solid #c2c1ba;
border-bottom: 1px solid #c2c1ba;
background-image: url('graphics/containerback2.gif');
background-repeat: repeat-y;
}
/*THE DIV ABOVE THE FOOTER (AND ITS TWO INNER DIVS)*/
#calsvt {
width:763px;
margin:0px;
background-color: #fff;
padding-top:5px;
padding-bottom: 5px;
border:1px dashed #333;
}

#calsvtleft {
width: 350px;
padding: 0;
margin: 10px;
float:left;
border:1px dashed #000;
}

#calsvtright {
width: 350px;
padding: 0;
margin: 10px;
float:right;
border:1px dashed #000;

}
/*THE FOOTER DIV THAT WON'T ALIGN: SHOWING ABOUT 2px SHORT ON THE RIGHT SIDE!*/

#footer {
width:763px;
margin:0px;
background-color: #660000;
padding-top:5px;
border:1px dashed #333;
}

#footerleft {
width: 350px;
padding: 0;
margin: 10px;
float:left;
text-align:left;
border:1px dashed #000;
}

#footerright {
width: 350px;
padding: 0;
margin: 10px;
float:right;
text-align:right;
border:1px dashed #000;
}


THE HTML:

<body>
<div id="container">

<div id="calsvt">

<div id="calsvtleft">
//STUFF HERE
</div> <!-- for calsvtleft -->

<div id="calsvtright">
//STUFF HERE
</div> <!-- for calsvtright -->

<div style="clear: both;"></div>
</div> <!-- for calsvt -->


<div id="footer">

<div id="footerleft">
//STUFF HERE
</div>

<div id="footerright">
//STUFF HERE
</div>

<div style="clear: both;"></div>

</div> <!-- for footer -->


<div style="clear: both;"></div>
</div> <!-- for container div -->

</body>
</html>
Jan 19 '07 #1
Share this Question
Share on Google+
2 Replies


Motoma
Expert 2.5K+
P: 3,235
Hi All, I have a footer div that I can't make behave!! It has the same css as the div above it, but it won't align...I've included the pertinent css: a container that holds the entire layout, the div above the footer for reference, and the footer itself. I have the pertinent html below the css. BTW, this is only breaking in IE!! (comments added only for this post)

Thanks!!!
/* THE BODY FOR LAYOUT CENTERING */

body {
text-align:center;
background-image: url('graphics/background.gif');
background-repeat: repeat-x;
}

/*THE OVERALL CONTAINER */
#container {
width:765px;
margin:0px auto;
text-align:left; /* to counter the centering from above */
padding:5px;
border-top: 1px solid #c2c1ba;
border-bottom: 1px solid #c2c1ba;
background-image: url('graphics/containerback2.gif');
background-repeat: repeat-y;
}
/*THE DIV ABOVE THE FOOTER (AND ITS TWO INNER DIVS)*/
#calsvt {
width:763px;
margin:0px;
background-color: #fff;
padding-top:5px;
padding-bottom: 5px;
border:1px dashed #333;
}

#calsvtleft {
width: 350px;
padding: 0;
margin: 10px;
float:left;
border:1px dashed #000;
}

#calsvtright {
width: 350px;
padding: 0;
margin: 10px;
float:right;
border:1px dashed #000;

}
/*THE FOOTER DIV THAT WON'T ALIGN: SHOWING ABOUT 2px SHORT ON THE RIGHT SIDE!*/

#footer {
width:763px;
margin:0px;
background-color: #660000;
padding-top:5px;
border:1px dashed #333;
}

#footerleft {
width: 350px;
padding: 0;
margin: 10px;
float:left;
text-align:left;
border:1px dashed #000;
}

#footerright {
width: 350px;
padding: 0;
margin: 10px;
float:right;
text-align:right;
border:1px dashed #000;
}


THE HTML:

<body>
<div id="container">

<div id="calsvt">

<div id="calsvtleft">
//STUFF HERE
</div> <!-- for calsvtleft -->

<div id="calsvtright">
//STUFF HERE
</div> <!-- for calsvtright -->

<div style="clear: both;"></div>
</div> <!-- for calsvt -->


<div id="footer">

<div id="footerleft">
//STUFF HERE
</div>

<div id="footerright">
//STUFF HERE
</div>

<div style="clear: both;"></div>

</div> <!-- for footer -->


<div style="clear: both;"></div>
</div> <!-- for container div -->

</body>
</html>
I'm not sure if this is the case or not, but I ran into a circumstance where IE was rendering whitespace in between cells in a table. The solution for me was to remove the lines between the elements that were not aligning correctly.
Just a shot in the dark.
Jan 19 '07 #2

drhowarddrfine
Expert 5K+
P: 7,435
Maybe I'm missing something but they look the same to me in FF, IE6 and IE7.
Jan 19 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.