SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    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.

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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,

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    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?

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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
    }

  6. #6
    SitePoint Enthusiast
    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!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,523
    Mentioned
    182 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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •