SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Michigan
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margin Issues in NS vs. IE

    Hey All,

    I'm have a problem with margins acting differently in NS 7 vs. IE 6. I've tried to track down the cause of the problem, but haven't been able to figure it out. Here's the link to the page:

    www.witchkraftracing.com/xml/secondarytest.asp

    As you can see, the margins around the row under "nav" aren't consistent between the two browsers.

    Any suggestions?

    Thanks.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ie has a bug on floats when using margins. It affects the left margin that is closer to the windows edge (or elements edge) and the nearest float has its left margin almost doubled. The figure isn't exactly double so you have to twaek it to get it exact.

    The same thing happens on the right margin in the similar situatuon when the right edge is next to the window (or elements) edge. (Note that subsequent floats aren't affected its only the outer floats.)

    The solution is to provide ie with alternative measurements to cope or find some other way to offset the element (if possible).

    The hack for your site should go like this.
    Code:
    #thirdRow {
    width:740px;
    height:125px;
    float:left;
    /*margin:10px 0px 0px 5px;*/
    margin:10px;
    padding:0px;
    /*border:1px solid #000;*/
    }
    * html #thirdRow {margin-left:5px;margin-right:5px;} 
    We use the star selector hack to hide the margins from other browsers.

    This should even up the display.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Michigan
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    That worked. However, that was just a part of the page. I thought by breaking it down, I could isolate the problem.

    Now with the full page (http://www.witchkraftracing.com/xml/secondary.asp), that fix doesn't work.

    I'm trying to see if I can add that code on another class, but haven't had any luck thus far.

    This should still work shouldn't it?

    Thanks again.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This should still work shouldn't it?
    Yes it will work but you need to take into account all the elements that are left most and the ones that are right most and adjust the margins as in my example.

    I noticed in the first example you commented this line out (/*margin:10px 0px 0px 5px;*/) and used margin 10px but however in the latest link you have put that line back in so now the right margin is only 5px. You will need to account for the 5px now and not 10px.
    (e.g. * html #thirdRow {margin-left:2px;margin-right:5px;} ) or put the 10px back in if that's what it's supposed to be.

    Go through your code and check a ll the left and right margins on the outmost elements and use the hack etc. Make sure your elements all add up and have enough room as well. You may need to add a litlle more breathing space for ie as it does add some padding around floats.

    The way I'd go about is to take all the margins out and make sure everything is the same size in both browers first. Once you've checked that the you can start putting the margins in one at a time and see the result.

    (I'm in a bit of a rush or I'd do it for you.) If you're still stuck I'll have a look later.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Michigan
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I think I have it working:

    www.witchkraftracing.com/xml/secondary.asp

    The only thing that frustrates me about this, is that now I'm basically "coding for netscape", and then hacking it for IE. I usually do it the other way around. At least that way, I'm coding for the "majority" and hacking for the minority in a sense.

    In the end, I guess it doesn't matter. It's just a less peaceful state of mind.

    Is there anything else I should be concerned about when testing this in other browsers?

    Thanks again for the help.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It looks good to me. Opera7 looks ok as well.

    and then hacking it for IE
    The way I look at it is that if you code it correctly (according to specs) then all the browsers that comply get it correct. If you just code for ie then all other browsers may get something different.

    You have to take into account ie5 and 5.5. broken box model anyway, so if ie gets it wrong then the hack goes to ie. If mozilla has a bug then give the hack to mozilla. Seems fair to me

    Margins and padding are a little bit of a grey area as most browers have different sizes for their default margins/padding anyway. Some of the browsers use padding for the default (as opera does on the body and mozilla does on lists) and others use margins.

    I usually try to avoid putting padding and margins on until I know the elements displays correctly and then introduce them and check the display. (Or set paddings and margins to zero and then check etc.) .It's one of those things that if you check in different browsers as you go you notice the discrepancies before you build on them.

    Paul


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
  •