cross-browser CSS compatibility

  • wp 1.5

    for my rotating banner, i would like it to line up with another item on the page, but it is showing differently in IE and FF … in my stylesheet, i’m using:


    #rotate {
    background: url('/#####/rotate.php') no-repeat top;
    height: 69px;
    width: 500px;
    border: 0px none;
    margin-left: 223px;
    margin-top: 17px;
    }

    and in my header i’m using the following to call it:


    <div id="header">
    <div id="headerimg">
    <div id="rotate">
    </div>
    <div id="nav">
    <?php include("navbar.php"); ?>
    </div>
    </div>
    </div>

    in FF, it now lines up with this code, in IE it is a few pixels below …
    any ideas to make IE and FF show the same thing? …

Viewing 7 replies - 1 through 7 (of 7 total)

  • IE interprets margins and padding differently. It’s called the 3-pixel jog. You can find the solutions at https://www.positioniseverything.net.

    Thread Starter tjinh200

    (@tjinh200)

    so, according to this, i’d have to change the above code to:


    #rotate{
    float: left;
    width: 500px;
    }

    p {
    margin-left: 110px;
    }

    /* Hide from IE5-mac. Only IE-win sees this. */

    * html #rotate {
    margin-right: 223px;
    margin-top: 17px;
    }

    * html p {
    height: 1%;
    margin-left: 0;
    }

    /* End hide from IE5/mac */

    and it should work? … i still don’t see why though …

    No Lorelle. IE and FF interpret borders and padding differently. That is a failure to render the box model. The 3 px jog is caused by contigious floats.

    Thread Starter tjinh200

    (@tjinh200)

    what would you suggest then? …

    I would like to help really but I cant understand the Kubrick CSS.

    Thread Starter tjinh200

    (@tjinh200)

    i’m still unsure how to resolve this issue …

    Before you get started on this fancy header it is imperative to make sure that the stuff above it is sitting right. I do not look of that margin top. I would put in colored bgs and see what is closing where in both browsers. This might be a collapsing margins issue. You could add borders top and bottom to each div for test purposes but remember to increase the container height by 2px to compensate . That way you can test.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘cross-browser CSS compatibility’ is closed to new replies.