Forum Moderators: not2easy
I'm having a problem with my div's in FF. My page looks fine in IE7 but in FF2 it displays a small "gap" between them.
I tried a few things among which was * {padding: 0px; margin: 0px;} but it didn't work.
I'm sure I'm overlooking something. Can anyone help?
.header {
width: 800px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}.footer {
width: 790px;
clear: both;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#container {
width: 800px;/* A */
margin-top: 0px;
margin-right: auto;/* auto; if centered -- 0; if not */
margin-bottom: 0px;
margin-left: auto;/* auto; if centered -- 0; if not */
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
position: relative;
}
#wrapper {
width: 800px;/* B */
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#main {
width: 590px;/* C */
float: right;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
background-color: #47b977;
}
#nav {
width: 200px;/* E */
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
background-color: #bfe1c7;
}
and here's the html:
<body>
<div id="container">
<div class="header"><img id="logo" src="img/header.gif" alt="" /></div>
<div id="wrapper">
<div id="main">
<br />
</div>
<div id="nav">
<br />
<img src="img/orna.jpg" alt="" />
<a class="menu" href="index.html" title="Home">Home</a>
<a class="menu" href="index.html" title="Biography">Biography</a>
<a class="menu" href="index.html" title="Resume">Resume</a>
<a class="menu" href="index.html" title="Workshops">Workshops</a>
<a class="menu" href="index.html" title="Downloads">Downloads</a><br />
<img src="img/ornb.jpg" alt="" />
</div>
</div>
<div class="footer">...</div>
</div>
</body>
Yes I changed the line-height of the header class to 0px and now the div's join up. Question remains, what is the problem here, is it a "bug" in FF or in IE?
Besides, what if I want text in my header? (luckily I don't need it here, so this "trick" will do)
Thnx
Kind of like with table cells.... IE aligns them center and middle by default.... FF aligns top and left by default... neither are wrong
an inline element, which an image is, automatically aligns itself to the default baseline (which is not the same as the bottom) of the line-height. By explicitly making the line-height 0 you have taken away the 'default' line-height and so I presume it is overflowing or at least the inline height is less than the image can align to, which might be noticeable if there was text.. however as you say in this case this is not so important to get the effect.
in order to fix if there was text involved you could explicitly make your line-height the same height as your image/header, OR you would set the vertical-align property of the image to 'top' or 'bottom' whichever suited best.
The difference between baseline and bottom, when it comes to vertical-align is font-size/family dependent and is the space that would normally be left for the descenders of letters like p, g, j, q etc..
or you can usually solve it by taking away inline alignment, by simply making the image
display: block;again the best method might depend on the overall effect required
[edited by: SuzyUK at 6:29 pm (utc) on June 26, 2007]
