|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
June 28th, 2004, 04:41 PM
|
|||
|
|||
|
IE gap between nested content & footer divs
I have a container div which includes a #header div, a left-floated #content div, a #right div, and a #footer div. The #content div has a background image that does not want to extend all the way down within the div to snuggly join the footer in any IE browser. I've tried the Holly hack, adding a line-height, relative positioning but to no avail. The stylesheet is embedded in the html file. Here's the link:
http://www.emaycreations.net/BuildWebsiteIII/Week6/finalexamPractice.html It looks great in NN, FF and Opera but neither IE 5 nor 6 displays the page correctly. Can anyone help? Mari-Anne in Montana
|
|
#2
June 28th, 2004, 07:04 PM
|
||||
|
||||
|
You've run smack dab into some IE buggy behavior.
Code:
#nav ul {
padding: 0;
margin: 20px 0 0 0;
list-style: none;
text-align: center;
float: left; /* lose the float */
}
#nav li a:link, #nav li a:visited {
display: block;
width: 10.5em; /*causes different effects at different window sizes.
IE wrongly expands the containing box. Look at 800x600
Looks good in Moz and breaks in IE*/
<div id="right">
<h4>Additional Resoures:</h4>
<ol>
…
</ol>
<div id="nav">
<ul>
…
</ul></div> <!-- end nav -->
</div> <!-- end right -->
<div id="footer">Emaycreations 2004
</div> <!-- end footer -->
</div> <!-- end container -->
<a href="http://validator.w3.org/check?uri=referer"><img border="0"
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01!" height="31" width="88"></a>
</body>
</html>
These suggestions are not tested. If they don't help, I may have time later to deconstruct and rebuild the page. cheers, gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. My html and css workshop, demos and tutorials. Ask a better question, get a better answer.
|
|
#3
June 28th, 2004, 07:18 PM
|
|||
|
|||
|
It worked!
Just losing the {float: left;} in the #nav ul rule did the trick! I can't believe it was so "simple" - you're a genious! Thanks a bunch. I really appreciate the help.
Mari-Anne
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > IE gap between nested content & footer divs |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
