Spacing/Floating Different on Firefox than Safari

[csanders984]

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.

[JaredAM]

Can you post some css/html code?

Do you have any margins or padding around your images?

[csanders984]

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

[csanders984]

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:

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

[csanders984]

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.

[Author]

Posts