homepage Welcome to WebmasterWorld Guest from 50.17.27.205
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
table border not displaying with IE8
rsndll




msg:3920162
 10:42 am on May 26, 2009 (gmt 0)

I have the following style applied to the td tags of a table:

{position:relative; font-size: 12px; text-align:center; padding: 6px; background-color:#a11a11; border: 1px solid #EEEEEE; }

Everything is OK in IE8 except that no borders are being displayed. It works fine in all previous IEs and Firefox, Opera and Safari. How can I get the border to display by adjusting the CSS?

My doctype is below, which if I delete solves the border problem but introduces many more!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4.01/loose.dtd">

 

jameshopkins




msg:3920332
 2:50 pm on May 26, 2009 (gmt 0)

> My doctype is below, which if I delete solves the border problem but introduces many more!

If you removed your Doctype, you would invoke quirks mode, which you want to steer of, no doubt.

Do you have some corresponding HTML, or even better, a page which demonstrates the problem, which we can look at?

swa66




msg:3920334
 2:55 pm on May 26, 2009 (gmt 0)

Code would be great (remember: no links out here)

rsndll




msg:3920395
 4:27 pm on May 26, 2009 (gmt 0)

I have done some investigation and it appears that it is the position:relative in the style that's making the border disappear. But I would like to keep that.
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4.01/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>test profile page</title>

<style type="text/css">

body {
width: 930px;
background-color: #000000;
margin: 1px auto 1px;
color: #EEEEEE;
font-family: verdana, arial, sans-serif;
}

.tabcat{ font-size: 12px; font-weight:bold; z-index:1; padding: 6px; background-color:#000000; border: 1px solid #EEEEEE;}

.proftext{position:relative; font-size: 12px; text-align:center; padding: 6px; background-color:#a11a11; border: 1px solid #EEEEEE; }

</style>

</head>
<body >

<table cellspacing="0" width=268 >

<tr><td class="tabcat" >1 Hour</td><td class="proftext" >test</td><td class="proftext" > &pound;test</td></tr>
<tr><td class="tabcat" >1&frac12; Hours</td><td class="proftext" >test</td><td class="proftext" > &pound;test</td></tr>
<tr><td class="tabcat" >Per extra hour</td><td class="proftext" >test</td><td class="proftext" > &pound;test</td></tr>
<tr><td class="tabcat" >Time 2</td><td class="proftext" >test</td><td class="proftext" > &pound;test</td></tr>
<tr><td class="tabcat" >Time 3</td><td class="proftext" >test</td><td class="proftext" > &pound;test</td></tr>
<tr><td class="tabcat" >Time 5</td><td class="proftext" >test</td><td class="proftext" > &pound;test</td></tr>

</table>

</body>

</html>

swa66




msg:3920503
 6:48 pm on May 26, 2009 (gmt 0)

That doctype is a funny one.

I'd try a few things:
- Get a doctype from: [w3.org...]

- the table: cellspacing, and width as attributes: I'd get rid of them and use CSS instead.

- why do you want the position: relative ? If it's for a legacy IE version, try a conditional comment and give it there only. If you really need to have the td gain position, maybe the choice of a table isn't the best anyway.

- z-index on cells in a table ... why ?

Note that tables have 2 border modes and have a conflict resolution in the standard (I'm not sure IE8 release does implement that one properly (all legacy IE versions failed (as well as IE8 beta if I remember correctly).

If you set it to collapse you get the effect of cellspacing="0".

Still this deserves more investigation, esp as it seems IE8 is potentially doing something "funny".

rsndll




msg:3920538
 7:55 pm on May 26, 2009 (gmt 0)

Thanks for the comments.
I tried changing the doctype and that made no difference.

However, I was also beginning to wonder why I had put the position:relative setting in. I think it might have been a desperate act when I was designing the site and trying to get the page to display properly! It wasn't needed so I've removed it, which has solved my problem.
Perhaps IE8 realises that positioning a table cell is rather silly and therefore inflicts some damage :)

jameshopkins




msg:3920632
 11:50 pm on May 26, 2009 (gmt 0)

> That doctype is a funny one.
>
> I'd try a few things:
> - Get a doctype from: [w3.org...]

Yes, the System Identifier you're using is incorrect for the Doctype you've declared. To correct this change 'http://www.w3.org/tr/html4.01/strict.dtd' to 'http://www.w3.org/TR/html4/strict.dtd'. Of course for all new documents you should use a Strict Doctype.

> Perhaps IE8 realises that positioning a table cell is rather silly and therefore inflicts some damage :)

"The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined" (http://www.w3.org/TR/CSS21/visuren.html#choose-position)

Because of this ambiguity, it's not wise to use the property in this way as you'll get mixed results cross-browser. FYI, this issue should be addressed in CSS3 Tables.

I've created a reduced test case <link removed> which demonstrates this unspecified behaviour a little more clearly.

[edited by: swa66 at 2:18 am (utc) on May 27, 2009]
[edit reason] No links to personal pages please see ToS and forum charter [/edit]

jameshopkins




msg:3920992
 4:07 pm on May 27, 2009 (gmt 0)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Effect of 'position:relative' on TD elements - 'border's</title>

<style type="text/css">

td{
border: 60px solid lime;
background:red;
position:relative;
}

</style>

</head>
<body>

<h1>Effect of <code>position:relative</code> on TD elements - <code>border</code>s</h1>

<p>The box below should almost certainly be lime-green.</p>

<p>With respect to IE8, there is currently no reason why the <code>border-style</code> and <code>border-width</code> values should be applied, whilst <code>border-color</code> is ignored and any <code>background-color</code> be rendered on top of it.</p>

<table cellspacing="0" cellpadding="0">
<tr><td></tr>
</table>

</body>

</html>

James_Close




msg:3947544
 9:20 am on Jul 7, 2009 (gmt 0)

I had this exact issue with IE8, it appears the background overlaps the border when the table cell is positioned "relative". Workaround: use the CSS outline instead (which lies outside of the border). In the example page above change the css to:

td {
outline: 60px solid lime;
background:red;
position:relative;
}

Although position relative is undefined for table cells it is sometimes useful, e.g when you want to emphasize a cell on roll over or the like.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved