SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Jul 28, 2008, 20:27 #1
- Join Date
- Nov 2006
- Posts
- 35
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Has anybody ever had an issue with borders displaying differently?
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.
-
Jul 28, 2008, 20:48 #2the borders will display on the inside edge of a div versus the outside edge.
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,Ray H.- css-lab.com
W3C Specs - CSS 2.1 | CSS current work | Properties Index
-
Jul 28, 2008, 21:10 #3
- Join Date
- Nov 2006
- Posts
- 35
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Jul 28, 2008, 21:40 #4Does that make sense?
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.Ray H.- css-lab.com
W3C Specs - CSS 2.1 | CSS current work | Properties Index
-
Jul 28, 2008, 21:51 #5
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
}Ray H.- css-lab.com
W3C Specs - CSS 2.1 | CSS current work | Properties Index
-
Jul 29, 2008, 12:35 #6
- Join Date
- Nov 2006
- Posts
- 35
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'll have to try this and let you know if it fixes my problems.
Thanks for the help!
-
Jul 29, 2008, 12:46 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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.
Bookmarks