Tables in Firefox vs IE

[Hugene]

I know its a bit of hugelly general question, but here we go: I have a table with one big cell, which contains another table where the actuall content is (this table has many tables nested in and div tags too). The big outside cell is there in order to have a thin line around the content of my page.

Now, in Firefox, the four lines around the table get rendered alright. On IE however, the right hand-side line is missing. Something is covering it, but I cant figure out what and why. Anyone has any suggestions?

Thanks

[apprentice]

Now, in Firefox, the four lines around the table get rendered alright. On IE however, the right hand-side line is missing.

I have come across many things that didn't render as expected in IE.

As you said, a very general question, so I 'd suggest the only way out is experimentation. If you have defined the elements using fixed sizes, try increasing/decreasing them appropriately and you may discover where the border is gone. My guess is that in most cases, particularly with IE (version 6 or earlier), it tends to add up some space (even though you have set zero paddings/margins). So far, I have been lucky enough to work my design on FF and it turns out to be very similar result for IE - without using any hacks!

Regards.

[JAB Creations]

Hugene, please post your code.

Nested table layout? Gah! Referring to elements as tags? Gah!

Post your code please and I'll be glad to help you do it the correct way! :)

- John

[tedster]

One other suggestion - the first step I take when trying to solve cross-browser rendering issues is to run the code through a validator. Without knowing if there are errors, I can spin in circles and never get a cross-browser result that works.

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

[rocknbil]

...I have a table with one big cell, which contains another table where the actuall content ... in order to have a thin line around the content of my page.

Setting his presentation aside, :-) Jab's comments are on the point, tables within tables are BAD.

Try

<style type="text-css">
.bordered { 1 px solid #000; }
</style>

<table class="bordered" cellpadding="0" cellspacing="0" border="0">
<tr><td some content </td></tr>
</table>

Every table you can eliminate is a step in the right direction. Start with the innermost ones and work outward.

Now, in Firefox, the four lines around the table get rendered alright. On IE however, the right hand-side line is missing.

This will be somehow related to a width or padding issue, and is the fault of the problems with the IE box model. Example: if you have a container object and inside that container object a bordered object set at 100% width, padding or margins on either object may cause the border to dissappear in IE. Experiment with the widths, padding, and margins on the problem objects and you'll find the culprit.

It may be, however, just eliminating some of the nested tables will really help.