Positioning: Mysterious SPACING DIFFERENCE in FIREFOX/SAFARI

[csanders984]

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:

All images are the intellecutual property and creation of Christopher D. Sanders, Copyright 2010

[JaredAM]

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

[csanders984]

"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.

[TheDoc]

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?

[JaredAM]

"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).

[csanders984]

"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.

[TheDoc]

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.

[Author]

Posts