Has anybody ever had an issue with borders displaying differently?

[socialdbob]

Depending whether I'm viewing a page in internet explorer or firefox the borders will display on the inside edge of a div versus the outside edge.

Is there any type of fix for this to make it consistent cross browser?

Its only a 1 pixel difference but when you need to align an image butting up against the border it can be very annoying.

[Rayzur]

the borders will display on the inside edge of a div versus the outside edge.

It sounds like a div alignment issue rather than a border issue, it may be that the border is what makes you aware of it.

Have you got your reset in at the top of your stylesheet.

* {margin:0; padding:0;}

Which version of IE are you using? I've had to give IE6 specific rules to make a div 1px less than other browsers before,

[socialdbob]

It sounds like a div alignment issue rather than a border issue, it may be that the border is what makes you aware of it.

Have you got your reset in at the top of your stylesheet.

* {margin:0; padding:0;}

Which version of IE are you using? I've had to give IE6 specific rules to make a div 1px less than other browsers before,

I guess I should have mentioned the first thing I always do is reset the margins and padding when coding a new page.

How would you give ie specific rules? Separate style sheets?

I'm going to write an example of how someone might encounter this problem (disregard if this is good practice or not):

Say I have a div#box that I wanted to have rounded corners with gray borders. Therefore I want the entire top of the div to be capped off with an image. The div I'm capping off is 300px wide and therefore so is the image.

If I were to set border-right and border-left on div#box so that the border continues past the edges of the image capping it off... in ie6 the div borders would be one pixel wider on each side (hence outline lays on the outside of the div) compared to firefox - which would display it ok because the outline lays on the inside of the div.

Does that make sense?

[Rayzur]

Does that make sense?

Yes it makes sense and I understand the example. I forget the name of the bug, or rendering problem.

But this should fix it without another stylesheet, use the * html hack

Example

#container {width:300px}

* html #container {width:298px;} /*---for ie6 only---*/

Just place that fix right under the div in question in your stylesheet and see if it works out for you.

[Rayzur]

I may of gone the wrong way with the width, maybe it should be 302 rather than 298.

Here is a snippet of code from one of Paul's demos

#outer{
min-height:100%;
width:766px;
}

* html #outer{
height:100%;
width:768px;/* box model hack for ie5.+*/
w\idth:766px
}

[socialdbob]

I'll have to try this and let you know if it fixes my problems.

Thanks for the help!

[Paul O'B]

HI,

Just use a valid doctype and you won't have these box model issues in IE6 (IE5.x still uses the broken box model so you would still have to hack it if you wanted to support it).

However you should not be running IE6 (or 7) in quirks mode or you lose all the benefits of the newer browser and it ends up being more like ie5.x

See the FAQ on the broken box model if you haven't heard of this or read the entry I wrote here.