207322 - table border settings not respected (overwritten with td borders settings)

Status: RESOLVED INVALID

(Core :: Layout: Tables, defect)

Description

[Colin S]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3) Gecko/20030312
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3) Gecko/20030312

Scary, this -- it appears that Mozilla is wrong and Internet Explorer 6 is
right! (Apocalyptic!) *cough* Anyway. Onto the actual problem.
In the page at http://vogons.zetafleet.com/new/index.shtml (also
http://vogons.zetafleet.com/new/mockup-display.shtml), the outer table border is
not displayed correctly as 1px solid #000000; instead, it is being overwritten
by the internal td borders which are 1px solid #444466;, despite the !important
flag being set.

Reproducible: Always

Steps to Reproduce:
1. Go to site.
2. Compare in Internet Explorer.
3. Scream in terror!!

Actual Results:  
Borders were sometimes drawn as #444466 instead of #000000

Expected Results:  
The outer border of the table should have been drawn all as #000000.

All pages and CSS validated with W3C validator as XHTML 1.1 and CSS2-compliant.

(Direct link to style sheet: http://vogons.zetafleet.com/new/includes/base.css)

Comment 1

[Colin S]

Attachment: Snapshot of testcase with Mozilla

Comment 2

[Colin S]

Attachment: Snapshot of testcase with MSIE

Comment 3

[Madhur Bhatia]

I do not see any difference between the 2 snapshots u have attached above. Even
the urls seem to work identicallyon both browsers. 
This is winXP  I am checking on.

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

'!important' affects only the cascade, which can change the computed style on a
different element.  However, what's happening here is a conflict between the
computed border style on the table and the computed border style on the td.

Mozilla's behavior is correct, and this is a known bug in WinIE demonstrated by
the first testcase in http://dbaron.org/css/test/tborder1

The relevant section of the CSS spec is:
http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(And I also can't really see the difference in the screenshots, but I inferred
the problem you were describing from your description and from the CSS.  In the
future, please try to attach testcases that contain the minimum amount of HTML
and CSS needed to demonstrate the problem, and clearly describe, for example,
which border you're talking about (there are many shown in the testcase, and it
can require a good bit of looking at the testcase to figure out where the edges
of the table are).)

Comment 6

[Colin S]

Yeah, sorry about that. So, then, in the hopes of finding a nice web evangelist
out there, could anyone tell me how to go about fixing this short of putting
everything inside a container?