SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: Margin Enigma?

  1. #1
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margin Enigma?

    I'm working on a new design located at www.bluevolume.com/cst. You can view that at www.bluevolume.com/cst/style.css and at the top of the index page (specific styles for that page). Well if you look at the page in IE6 and Firebird, you'll notice that the margin to the right of the "this week" box changes. I designed it to work as i wanted it to in IE6 because that is how my client will be viewing it, but I don't understand why it changes. My intention was to make everything have a 10px margin around it. For example; the top, bottom, right, and left of the "this week" box, the picture, the nav bar, and the title, should all have a 10px margin seperating them from the other objects(the space between object would only be 10px, not 20).

    I'v tried many different combinations, but none seem to work properly in both browsers. Can someone please play around with it a bit and see if you can solve the the margin puzzle?

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

    Theres a bug in IE where a float sits next to a windows edge. The margin on the side closest to the window seems to get almost doubled.

    The only solution I've found is to hack it and give IE a different margin. Add this line after the original style.
    e.g.
    Code:
    * html #thisweek {margin-right:2px}
    Only IE will get the above margin. Adjust it to suit.

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Theres a bug in IE where a float sits next to a windows edge. The margin on the side closest to the window seems to get almost doubled.

    The only solution I've found is to hack it and give IE a different margin. Add this line after the original style.
    e.g.
    Code:
    * html #thisweek {margin-right:2px}
    Only IE will get the above margin. Adjust it to suit.

    Paul
    Thanks. What exactly does the "* html" do? makes it IE only?

  4. #4
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After adding the line and uploading that page, the margin was fixed, but the space between the pic and the "this week" box is still different between IE and Firebird. In Firebird, the space is 9px (i can fix that by taking 1px off the pic), but the space on IE is only 4px even though the margins on the other sides of the objects are both 10px...The other problem is that the margin under the "this week" box is 12px for some reason and nothing I change will change it. Any ideas?

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

    What exactly does the "* html" do? makes it IE only?
    IE incorrectly parses it when it shouldn't make sense.
    See here for an explanation:
    http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

    In your page you only need this to make it even as far as I can see.
    Code:
    * html #thisweek {margin: 0 3px 0 0;}
    It looks exactly the same on my ie6 and firebird.

    Paul

  6. #6
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    It looks exactly the same on my ie6 and firebird.
    I've edited a screen shot to illustrate the problem in IE (so it's a screen shot of the site in IE). www.bluevolume.com/cst/ss.gif

    I know its hard to make things pixel perfect, but I just want to know where i'm going wrong in the code.

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

    Have you changed the style as I suggested because my ie6 is showing the 10px gap between the image and the events.

    It's not been changed online yet so I can't tell what's wrong.

    Paul

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Also don't forget that mozilla and IE quite often have different default settings for different elements, so you may have to explicitly set them all to be sure.

    I'm too tired to look anymore tonight I'll have another look tomorrow if you haven't sorted it by then.

    Paul

  9. #9
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Have you changed the style as I suggested because my ie6 is showing the 10px gap between the image and the events.

    It's not been changed online yet so I can't tell what's wrong.

    Paul
    I have changed the code to tweak what you first suggested. I double checked, and the screen shot is definatly of the newly uploaded one on IE6, mabye you need to refresh or clear you cache .

    In the ss it showed that with the new code the right side is fixed, but the left and bottom of the "this weeK' box are not correct, or not the same as correctly displayed by Firebird.
    Edit:

    I just measured the width of the "this week" box in photoshop and it's 380px, when it's clearly set to be 375px....That's probably why it has 5px less than it should on the 10px margin. But I still can't figure out why it's doing this or how to fix it.

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

    I've checked your style online and it's still not changed. This is taken from your site.
    Code:
    * html #thisweek {margin: 10px 5px 2px 0;}
    It should be
    Code:
    * html #thisweek {margin: 0 3px 0 0;}
    Paul

  11. #11
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    I've checked your style online and it's still not changed. This is taken from your site.
    Code:
    * html #thisweek {margin: 10px 5px 2px 0;}
    It should be
    Code:
    * html #thisweek {margin: 0 3px 0 0;}
    Paul
    I apologize, I think we were both talking about 2 different things. I have tried "* html #thisweek {margin: 0 3px 0 0;}" before, but it does not work for what I need it to do for the following reasons; First, the top margin must be 10px as shown above because I want a 10px seperation between the box and the nav bar. This margin is fine. The right margin as you said doubles. By setting it to 3px, it does even out, meaning that both the right side and left become 6px margins. My goal is to make them both 10px margins. Therefore I set it to a 5px right margin so it would double, and it works fine now, its just the left side that is not equal (it becomes 5px). I fixed and uploaded the problem with the bottom margin, that 2px did not need to be there. As I said in the edit above, when i measured the "this week" box, it had a 380px width in IE6 even though it is set to 175px. So I think the problem must be not in the margin of the box, but of some of the content inside. Maybe the box model hacks?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    but of some of the content inside
    I think you'll find that mozilla uses different default margins for certain elements so you may have to look into <p> and br and set them specifically if you want pixel precision.

    What you probably need to do although it will take some time is to deconstruct your page until both browsers display the same layout.

    Then you can add things in one at a time and fix them as you go. I think at the moment there are so many margins and padding that its hard to see which one is affecting the layout. ( I was half way through doing this for you and my computer decided to crash and I lost everything I'd done so I gave up )

    The right hand margin on the outer float is a bug that you now know how to fix so you can then work your way through.

    One thing to watch out for is the mozilla top margin bug where static positioned block elements will sometimes use the top margin of their first child element instead of their own. As an example the solution is to do something like: div > h1 {margin-top:0}.

    However I think the layout was pretty close right at the start when you just added:
    * html #thisweek {margin-right:2px}
    I wouldn't have noticed the other differences unless you pointed them out.

    Sorry I can't be more specific.

    (Now I've got to go and redo the php file I was working on when my computer crashed.Yes I know I should save more often )

    Paul

  13. #13
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your zealous efforts

    I think i'll deconstruct it at a later time just for the sake of knowledge b/c my client probably won't notice the difference.

    If anyone has a load of free time on their hands, feel free to help out deconstruct code!


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
  •