1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Development Help with height of row in a table (HTML/CSS)

Discussion in 'Software' started by Dr. Strangelove, 6 Jun 2008.

  1. Dr. Strangelove

    Dr. Strangelove What's a Dremel?

    Joined:
    13 Mar 2005
    Posts:
    345
    Likes Received:
    1
    Hi Guys

    I have a problem that I hope you may be able to help me with. It seems to me that IE ignores the height tag if put inside <td> tags but firefox (and safari) does not.
    a simple code like this:

    <table border=1>
    <tr><td rowspan=2 width='50' height='200'>bla bla</td><td height='20'>top</td></tr>
    <tr><td>bottom</td></tr>
    </table>

    gives me two different things in IE and firefox, in firefox it looks correct in IE it does not. Is there a way to make it look like it does in Firefox in IE?

    I can post some screenshots of the difference if needed.

    Thanks
     
    Dr. Strangelove, 6 Jun 2008
    #1
  2. Fophillips

    Fophillips What's a Dremel?

    Joined:
    9 Oct 2006
    Posts:
    948
    Likes Received:
    1
    Try putting "px" after the 200?
     
    Fophillips, 6 Jun 2008
    #2
  3. Dr. Strangelove

    Dr. Strangelove What's a Dremel?

    Joined:
    13 Mar 2005
    Posts:
    345
    Likes Received:
    1
    nope does not change anything :(
     
    Dr. Strangelove, 6 Jun 2008
    #3
  4. Fophillips

    Fophillips What's a Dremel?

    Joined:
    9 Oct 2006
    Posts:
    948
    Likes Received:
    1
    Perhaps define the row height instead?
     
    Fophillips, 6 Jun 2008
    #4
  5. Dr. Strangelove

    Dr. Strangelove What's a Dremel?

    Joined:
    13 Mar 2005
    Posts:
    345
    Likes Received:
    1
    Can I do that and how? I mean one of the problem is that the first cell spans two rows. It seems to me that IE just basically ignores the height tag unless it's greater than 50% of the height of the table. In other words if I set the height tag to 150 (height=150) for the "Top" cell it grows in IE.. but refuses to be smaller than 50% of the total table height.
     
    Dr. Strangelove, 6 Jun 2008
    #5
  6. DougEdey

    DougEdey I pwn all your storage

    Joined:
    5 Jul 2005
    Posts:
    13,933
    Likes Received:
    33
    style="height: 50px" as an attribute and remove the height attribute
     
    DougEdey, 6 Jun 2008
    #6
  7. cpemma

    cpemma Ecky thump

    Joined:
    27 Nov 2001
    Posts:
    12,328
    Likes Received:
    55
    Or if you have several similar you can define that format table in the css file
    Code:
    table.parts  {
border-style: solid;
border-width: 2px 1px 1px 2px; 
border-color: white black black white;
background-color: #a9a9a9;
}

.parts td {
background: white;
font-size: 11px; 
[B]line-height: 100%;[/B]
padding: 5px;
}

.parts th {
background-color: #dcdcdc;
font-size: 11px;
font-weight: bold;
text-align: left;
[B]line-height: 120%;[/B]
padding: 5px;
}
     
    cpemma, 6 Jun 2008
    #7
  8. koola

    koola Minimodder

    Joined:
    11 Jul 2004
    Posts:
    2,462
    Likes Received:
    10
    Try this:

    Code:
    <!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=utf-8" >
	<title>Title</title>
</head>
<body>
	<table border="1">
		<tr>
			<td width="100" height="200" rowspan="2">bla bla</td>
			<td height="50">top</td>
		</tr>
		<tr>
			<td>bottom</td>
		</tr>
	</table>
</body>
</html>
    It's valid and should display properly. If not use xhtml and stick in a conditional statement for IE.
     
    koola, 7 Jun 2008
    #8
  9. Dr. Strangelove

    Dr. Strangelove What's a Dremel?

    Joined:
    13 Mar 2005
    Posts:
    345
    Likes Received:
    1
    Thanks guys, i will have a look at your suggestions tonight

    I'll let you know how I get along
     
    Dr. Strangelove, 9 Jun 2008
    #9
  10. cpemma

    cpemma Ecky thump

    Joined:
    27 Nov 2001
    Posts:
    12,328
    Likes Received:
    55
    <table border=1>
    <tr>
    <td rowspan=2 width='50' height='200'>bla bla</td>
    <td >top</td>
    </tr>
    <tr>
    <td height='180'>bottom</td>
    </tr>
    </table>

    Declaring the height in the second row works in FF & IE7. You've already defined a height of 200 for the first row, looks like IE only accepts 1 height setting per row.
     
    cpemma, 9 Jun 2008
    #10

Share This Page