Mozilla has been giving me nothing but headaches when it comes to CSS. It's like whatever CSS styles I apply to HTML (and they're pretty basic), Mozilla pretty much just ignores them and does its own thing.
I designed this site around how it looks in IE, which really isn't a problem because half the CSS styles I apply to it are working exaclty how they should. I view the site in Mozilla.. and it's like amazing at how f'd up it is. The icing on the cake: I ran the CSS through the w3c.org validator and everything checked out perfectly!
Normally this is the type of crap you get with IE and I'm VERY surprised at this.
For example (shown in the code block below), "display: inline;" doesn't work properly. To get divs to line themselves up horizontally, you need to change it to "display: block; float: left;"
There's a laundry list of other things I've noticed that it just does NOT conform to (I don't have them readily available on this computer or I'd post them).
Are these actual bugs or is there a bit of CSS tricking Mozilla into overriding some of these settings? Does anyone else experience these problems?
I tried a Google search on Mozilla & CSS bugs, but I get nothing but a bunch of sites comparing IE and Mozilla and summarizing it with: "Once again, Mozilla comes out on top!"
Here's sample code to show what I'm talking about regarding the display: inline not working:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
body{
font-family: Arial;
font-size: 11px;
background-color: #eeeeee;
margin: 0px;
}
.Title
{
text-align: center;
font-weight: bold;
border-top: solid 1px #888899;
border-right: solid 1px #000000;
border-bottom: solid 1px #000000;
border-left: solid 1px #888899;
background-color: #555566;
color: #ffffff;
}
#BrowserSummary
{
/*display: block;
float: left;*/
display: inline;
width: 250px;
padding: 0px;
margin-top: 10px;
margin-right: 10px;
vertical-align: top;
border: solid 1px #333333;
}
#BrowserSummary div
{
padding: 5px;
border-bottom: solid 1px #cccccc;
}
#BrowserSummary .Browser
{
float: left;
width: 120px;
border-right: dotted 1px #cccccc
}
.VisitorP, .VisitorT
{
background-color: #dddddd;
}
.VisitorP
{
float: left;
width: 60px;
text-align: right;
border-right: dotted 1px #cccccc
}
.VisitorT
{
width: auto;
text-align: right;
}
</style>
</head>
<body>
<div id="BrowserSummary">
<div class="Title">Browsers</div>
<div class="Browser">IE 6.0</div>
<div class="VisitorP">62.07 %</div>
<div class="VisitorT">36</div>
<div class="Browser">Netscape 5.0</div>
<div class="VisitorP">37.93 %</div>
<div class="VisitorT">22</div>
</div>
<div id="BrowserSummary">
<div class="Title">Browsers</div>
<div class="Browser">IE 6.0</div>
<div class="VisitorP">62.07 %</div>
<div class="VisitorT">36</div>
<div class="Browser">Netscape 5.0</div>
<div class="VisitorP">37.93 %</div>
<div class="VisitorT">22</div>
</div>
</body>
</html>