Topic: Oh, for the love of ...

Forgive my terseness; I'm exhausted and frustrated at this idiotic problem ...

I've been hired to help recreate an existing site for which we can't get the original code. Someone else is handling the backend and I'm handling the layout. (I can, of course, look at their HTML/CSS, but it is an absolute mess, so I'm recreating the look with compliant markup.)

Anyway, I'm trying to get this blasted gold border around this table and it just ain't happening in Firefox. Here's how it looks in IE and how it's supposed to look:



I've read up on box-model weirdness, I've jacked with padding, margins, nesting, etc., I've checked W3C standards on which border styles override which others, I've tried hidden borders, background colors, divs, I've ... ugh ... I've done so much I can't remember it all.

You can see the most basic version of the markup here, which looks like the above in IE, and looks like this in FF:



My various tweaks and alternate approaches have all ended up with some variation of this, with some part of the border hidden or with too much space in one place or another.

If you can make it look correct cross-browser, I will love you.

Please Note:

1. There is a 1-pixel black separation between the table and the gold border. Again, this is a site I have been requested to duplicate so this is what I need to make happen, if at all possible.

2. Their original markup was a nested table, which didn't work in FF either.

3. Before suggesting a solution, I humbly ask that you try it first. You might be surprised what doesn't work.

Thank you for playing!



(Edited by Wes on 03-02-2005 06:59)

While I cannot try it just now because I am at work, I have one suggestion that may be helpful:

remove the border-collapse:collapse; from the table element, and apply it to the th/td elements directly.

if that doesn't fix your problem, it may still help with the solution.

I got it to work. You can see it here

I got rid of the border collapse, set the border-spacing of the table to 1px and got rid of the td borders. However IE doesn't support the border-spacing for css, so I added cellspacing="1" to the table tag. It still validates as xhtml 1.0 strict.

oof! I had no idea that attribute was valid with that doctype, sweet, yet, not.

Yeah, wasn't thrilled about using it, but without it, I couldn't get it to work without adding a left and right column classes to the td's. There's probably a better way, this was just the first way I could get it to work so figured I'd throw it out there.

ok, apparently misinterpreted things earlier.

I got this - http://www.in-dented.com/temp/wes.html

seems pretty much like what you've got for IE above.

Cut out the <div> entirely, and saved you a few bytes on the CSS as well (and no messy mark-up).

checked in FF and IE 6 only.



(Edited by DL-44 on 03-03-2005 01:49)

that was my solution too DL, but I couldn't get single px spacing

save a few more bytes "font-weight:bold;" is default for th already

Ah, so I'm not a complete idiot; it is indeed a puzzle.

Looks like cellspacing="1" might be the only true solution, though I hate to use that. I'd use yours, DL, which would be close enough, but some of the tables get extensive, and within the rest of the design, the 2-pixel black borders start to look chunky.

As for th, JK, I never trust browser defaults -- I like to define everything explicitly. I even set ...

strong { font-weight: bold; }
em { font-style: italic }

... so I know what it will end up like.

ah, yes.

well, with the div back in, there is this - http://in-dented.com/temp/wes.html (updated file)

works perfect in FF, slightly more space between the gold border and the table in IE. If that extra space is too much...then I'm out of ideas. It is definately odd how many things don't work that should...

I agree on the default issue. It's the default on current browsers at the moment...but that doesn't mean anything in the long run.

Okay, getting back to this ...

Yeah, I believe that's the closest pure-CSS solution I had come up with. What I never could figure out exactly is why in FF there's an extra 1-pixel gap only at the bottom.

Anyway, thanks for all the help!

Hey, maybe I'll just make all the tables out of big GIFs!



(Edited by Wes on 03-09-2005 19:31)