Forum Moderators: not2easy
I have created 2 DIVs:
One is going to contain a navigation-menu and has border-right: 1px solid blue;
the other one is going to contain a Headline for the page and has border-bottom: 1px solid blue;
Now I have positioned the two DIVs so that their borders overlap in exactly one point and form a seamless transition (in Firefox).
However, when I look at the same page with IE, the two lines are exactly one pixel apart.
It seems, Firefox appends the border to the DIV (extends it) whereas IE turns the outer pixels (that still belong to the div) into the border.
Do you know how I could get around this?
Thanx in advance,
toffi22
It seems, Firefox appends the border to the DIV (extends it) whereas IE turns the outer pixels (that still belong to the div) into the border.
If you are using IE6 without a valid doctype [w3.org] or an earlier version of IE, then this is exactly what's happening. It's the difference between the Standard and Quirks box model. The Standard box model adds padding and borders to the outside. The Quirks box model stuffs them inside of the div.
If the IE version you are concerned about it is IE6, you can solve this by adding a doctype to your page (see the link above). If it's an earlier version of IE, like IE5 or 5.x, you'll need to use a box model hack or workaround to get things uniform across browsers.
cEM
You have no idea just how long I've been looking for this..
THANK YOU! =)
