Trouble in IE Land:Rounded Corners using a table

[jinscoe]

Hello All,

I am using a table (I know, very taboo) but I'm not sure how to avoid it. If anyone read my last question [webmasterworld.com...] ; I am working on a website with 2 columns that need to match in height and I don't believe faux columns will work for me because users will be able to change background colors to their choosing so faux columns would require generating background images on the fly? Unless someone has any clever css techniques - i think i'm trapped with a table as my layout.

Users will also have different templates and designs they can choose from so I am trying to give myself the hooks for design elements such as rounded corner images for my content area. Right now it looks just fine in FF, seamless and nice, however in IE the bottom corner is dramatically separated from the border image that repeats down the right side. Here is my structure:

<table>
<tr class="cornerrow">
<td rowspan="3">Navigation Menu to the right</td>
<td id="nwcorner"></td>
<td></td>
<td id="necorner"></td>
</tr>
<tr>
<td></td>
<td><div id="maincontentinhere">Fill'er up!</div></td>
<td id ="right border"></td>
</tr>
<tr class="cornerrow">
<td id="swcorner"></td>
<td></td>
<td id="swcorner"></td>
</tr>
</table>

I have the borders collapsed. I have the each corner td set to a fixed witdth of 25px, as well as have the class 'cornerrow' se to a fixed height of 10px. And the images are inserted as background images. Inserting &nbsp's in the empty td's only seemed to not allow the graphics to touch.

Like I said FF handles this quite nicely with the borders and corners touching seamlessly. IE seamlessly marries the top corner and the right hand border however it appears that the bottom row is much larger than the prescribed 10px and adds a large gap.

Any guidance would be greatly appreciated. Thanks in advance!

[Dabrowski]

The W3C in their wisdom took away TR and TD height properties. You'll have to go back to using transparent spacer images, or in this case you can probably put the corner images in actual image tags.

Unfortunately I don't believe there is a way to make your main row take the remaining height, without either 4 edge positioning in CSS which doesn't work in IE6, or modifying the table on load with JS, which looks bad.

[jinscoe]

Thanks for the reply!

Thats a bit discouraging. It just seems so close!

Would it be better or even possible to just use 1 row and 2 tds to get the columns established and then use divs to position the corners? Or will the table get in the way of them touching the header and footer?

Thanks again!

[Dabrowski]

I've wrestled with this before. The problem is you have fixed the height of your table, I think you mentioned that before.

You could use a div instead of a table. You could float left and right the top corner images, and absolutely position the bottom corners.

Untortunately there's no ideal way I ever found of doing it, but I'm not that hot on CSS, someone else here may have a better way.

[Xapti]

You can get rounded corners without tables. I don't know what you mean by faux columns though, since that's something different than rounded corners.
Even if for some reason you do need faux columns, so your background is an image, it's not much more work to swap images with a different color.

You can also attain rounded corners with the ::before and ::after pseudo-elements, and then use something like IE7.js to have Internet Explorer emulate the CSS, since it doesn't normally.