Same CSS, different look in firefox, new to CSS

CSS in IE vrs Mozilla

[Jax2]

Hi guys and gals,

Not sure what all you need information wise, but I am having an issue. I have a nice 3 column css style I like a lot and I am using it on 2 of my websites. In I.E., everything looks great, just how it's supposed to, but in firefox, it's messed up pretty bad.

In I.E., the top logo is where it should be. The navigation bar is below the logo, and further down you can see the 3 columns. In firefox, the logo is where it should be, but the navigation bar is on the same line, as is some of the items that are supposed to be below both the logo and nav bar, which is screwing up the whole page.

The CSS style I am using was given to me years ago, and it's been perfect, but now with firefox being one of the top browsers, and the layout not working in firefox, I'm kind of stuck.

I can paste the part of my css here I think the problem is in, if someone could explain to me why it's not working (I believe it's something to do with "float" but as I said I'm new to css), I would really appreciate it.

Also, the problem, I believe, is in the #sitename and #siteimage ... just need to figure out how to make it all line up in Firefox... THANKS!

/***********************************************/
/* Layout Divs  */
/***********************************************/
#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
#navBar{
float: left;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
#headlines{
 float:right;
width: 20%;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding-right: 10px;
}
#content{
float: left;
 width: 55%;
}
/***********************************************/
/* Components  */
/***********************************************/
#siteName{
margin: 10;
padding: 0 0 0 2px;
float: center;
}
#siteName img{
float: left;
padding: 10px 10px 0px 0px;
}
/************* #globalNav styles **************/
#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: 1px solid #CCC;
color: #cccccc;
}
#globalNav img{
 display: block;
}
#globalNav a {
font-size: 90%;
padding: 0 4px 0 0;
}

[edited by: Jax2 at 3:18 pm (utc) on Sep. 22, 2008]

[edited by: engine at 3:28 pm (utc) on Sep. 22, 2008]
[edit reason] no specific sites, thanks [/edit]

[swa66]

First off: while it might look like you want it to look in IE, when IE and standard compliant browsers such as Firefox render it differently, it's quasi never IE that got it right.

IE is very buggy when it comes to CSS.

Still fixing it for firefox (and safari, opera, ...) will most likely throw IE off once again, so you need a substantially better solution:

• develop it in any browser but IE, don't even look at it in IE, it'll set you on the wrong foot.
  
• Verify it works as intended in the other standards compliant browsers. Fix any issues you might find (few if any, but they might reveal some "gray" area your CSS pressed on). Your main CSS is now "done".
  
• Add conditional comments to work around the bugs and "features" of each individual version of IE (they don't always share their bugs) by using conditional comments to add CSS that changes the standard stuff you already had.
  Since these are comments for all other browsers, they won't have any impact on the standard compliant browsers.
  

While IE will make you loose a lot of time it's still faster to do it this way than any other way, esp. when looking at long term maintainability.

As for finding issues, could you add some html to go along with it, and/or describe what the difference is in a bit more detail?

But "float:center" isn't valid CSS.

[w3.org...] only allows left or right.

[SuzyUK]

Hi Jax2 & Welcome to WebmasterWorld!

The CSS style I am using was given to me years ago..

in that case ;) THE most vital bit of information when comparing IE to others is:

What's Your Doctype [webmasterworld.com] - start that post, read encyclos one too (linked from that thread) and then try the first few troubleshooting steps in the guide pinned at the top of the forum

Ooops forgot my manners!

[edited by: SuzyUK at 7:19 pm (utc) on Sep. 28, 2008]