Forum Moderators: not2easy
Just recently started a table-less page layout. After a few problems which I've eventually solved I've come across this:
Under my header images and navbar there is a 2px gap before the next element and I can't seem to figure out what's causing it.
The gaps appear in NN7 and IE6 but not in Opera 7 for some reason. I could set the bottom-margins of the offending elements to -2px but that's really a last resort (and it looks bad in Opera).
Thanks in advance.
[edited by: Nick_W at 9:11 pm (utc) on Mar. 16, 2003]
[edit reason] No urls please - See sticky mail [/edit]
Have you tried taking padding out of the the 2 elements either side of the gap?
If you can break it down to literally the rules associated with the 2 sections and the secitions themselves, please post the code. Just keep it as simple and basic as possible and we'll be able to all take a look...
These things aren't generally too hard to handle but they can be rather elusive on occasion ;)
Nick
I had a similar problem and the only solution I could come up with was to create three seperate browser-specific stylesheets just for that area of the page. The difference between the sheets was minimal, with vertical-align:bottom or top or not specified as necessary.
My recommendation would be to steer clear of in-line gifs, and use CSS to create the rectangular images.
But best of all is to devise a page layout where the gap does not show - whatever you do a new browser will come along and break your design. :)
img {
font-size: 1px;
}
OK, so some code:
#header {
position:relative;
height: 60px;
width: 100%;
}
#headerleft {
float: left;
}
#headerright {
float: right;
}
#crest {
align: right;
}
#line {
position: relative;
height: 2px;
}
#redline {
width: 100%;
height: 2px;
}
#navbar {
position: relative;
}
#main {
position:relative;
width:100%;
background-color: #FFFFFF;
min-height: 300px;
}
To save a bit of space I've removed the margin and padding settings (but they were all zero).
<body>
<div id="header">
<span id="headerleft">
<img id="mainstreet" src="image.jpg" width="200" height="60" /><img id="headertext" src="text.gif" width="240" height="60" />
</span>
<span id="headerright">
<img id="crest" src="crest.gif" width="60" height="60" />
</span>
</div>
<div id="line"><img id="redline" src="redline.png" /></div>
<div id="navbar">
<img name="home" src="home.gif" width="52" height="20" alt="Home" />etc...
</div>
<div id="main">
</div>
#header {
position:relative;
height: 60px;
width: 100%;
overflow: hidden;
}
#navbar {
position: relative;
height: 20px;
overflow: hidden;
}
Just set the height of the navbar and added overflow:hidden; to the offending elements.
If anyone wants to tell me why it looks awful in Mozilla 1.3b then I'll be glad to hear it.
I have found whenever you try to do anything at all sophisticated a new browser will come along and crash your layout.
Not sure if that helps tho - because NN7 still shows it.
The neatest way to stop this from happening is to do this at the top of your css:
img {display: block}
