Firefox padding too much

tpeck · 11-08-2011, 02:03 PM

I've pared this down a lot to show the difference in height of the rows in IE and Firefox.

Why does Firefox stretch the height so much? Chrome and IE display nice narrow rows - which is what I require.

Can it be fixed for FF?

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Side Menu</title>
<style>
body {margin:0;}
td {
font-family: Arial, Helvetica;
font-size:12px;
color: #000000
}
.SideMenu {
font-family : Arial; 
font-size : 10px;
font-weight: bold; 
font-style: normal;
color: black;
text-decoration: none
}
</style>
</head>

<body>

<table border="1" width="100%" cellspacing="0" style="border-collapse: collapse" cellpadding="0">
	<tr>
		<td nowrap>
		<table border="0" cellpadding="0" style="border-collapse: collapse">
			<tr>
				<td nowrap width="10">&nbsp;</td>
				<td nowrap width="130"><a target="_parent" href="one.html">
				<p class="SideMenu">ITEM 1</p>
				</a></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td nowrap>
		<table border="0" cellpadding="0" style="border-collapse: collapse">
			<tr>
				<td nowrap width="10">&nbsp;</td>
				<td nowrap width="130"><a target="_parent" href="two.html">
				<p class="SideMenu">ITEM 2</p>
				</a></td>
			</tr>
		</table>
		</td>
	</tr>
</table>

</body>

</html>

Kor · 11-08-2011, 02:13 PM

Of course they display "narrow" rows, as they simply will not render the CSS style, because you omitted to add a Doctype to your document, thus the document will be displayed in so called "quirks mode" (that means each browser will takes his own arbitrary course).

Doctype is a must:
http://htmlhelp.com/tools/validator/doctype.html

Use, say, a HTML 4.01 strict Doctype. Now all the browsers will see the same thing. If you don't like how it looks like, change your CSS properties/values accordingly.

As a tip: you should set the height and the line-height CSS properties of the cells.

tpeck · 11-08-2011, 02:47 PM

Thanks. I always have trouble with this sort of thing...

But if I do this, it is the same in IE and FF, but not narrow enough:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Side Menu</title>
<style>
body {margin:0;}
td {
height:15px;
line-height:100%;
font-family: Arial, Helvetica;
font-size:12px;
color: #000000
}
.SideMenu {
font-family : Arial; 
font-size : 10px;
font-weight: bold; 
font-style: normal;
color: black;
text-decoration: none
}
</style>
</head>

It looks the way I want it in FrontPage, but is still too fat in the browsers.

Am I on the right track?

teedoff · 11-08-2011, 03:00 PM

You still need a doctype no matter what..so yes your on the right track...well with the exception of using frontpage....

Do you have a link to your site?

Excavator · 11-08-2011, 03:23 PM

Hello tpeck,
Invalid code is causing that. Paragraph tags do no belong inside your anchor.
You could just style the words ITEM 1 from the anchor but you could also use a span there.
Try it like this once -

Code:

r>
		<td nowrap>
		<table border="0" cellpadding="0" style="border-collapse: collapse">
			<tr>
				<td nowrap width="10">&nbsp;</td>
				<td nowrap width="130"><a target="_parent" href="one.html">
				<span class="SideMenu">ITEM 1</span>
				</a></td>
			</tr>
		</table>
		</td>

See the links about validating and tables in my signature line.

Kor · 11-08-2011, 03:24 PM

Give it a firm line-height, not a percent one. In fact using line-height is a trick in order to center vertically the text. if so, give the line-height the same value as to the height.