rounded tables

don't work properly with IE6

[dwidmer]

I am using a graphic to achieve a "rounded corner"
effect for my tables. the width and height of the cell
containing the graphic has a fixed value.

Code:

<table border="0" cellpadding="0" cellspacing="0" width="99%">
<tr>
<td valign="top" width="15" height="16"><img src="http://www.server.com/img/corner_top_left.gif" alt="" width="15" height="16"></td>
<td valign="top" width="50" height="16" class="weiss">&nbsp;</td>
<td valign="top" height="65" class="weiss" rowspan="2"><p class="rechts"><br><big><b><IMG SRC="http://www.server.com/img/tagline1DE.jpg" alt="Our slogan"></b></big></p></td>
<td valign="top" width="15" height="16"><img src="http://www.server.com/img/corner_top_right.gif" alt="" width="15" height="16"></td>
</tr>

...

I realized that in IE6 this effect doesn't look the way it should.
There's a small gap (where you can see the background of the page).

Strangely, this problem does not show if you use Win XP and IE6 instead
of Win98 and IE6.

Any ideas? Font size settings are always "medium". (Looks okay if you
put them on "small")

Works fine with Opera, and Mozilla.

thx

Dan

[marek]

dwidmer, consider using CSS (cascading style sheets) to achieve the desired effect. You'll find many good exemples if you look for "css round corners" or "css rounded corners" in Google.

[hakre]

hi dwidmer, welcome to webmasterworld [webmasterworld.com].

where you can see the background of the page

where exactly does the (page?) background shine through the table?

[dwidmer]

the background shows underneath the top left corner.
(a little tick of the background color shines through)

[korkus2000]

Have you tried styling the TD with the problem margin:0?

[dwidmer]

nope, haven't tried that yet. what would the proper syntax look like?

<td style="margin:0">Image</td>?

[amznVibe]

I've gone through this issue while upgrading a few sites.
Some tips for cross-browser rounded corners with tables:

1. try to use even image sizes, not a mix of even and odd
2. declare all widths and heights
3. don't forget to use display:block on images for consistancy
4. try setting table style to border-collapse: collapse (even if repetative)
5. try manipulating misbehaving cells with align=center or align=right (or valign equivalents for vertical gaps)

[dwidmer]

thanks for the advice, I'll try to implement this checklist.
Sounds interesting.

Dan

[edited by: tedster at 7:43 am (utc) on July 24, 2003]
[edit reason] remove link to example [/edit]

[hakre]

here is another trick (no css, just html) which does the job very well:

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="your color">
<tr>
<td width="10" height="10"><img [i]round-left-top 10x10[/i] /></td>
<td [b]width="100%"[/b]><img [i]spacer 1x10 (width x height)[/i] /></td>
<td width="10" height="10"><img [i]round-right-top 10x10[/i] /></td>
</tr>
<tr>
<td colspan="3" style="padding-left: 10px; padding-right: 10px"> [content] </td>
</tr>
<tr>
<td width="10" height="10"><img [i]round-left-bottom 10x10[/i] /></td>
<td [b]width="100%"[/b]><img [i]spacer 1x10 (width x height)[/i] /></td>
<td width="10" height="10"><img [i]round-right-bottom 10x10[/i] /></td>
</tr>
</table>

this often does the job very well. you can change the <tr> in the middle, it's only for demonstration purposes.

-hakre