Size of Table Cell

[Xav]

I have a table split into two sections - the main content and the sidebar on the right. The sidebar consists of a single column, with multiple cells for each piece of info on the sidebar.

The sidebar cells use two CSS classes. For the heading cells, I am using a style to set the height of the cell to a certain (smallish) amount. I have also tried simply setting the 'width' property of the cell.

In both cases, the cell resizes correctly in Firefox, but in IE it's either the same as before, or really massive. Why does the cell behave like this? I'm setting it to 50px, and it shows as 50px in Firefox, but more like 300px in IE...

[Jordan]

Do you have it on the web where I can view it? It is hard to diagnose without seeing it in both browsers myself. Also, post your CSS please.

[Xav]

Well, it's sort of rubbish and half-finished, but it's available here:

Home - Xav's Net Site

I don't have the CSS to hand, but I can tell you what it is:

@ The external CSS file contains the class "sidebar_heading", which contains the "width: 50px;" line (the other properties in the class work fine).

@ The CSS file is linked via a <link> tag. All the other styles work, including the background-color / text colour in the sidebar_heading class.

@ The cell links the CSS file, as in <td class="sidebar_heading">.

Is this enough info?

[Jordan]

Actually, I took a screenshot in FF and IE.

FF = 229px in Width
IE = 261px in Width.

Neither are actually 50px. You said you have "width: 50px;" above but I see this as your CSS:

.sidebar_heading
{
background-color: #ff0000;
color: #ffffff;
font-size: 16px;
height: 50px;
}

I see no "width" but I do see a "height".


I want to point out some other errors.

You have:

<tr class="sidebar_content"><td>

This site is dedicated to bring you only the finest of webpages.
Shouldn't this be:

<tr class="sidebar_heading"><td>

This site is dedicated to bring you only the finest of webpages.

OR

<tr><td class="sidebar_heading">

This site is dedicated to bring you only the finest of webpages.


You have:

<td height="50px">Google Search</td>

You can't use "px" in a <td> tag. You can do:

<td height="50">Google Search</td>

Or us inline CSS:

<td style="height: 50px;">Google Search</td>

[Xav]

Sorry, my mistake. I meant HEIGHT, not WIDTH! Sorry for the confusion.

The cells containing the content are using "sidebar_content". I don't care how big those ones are for now - just the "sidebar_heading" one.

Just replace any occurences of "width" with "height" in my explanation. I just got that mixed up. Can you help?

[Kaabi]

It's always weird how things work differently in Firefox than in IE. I'm sure the tables will work out fine, though.

[Xav]

I know - I think I've solved it, though. I'm just fixing it now.

It is IE that is the problem. IE is absolutely awful at rendering pages, and completely messes up on the Acid test (to see how good it is at displaying pages). Unfortunately, as IE is so popular, designers must make the page compatible, even if doing so introduces errors in the code.

However, the beta of IE8 passes the test, so maybe things are about to change... but what will happen to all those pages that were designed (with errors) to work on previous versions of IE?