www.webdeveloper.com
Results 1 to 8 of 8

Thread: Table Row Too high

  1. #1
    Join Date
    Jun 2007
    Posts
    96

    Question Table Row Too high

    I've got a table whose first row consists of three columns <TD>s, as follows:

    Code:
    <table border="1" cellspacing="0" cellpadding="0" style="width:100%; height:100%;">
    	<tr style = "height:3px;">
    		<td style="width:3px; height:3px;">
    		<img src="../Borders/TestUL.gif" vspace="0" hspace="0" border="0" width="3px" height="3px"/>
    		</td>
    
    		<td style="width:100%; height:3px;">
    		<img src="../Borders/TestT.gif" vspace="0" hspace="0" border="0" width="100%" height="3px"/>
    		</td>
    
    		<td style="width:3px; height:3px;">
    		<img src="../Borders/TestUR.gif" vspace="0" hspace="0" border="0" width="3px" height="3px"/>
    		</td>
    	</tr>
    The row and each of the columns are defined as being 3 pixels high. It displays just fine in Chrome and Netscape. But in Internet Explorer the row ends up being about 18 pixels high. It's almost like what you see when there's a non-breaking space in the row, but there isn't any.

    Any suggestions as to what I need to do to make it really, truly be just 3 pixels high, even for Internet Explorer?

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,132
    Seems to display fine for me in IE8. What's your doctype?

  3. #3
    Join Date
    Jun 2007
    Posts
    96
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,132
    Code:
    Ah, I see why it's working for me ... I use a CSS reset :)
    
    table,tbody, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-weight: inherit;
    	font-style: inherit;
    	font-size: 100&#37;;
    	font-family: inherit;
    	vertical-align: baseline;
    }

  5. #5
    Join Date
    Jun 2007
    Posts
    96
    So, are you saying that when you do NOT do that CSS reset you're seeing the same odd symptoms tat I'm seeing, i.e. the row is taller than it should be?

    I've never used CSS. Can you tell me what I need to do to tell my page to do that reset?

  6. #6
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,132
    Woah, never used CSS?!

    Have mercy!

    You'll want to add this to your HTML:

    Code:
    <style type="text/css">
    table,tbody, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-weight: inherit;
    	font-style: inherit;
    	font-size: 100&#37;;
    	font-family: inherit;
    	vertical-align: baseline;
    }
    </style>

  7. #7
    Join Date
    Mar 2011
    Posts
    4
    Just about the best css reset script from the css guru himself can be found at:

    http://meyerweb.com/eric/tools/css/reset/

    P.S. I find it's always best to reset css to achieve maximum browser compatability when designing websites.

  8. #8
    Join Date
    Mar 2011
    Posts
    4
    P.P.S. With regards to:

    <img src="../Borders/TestT.gif" vspace="0" hspace="0" border="0" width="100&#37;" height="3px"/>

    if you place this image as a background on it's container it will auto grow to fill it... furthermore you do not need to place 'px' in image dimension fields.

    so roughly:

    instead of

    <td style="width:100%; height:3px;">
    <img src="../Borders/TestT.gif" vspace="0" hspace="0" border="0" width="100%" height="3px"/>
    </td>

    try

    <td style="width:100%; height:3px; background-image:url(../Borders/TestT.gif);">&nbsp;</td>


    http://www.cardiff-website-design.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles