Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    820
    Thanks
    43
    Thanked 6 Times in 5 Posts

    Firefox padding too much

    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>
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    Last edited by Kor; 11-08-2011 at 02:19 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    820
    Thanks
    43
    Thanked 6 Times in 5 Posts
    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?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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?
    Teed

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •