Grow your CSS skills. Land your dream job.

IE is not my friend :( Adding extra margins to DIVs

  • # March 17, 2009 at 7:57 am

    ssssssssss

    # March 17, 2009 at 8:03 am

    an image to illustrate…

    # March 17, 2009 at 8:22 am

    A link would be helpful.

    Otherwise just create a stylesheet targeting IE and reduce the margins in that.

    If you are embeding Flash in your pages you should really be usiing swfobject http://code.google.com/p/swfobject/

    Rob
    # March 17, 2009 at 10:40 am

    I will keep saying it lol I might make a macro actually…

    You need to use "position" to position block elements and not margin/padding.

    for example, within positioning :

    margin-top:20px;
    margin-left:20px;

    should be:

    position:absolute/relative; /*absolute is a better option */
    top:20px;
    left:20px;

    IE decides its going to make up its own rules in regaurds to margin and padding, that is why people see such a shift in their designs when position is not used

    # March 19, 2009 at 6:16 am

    Hi guys, thanks for the replies.

    Reducing the margins doesn’t seem to help the problem in IE. Is it because I have more than one flash element on the page? Without these elements, all the DIVs align perfectly, but as soon as a second SWF is embedded (either with adobe or SWFObject) the divs move out of position :(

    Its very frustrating! Any further thoughts or ideas guys?

    # March 19, 2009 at 7:08 am

    Like I said, a link would be a great help.

    Have you tried Robski’s absolute positioning?

    You could try changing the margins to padding instead.

    # March 19, 2009 at 6:44 pm

    Would Would something like this not solve the problem if put at the start of the stylesheet?

    Code:
    * { margin:0; padding:0; }
    # March 20, 2009 at 7:19 am
    "markmarkyeahyeah" wrote:
    I’ve looked in to using a reset CSS, but that doesn’t seem to help :(

    Obviously not.

    # March 26, 2009 at 3:15 pm

    There’s a bug in IE6 that causes it to double the margins on floated elements. So if you have this:

    Code:
    div {
    float: left;
    margin-left: 20px;
    }

    IE will actually assign "margin-left: 40px" to the div. Unbelievable, right?

    The fix is equally as ridiculous (although easy). Just add "display: inline":

    Code:
    div {
    display: inline;
    float: left;
    margin-left: 20px;
    }

    "Display: inline" actually doesn’t even do anything, because floating something automatically makes it block-level. But, for whatever messed up reason, it fixes the margin doubling in IE! So there you go.

    # March 27, 2009 at 9:06 am

    Are you using a Reset.css?

    Once I started using Eric Meyer’s Reset Reloaded, it drastically cut down on browser inconsistencies.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".