IE7 vs. Firefox 3.0.8

Why does it work in IE7 but not in Firefox

[overbanksparen]

I am new with CSS and for some reason my website <snip> looks fine in IE7, but the layout gets messed up in Firefox. I looks like its a problem with the CSS text.

Any help would be greatly appriciated.

[edited by: swa66 at 5:21 pm (utc) on April 15, 2009]
[edit reason] No personal URLs please see ToS and form charter [/edit]

[overbanksparen]

My CSS is as followed:

#wrap{
font-family: Verdana;
width:800px;
margin: 0px auto;
padding-top: 0px;
background-color: #FFFFFF
}

#menu1{
font-family: Verdana;
float:left;
width:146x;
height:307px;
padding-top: 3px;
font-size: 8pt;
{text-align: right}
a { text-decoration:none }

}

#top{
font-family: Verdana;
height:311px;
width:800px;
padding:0px;
}

#blocks{
font-family: Verdana;
font-size: 10pt;
float:left;
width:198px;
height:50px;
padding:0px;
background-color: #008000;
border:1px solid #FFFFFF;
padding-top: 4px;
color: #ffffff;
{text-align: center}
a { text-decoration:none }
A.set1:link {color: #FFFFFF; }
A.set1:active {color: #FFFFFF; }
A.set1:visited {color: #FFFFFF; }
A.set1:visited {color: #FFFFFF; }

#main{
font-family: Verdana;
width:800px;
padding: 10px;
padding-bottom: 100px;
}

#waiv{
font-family: Verdana;
font-size: 7pt;
margin: 0px auto;
border:1px solid #008000;
width:600px;
padding: 10px;
{text-align: center}

#footer{
font-size: 8pt;
font-family: Verdana;
float:left;
border-top:2px solid #008000;
width:800px;
height:25px;

}

.p1 {
font-family: Verdana;
margin-left:0px;
margin-right:0px;}

.p2 {
font-family: Verdana;
font-size: 11pt;
margin-left:10px;
margin-right:0px;}

.p3 {
font-family: Verdana;
font-size: 10pt;
margin-left:10px;
margin-right:20px;
}

h1 { text-align: center; color: red; }

body {background-color: #dcdcdc}

[swa66]

First off: whenever a legacy Ie version disagrees with Firefox or any of the other standards compliant browsers, it's 99.99% chance one of many bugs and/or features in IE.
So, even if IE accidentally does what you want, you code isn't telling browsers what you want to happen.

Reverse the tables: code in Firefox, and fix problems in IE in conditional comments, at least your code will say what you want to happen.

Next fix the syntax errors in the CSS:

#menu1{
font-family: Verdana;
float:left;
width:146x;
height:307px;
padding-top: 3px;
font-size: 8pt;
{text-align: right}
a { text-decoration:none }

}

is gibberish : I think you meant to say:

#menu1{
  font-family: Verdana;
  float:left;
  width:146x;
  height:307px;
  padding-top: 3px;
  font-size: 8pt;
  text-align: right;
}
a { 
  text-decoration:none;
} 

On that note: validate your code (both html and css), having browsers having to guess what you wrote isn't going to be easy.

font families really ought to be a list terminated by a generic font (e.g. sans-serif), and you can use the casecade or inheritance to set it.

e.g.

body {
  font-family: verdana, "gill sans", arial, helvetica, sans-serif;
}
h1, h2, h3, h4 ,h5 , h6 {
  font-family: times, "times new roman", serif;
}

and remove all other font-families.

So: given your code, what's firefox doing that you didn't think you were telling it to do ?