Previous Message
Next Message

double borders. A different story in IE?

Sent by Jon_Wickström on 2 April 2009 14:02


Hi,

I'm trying to style a horizontal menu with double borders on the active LI menu item. There is some
use of nested floating, as I want to use blocks for the LI to get them an even width. IE (7, haven't
even tried 6) just gets it plain wrong (from my point of view). The double border seems to work
differently in IE compared to all other browsers I've tried (FF, Opera, Chrome). IE renders the
"middle" line in a double border transparent. All other browsers use the elements bg-color. IE also
shows som strange stuff with the alignment. The borders overlap the parent elements borders. Some
kind of collapsing borders in IE?!?! Is this really the case or is my CSS/HTML just broken in IE?
One huch I have is that IE is using it's own box model, not the standard compliant? I vaguely
remember something about IE not including the borders inside the box.

The look I'm after is a "double border" with the inner border the same color as the parent bg, and
the outer the element bg. This I get in all sane browsers by specifying the parent bg as the border
color and the border style "double". This gives me a separated border with the element bg color. In
the example I use red, not the parent backgroundborder color, to see the border clearly.

The green border is just for your viewing pleasure. It is a div used for markup to center the menu.
If anybody has a cleaner centering-solution, I'd bee happy to look at it.

For a test-case see:
http://www.ekebodagis.fi/ekebo/test.html

Regards,
   Jon Wickström
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: