Forum Moderators: not2easy
{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">
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?
<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" > £test</td></tr>
<tr><td class="tabcat" >1½ Hours</td><td class="proftext" >test</td><td class="proftext" > £test</td></tr>
<tr><td class="tabcat" >Per extra hour</td><td class="proftext" >test</td><td class="proftext" > £test</td></tr>
<tr><td class="tabcat" >Time 2</td><td class="proftext" >test</td><td class="proftext" > £test</td></tr>
<tr><td class="tabcat" >Time 3</td><td class="proftext" >test</td><td class="proftext" > £test</td></tr>
<tr><td class="tabcat" >Time 5</td><td class="proftext" >test</td><td class="proftext" > £test</td></tr>
</table>
</body>
</html>
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".
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 :)
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]
<!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>
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.
