Grow your CSS skills. Land your dream job.

Spacing/Floating Different on Firefox than Safari

  • # December 10, 2009 at 10:30 am

    I’m a slight newbie to CSS. I recently completed an intermediate course and with the help of a floating tutorial I was able to get my design to line up the same way as my mock up. ( Horizontal 3 image based navbar) …

    The design lines up perfectly with proper spacing when viewed in Safari but when i test it out in Firefox the middle image pushes really close to the image on the right side. It’s not touching, but it’s really close. I mean there’s still space between the images and i can almost ignore it, but the Safari version looks 100% better and exactly like my mock up.

    What could it be that makes the design look like this : ____ ____ ____ in safari but like this: ____ ____ ____ in fire fox.

    I can’t get it online right now so that’s the best example I can provide. Sorry.

    This is my mock up: http://twitpic.com/isf0a this is also how the design appears in Safari… the difference is that space ship is pushing over in the negative space to the right and a lot closer to the cartoon character head.

    # December 10, 2009 at 10:37 am

    Can you post some css/html code?

    Do you have any margins or padding around your images?

    # December 10, 2009 at 11:21 am

    Sure, but I’ll have to wait until I get home. i’m at work right now….

    # December 10, 2009 at 7:26 pm

    Below is my CSS for the entire page

    Code:
    /* Universal style rule */
    *{
    /* Block all browser default margins and padding */
    margin:0;
    padding:0;
    /* Temporary borders */
    order:dashed 1px #f00;
    }

    #wrapper{
    width: 55em;
    background-color: #FFFFFF;;
    /* Center the wrapper */
    margin: 0px auto 0 auto;

    }

    #branding{
    background-color: #FFFFFF;

    }

    #branding img{
    background-color: #FFFFFF;
    width: 90% ;
    float:

    }

    body{
    background: ;
    font-family:Arial, Helvetica, sans-serif;

    }

    /************* MAIN division styles ****************/

    #col1, #col2, #col3{

    float: left;
    width: 190px;
    margin-right: 4.5em;
    position: relative;
    padding: 1.5px;

    }

    #col1{
    padding-left: 2.0em;
    }

    #col2{
    padding-right:0.5em;
    margin-left: 0 em;
    }

    #col3{
    margin-right: 0em;
    float: right;
    position: relative;
    padding-top: 2.5em;
    padding-left:0.5em;
    }

    #navigation{

    position: relative;
    width: 100%;
    margin: auto;
    float:left;
    padding-bottom:4.0em;
    }

    #lum1, #lum2{
    float: left;
    margin: 0 2.3em 0 2.3em;
    }

    #lum2{
    padding-left: 0.42em;

    }

    #lum3{
    float: right;
    margin: 0 2.3em 0 2.3em;
    padding-bottom: 0.5em;
    }

    #footer{
    color: #FFFFFF;
    background-color:#000000;
    border-top:thin dashed;
    margin-top: 3em;
    background-color:;
    text-align: center;
    clear: both;
    font-size: 9.5px;

    }

    and my html for the body section

    Code:

    portfolio
    contact
    About

    # December 11, 2009 at 9:59 am

    Interestingly, I played with the code and fixed the problem, But now the spacing is way too big in Safari and it looks normal in Firefox. WTH ?

    All I did was change my wrappers width, to 45em, that way the float would be able to breathe more.

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

You must be logged in to reply to this topic.

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