There comes a moment in a web designer's life where you need to display a table with tabular data on a public site, thus you have to style it to be friendly to the eye, but...
Let's say you have a table with heading. Style the first row (with the headings) with a background image aligned to the right. Give the first heading cell in that row also a background image aligned to the left.
By reasonable judging it would be obvious that the background applied to the row would slide right under the background of the first cell.
But only Firefox renders it as such.
IE 6.0, 5.5, 5.0, Opera 8 render it a bit differently: the cells of the styled row inherit the background of their parent, resulting in the first cell having only its background, and the other ones having the background of the row aligned to the right of their own content box.
Opera 7.23 and 6.04 behave differently on their own: the first cell having only its background, the other cells having inherited the parent's background but having it miss-positioned.
The CSS specs say that a background can be applied to any element. The HTML specs say that the TR element can have the class attribute, thus we can apply styles on it. Or am I getting this thing wrong?
Check out the test page.
Would anyone care to explain to me why is it as such? Is it a bug of the browsers or is IE rendering in the intended way?
Comments
at 10:17 on 12/Jul/2005
because you have the following code:
--- .t tr.header { background: url(img/th-r.png) no-repeat 100% 0%; } .t tr.header th.f { line-height: 38px; background: url(img/th-l.png) no-repeat 0% 0%; } .t tr.header th { } ---
you tell the machine to have every single thing in the t tr.header to have a th-r.png as background, it will have it..
only because the stie th.f is added, that wil appear differently, but IE doesn't delete the style-info when you have added this code
---t tr.header th {}---
What i'm trying to say is, that IE doesn't overrule a rule in CSS, only when it is given. An example:
--- tr { color: blue, border: 1px solid blue }
tr.a {color:red} --> the border is still blue
tr.b {border: 1px solid red} --> the color is still blue
tr.c {border: 0px; color: red} --> every rule is overruled, so the border is 0 and the color is red.
tr.d {} -->every thing deffined in tr-style is still intact (nothing changed)
That's the error in IE...
Sory for my English :P
at 23:12 on 09/Aug/2005
@Thomas: I don't think you got it right.
Ok, by this line, I tell the browser that the <tr> element should have a background.
.t tr.header {background: url(img/th-r.png) no-repeat 100% 0%;}
Then when I write the next thing, I tell the browser that the <th class="f"> should have a different background.
.t tr.header th.f {background: url(img/th-l.png) no-repeat 0% 0%;}
The by not defining anything to the other <th>s in the row, they should have nothing styled.
.t tr.header th { }
Instead IE is inheriting the background property of the header cell from the parent, the header row. That was my point.
What i'm trying to say is, that IE doesn't overrule a rule in CSS, only when it is given.
And besides you were trying to point out something different, the fact that css properties as the same when styling the same if you don't give them a value only for elements with different classes, like in your example. The issue in this bug was that the background property was inherited from the parent node to the child node.
at 14:48 on 01/Mar/2007
position: relative
after the background declaration on the tr brings Internet Explorer up to speed. It's just that pesky Safari that I can't get to play nice.
at 14:08 on 02/Jun/2005
Comment by Fang
.t {
background: url('th-r.png') no-repeat 100% 0%;
}