Grow your CSS skills. Land your dream job.

Positioning: Mysterious SPACING DIFFERENCE in FIREFOX/SAFARI

  • # December 15, 2009 at 11:36 pm

    Okay This will be my 3rd request for help. I hope someone actually responds this time. i was able to fix my last two problems by deconstructing my code but now this new issue doesn’t seem to be helped by that. I marked up the design to make it easy to help.

    My design seems to space differently depending on which browser I preview it in(Firefox and Safari).

    In Firefoxit looks like this:

    [img]http://img.photobucket.com/albums/v26/csanders/Picture34.png[/img]

    In Safari it looks like this:

    [img]http://img.photobucket.com/albums/v26/csanders/Picture33.png[/img]

    SAFARI=BAD FF=GOOD

    I’d like the design to look like the firefox version. I can’t figure out what in my code is creating that giant space to the right of the navigation bar in the Safari design. I’ve read over my code and modified it a million times and I can’t get rid of that giant space and I don’t know how to make it disappear. I want the navbar up against the edge of the wall, like in the firefox version.

    Aside from fixing the problem, I’d like to know, whats creating it ? PLEASE HELP.

    Below is my code:

    CSS

    Code:
    /* layoutstyles.css */

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

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

    }

    #branding{
    background-color: #FFFFFF;

    }

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

    }

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

    #col1, #col2, #col3{
    text-align: center;
    padding: 8px;
    position: relative;
    float: left;

    }

    #navigation{
    position: relative;
    top: -150px;
    left: 550px;
    background-color:#00FFFF;
    width: 300px;
    }

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

    }

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

    }

    HTML

    Code:

    # December 16, 2009 at 10:01 am

    Humm, maybe try using a fixed width for your logo instead of 50%.

    # December 16, 2009 at 10:26 am
    "JaredAM" wrote:
    Humm, maybe try using a fixed width for your logo instead of 50%.

    Dumb question, but whats a fixed width ? Do you mean resizing it in photoshop ?

    Also I tried setting the logo to 100% but the gap to the right side still exists in Safari.

    # December 16, 2009 at 11:42 am

    I noticed your footer has a fixed width, and yet your main content (and wrapper) is using em’s. Is this intentional? Why don’t you just make the entire site fixed width?

    # December 16, 2009 at 11:45 am
    "csanders984" wrote:
    Dumb question, but whats a fixed width ? Do you mean resizing it in photoshop ?

    I mean instead of css being width=100%, try width=150px (or however wide your image is).

    # December 16, 2009 at 12:51 pm
    "TheDoc" wrote:
    I noticed your footer has a fixed width, and yet your main content (and wrapper) is using em’s. Is this intentional? Why don’t you just make the entire site fixed width?

    No. I’m just new to web design, I’m coming over from schooling in print.

    # December 16, 2009 at 12:54 pm

    If you’re new to CSS, working in fixed widths is definitely the way to go. Much easier to understand what is happening and why.

    So, instead of a width of 50em on your wrapper, try something like 900px.

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

You must be logged in to reply to this topic.

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