Forum Moderators: mack
I was wondering if anyone has ever had problems with table heights or widths appearing incorrectly with the Netscape browser.
In my case, I've set up a menu to the left with cells and text inside. On explorer the heights show up correctly at 30px the way I intended. When I use the netscape browser, the cells end up being more like 35px in height. I'm using a standard table setup:
<table>
<tr>
<td>text here</td>
</tr>
<tr>
<td>more text here</td>
</tr>
</table>
It's not a major problem, but it affects how the menu lines up with an image to the right which is 120px in height. I would like the layout to appear the same in both browsers (it is also o.k. with Opera).
Netscape browser version is 7.1. Has anyone had this happen to them?
<html>
<head>
<style>
A.menulink {
display: block;
width: 100%;
height: 30px;
text-align: left;
Padding-Left : 5px;
Padding-Top : 7px;
text-decoration: none;
font-family: arial;
font-size: 12px;
line-height: 14px;
font-weight: bold;
color: #ffffff;
background-color:#999999;
border-left: solid 0px #ffffff;
border-right: solid 0px #ffffff;
border-top: solid 1px #ffffff;
border-bottom: solid 0px #ffffff;
}
A.menulink:hover {
border-left: solid 0px #ffffff;
border-right: solid 0px #ffffff;
border-top: solid 1px #ffffff;
border-bottom: solid 0px #ffffff;
background-color:#666666;
}
</style>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<table height="120" width="150" cellpadding=0 cellspacing=0 border=0>
<tr valign=top>
<td>
<table border="0" width="150" height="120" cellpadding=0 cellspacing=0>
<tr>
<td><a href="http://www.somesite.html" class="menulink">Text1</a></td>
</tr>
<tr>
<td><a href="http://www.somesite.html" class="menulink">Text2</a></td>
</tr>
<tr>
<td><a href="http://www.somesite.html" class="menulink">Text3</a></td>
</tr>
<tr>
<td><a href="http://www.somesite.html" class="menulink">Text4</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I tried setting the tr td{margin: 0px; padding: 0px;} but it only affected the top and left, not the bottom margin which is the source of the problem.
Also "line-height: 14px;" is improper syntax: it should be a percentage or a number: in this case 1.4 or 140% would be equivalent. Take out the line and see what I mean - compliant browsers will ignore that line as it is now (with "px").
Try dropping the padding-top and setting "line-height: 2.5;".
>> Also "line-height: 14px;" is improper syntax: it should be a percentage or a number: in this case 1.4 or 140% would be equivalent.
>> Try dropping the padding-top and setting "line-height: 2.5;"
As far as I know, all numbers in CSS must have units of px, pt, em, %, or # stated.
Only the number 0 does not need units.
Generally you are correct; specifically, in this instance, you are not.
First: from w3c (bold is my emphasis):
'line-height'
Value: normal ¦ <number> ¦ <length> ¦ <percentage> ¦ inherit
......
<number>
The computed value of the property is this number multiplied by the element's font size. Negative values are illegal. However, the number, not the computed value, is inherited.
The three rules in the example below have the same resultant line height:DIV { line-height: 1.2; font-size: 10pt } /* number */
DIV { line-height: 1.2em; font-size: 10pt } /* length */
DIV { line-height: 120%; font-size: 10pt } /* percentage */
The <number> attribute is any positive or negative integer or real number without unit identifier. The number range may be restricted - i.e. line-height is restricted to non-negative values.
The <length> attribute requires a unit identifier and can be positive/negative, integer/real unless specifically limited in some instance.
Second: I always run my code through both css and html validators prior to submitting here and note any warnings/errors. In this instance my code validated as valid xhtml 1.0 strict and valid css2. Note: I run my tests with css as a separate linked file to simplify valdation.
I hadn't checked this thread in a while, so I didn't realize there were more posts.
The change improved the appearance of the menu in Netscape considerably, but it is not quite perfect. Things don't line up as they do in IE or Opera. The space at the bottom is still slighltly larger in Netscape. Is there anything else that could be done to improve on this? From what I understand, ideally, pages should appear the same in all browsers.
An additional problem I'm having with Opera is that I keep getting the message: "Could not connect to remoter server" for my footer. I use iframes, so could this be the cause? My other iframes are appearing o.k., however (I have the most recent version of Opera which should support frames). Also some of my images appear, while others don't. What causes this?
ideally, pages should appear the same in all browsers
That ideal isn't going to happen in reality for quite a while, if ever. I just aim for "pages should look good in all browsers".
In particular, pixel perfect control of container widths and heights goes out the window when text enters the picture. Browsers come complete with their own sets of "core fonts" and these fonts are not identical, they're just close. And just when you think you've got it nailed, you visit a friend with a Mac running IE 5.2 ;)
The web just isn't print, and aiming for print-like control will really gobble up your development time. I've found that the more I move beyond a print mind set and learn how to generate flexible pages, the happier I am in my work.
