1px gap in Netscape 7 - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

1px gap in Netscape 7

Netscape 7

eternal

5:11 pm on Sep 27, 2004 (gmt 0)

10+ Year Member

I have designed a menu and for some reason Netscape adds an extra pixel or two to the menu height. If you would kindly look at my code in a Netscape browser u will see what I mean. The height is set to 23px (and there is a white image between each menu cell that is 23px high. But it seems like Netscape is setting it to 24 px?!?!?!?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<style type="text/css">
body{
margin:0px;
padding:0px;
background: #003366 url(images/bg.gif) 0px 0px repeat fixed;
}
.maintable {
width:100%;
height:100%;
}
.box {
width:700px;
height:560px;
background-color: #FFFFFF;
border: 2px solid #00315A;
}
.logo {
padding-left:30px;
padding-bottom:10px;
padding-top:10px;
padding-right:0px;
width:220px;
margin:0px;
height:135px;
}
.menu {
padding:0px;
width:100%;
margin:0px;
background-color: #003366;
height:23px;
color:#FFFFFF;
border-bottom:1px solid #003366;
border-top:1px solid #003366;
font-weight: bold;
font-size: .65em;
font-family: verdana, arial;
text-align: center;
}
.color{
background-color:#95B3D0;
height:23px;
}
A:link {color: #ffffff; text-decoration: none; }
A:visited {color: #ffffff; text-decoration: none; }
A:active {color: #ffffff; text-decoration: none; }
A:hover {color: #ffffff; text-decoration: none;}
</style>
</head>

<body>
<table class="maintable" cellpadding="0" cellspacing="0">
<tr>
<td>

<table class="box" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="logo"><img src="images/ecf.gif" alt="Ely Christian Fellowship"></td>
<td width="340px"> </td>
</tr>
<tr>
<td colspan="2" height="23px">

<table class="menu" cellpadding="0" cellspacing="0">
<tr>
<td class="color" width="50px" height="23px"> </td>
<td width="1px"><img src="images/dot_spacer_nav.gif"></td>
<td width="70px" nowrap bgcolor="#005B94">HOME</td>
<td width="1px"><img src="images/dot_spacer_nav.gif"></td>
<td width="70px" nowrap onmouseover="this.style.backgroundColor='#CC3333'" style="CURSOR: hand" onclick="window.location='#'" onmouseout="this.style.backgroundColor='#003366'"><a href="#">LINK</a></td>
<td width="1px"><img src="images/dot_spacer_nav.gif"></td>
<td width="70px" nowrap onmouseover="this.style.backgroundColor='#CC3333'" style="CURSOR: hand" onclick="window.location='#'" onmouseout="this.style.backgroundColor='#003366'"><a href="#">LINK</a></td>
<td width="1px"><img src="images/dot_spacer_nav.gif"></td>
<td width="70px" nowrap onmouseover="this.style.backgroundColor='#CC3333'" style="CURSOR: hand" onclick="window.location='#'" onmouseout="this.style.backgroundColor='#003366'"><a href="#">LINK</a></td>
<td width="1px"><img src="images/dot_spacer_nav.gif"></td>
<td width="70px" nowrap onmouseover="this.style.backgroundColor='#CC3333'" style="CURSOR: hand" onclick="window.location='#'" onmouseout="this.style.backgroundColor='#003366'"><a href="#">LINK</a></td>
<td width="1px"><img src="images/dot_spacer_nav.gif"></td>
<td width="70px" nowrap onmouseover="this.style.backgroundColor='#CC3333'" style="CURSOR: hand" onclick="window.location='#'" onmouseout="this.style.backgroundColor='#003366'"><a href="#">LINK</a></td>
<td width="1px"><img src="images/dot_spacer_nav.gif"></td>
<td class="color"> </td>
</tr></table></td>
</tr>
<tr>
<td colspan="2" height="360px">

<table cellpadding="0" cellspacing="0" height="100%">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td></tr>
</table>
</td>

</tr>
</table>
</body>
</html>

choster

5:40 pm on Sep 27, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

eternal, the first place I would look is the box model-- see [css-discuss.incutio.com...] .

Netscape 7 interprets the height of .menu according to the W3C specification: height= 23px (content) + 1px (bottom border) + 1px (top border) = 25px. IE interprets it according to the IE model: height = content + padding + borders + margins = 23px.

Second, HTML attribute values should not contain units-- all numerical entries are assumed to be pixels. Thus, code such as width="1px" may give unpredictable results; the correct notation would be simply width="1".

Incidentally, you could simplify a good deal of your code by using more CSS, maybe something like

Your menu could look like

<ul id="menu">
<li id="homelink">HOME</li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>

and styled something like

ul#menu, ul#menu li {margin:0;padding:0}
ul#menu li {float:left;list-style:none}
ul#menu li a {border-right:1px solid #fff; width:70px;white-space:nowrap}
ul#menu li a:link, ul#menu li a:visited {background:#036;}
ul#menu li a:hover, ul#menu li a:active {background:#c33;}
ul#menu li#homelink {background:#005B94;}

to start.

[edited by: choster at 5:41 pm (utc) on Sep. 27, 2004]

tedster

5:40 pm on Sep 27, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

First guess - this is a standards mode/quirks mode problem. You're using a full DTD and Netscape is rendering according to full standards. This means images are aligned to the text baseline in a table cell, and the extra space is there to allow for text descenders that extend below the baseline.

See [webmasterworld.com...] messages #3 and #4 for more detail andlet us know if that handles the issue.

eternal

7:43 pm on Sep 27, 2004 (gmt 0)

10+ Year Member

Thanks Tedster that was the problem.

I tried the solution u gave in the above thread but it didnt solve it. I then tried this one:

td img {
vertical-align: bottom;
}

And it worked. Its frustrating when u know you are a pixel out but u dont know why. I will watch those tight image spaces.

Thanks all