CSS - differences between firefox & IE

I'm hoping for some CSS advise if anyone can help. Here is the URL i'm working on - view both in firefox and IE...

http://www.whitesandsvball.com

The site shows up correctly in IE but in firefox the white "content" box expands and the nav bar goes wacko...i know its a "padding" issue but i don't have a fix.

This is my first site done completely in CSS using as little html as possible so i am learning as i go. hopefully the code isn't too messy.

Any help or opinions are greatly appreciated!

Laura

 

a {
color: #142A3B;
}
a:visited {
color: #363;
}
a:hover {
color: White;
}
blockquote {
border-left: 5px solid #ccc;
margin-left: 1.5em;
padding-left: 5px;
}
body {
background: #4C7899;
font-family: verdana, arial, helvetica, geneva, sans-serif;
font-size: .8em;
border: 0;
padding:0px auto;
text-align:center;
}
h2 {
font-size: .95em;
font-family: verdana, arial, helvetica, geneva, sans-serif;
border-bottom: 1px dotted #fff;
color: #fff;
margin: 15px 0 7px 0;
padding-bottom: 2px;
}
h3 {
font-size: .85em;
font-family: verdana, arial, helvetica, geneva, sans-serif;
margin-top: 5px;
}
p, li, .feedback {
color: #fff;
font-family: verdana, arial, helvetica, geneva, sans-serif;
font-size: .75em;
}
cite {
font-style: normal;
font-size: 90%;
}
#content {
background: #ffffff;
width: 700px;
border-bottom: 3px solid #285577;
border-top: 0px;
margin:0px auto 0px;
border:1px solid #285577;
padding:0px;
/padding: 30px;
text-align: left;
}
#header {
letter-spacing: 0.2em;
background: #285577;
background-image: url(images/whitesands-header.gif);
background-repeat: no-repeat;
height: 250px;
width: 700px;
margin: 0px auto;
padding: 0px;
border: 1px solid #285577;
border-bottom: 3px solid #285577;
border-top: 0px;
}
#header a {
color: #fff;
text-decoration: none;
font-size: 1em;
position: relative;
top: 200px;
left: 25px;
}
#header a:hover {
text-decoration: underline;
}
#menu {
background: #B1D3EC;
height: 25px;
width: 700px;
margin:10px auto 10px;
}
/*#menu form {
margin: 0;
}
#menu input {
background-color: #fff;
border: 1px solid #0066B2;
font-family: verdana, arial, helvetica, geneva, sans-serif;
font-size: .9em;
width: 80px;
}
#menu input[type="submit"] {
background-color: #e8e8e8;
border: 1px solid #696;
font-family: verdana, arial, helvetica, geneva, sans-serif;
font-size: .9em;
width: 50px;
}
*/

#menu ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
float: left;
font-weight: bold;
}
#menu li {
list-style-type: none;
display: inline;
margin: 0px;
}
#menu li a {
margin: 0px;
text-decoration: none;
padding: 7px 10px;
color: #285577;
}
#menu li a:link {
color: #285577:
}
#menu li a:visited {
color: #285577;
}
#menu li a:hover {
color: #285577;
background-color: #ffffff;
}
#rap {
margin: auto;
width: 702px;
}
#contenthead {
font-size: 1.25em;
font-family: verdana, arial, helvetica, geneva, sans-serif;
border-bottom: 1px dotted #fff;
color: #285577;
margin: 15px 0 7px 0;
padding-bottom: 2px;
background-color: #B1D3EC;
width: 300px;
}
#contenttext {
font-size: .95em;
font-family: verdana, arial, helvetica, geneva, sans-serif;
color: #285577;
padding:10px;
/padding:0px;
}

#footer {
background: #B1D3EC;
height: 25px;
width: 700px;
margin:10px auto 10px;
padding:0px;
/padding:0px 5px;
color: #285577;
text-align: middle;
font-size: .75em;
line-height: 30px;
}

 

kodo,

thanks for the help. it got me most of the way there, and i was able to figure out the rest regarding the content area. I still am having problems with the nav bar, though. none of the changes you made visually changed anything in IE or Firefox...again, how it shows up in IE is how i would like it to appear. In firefox, however, the nav bar doesn't seem to be at the right height, but the rollovers are, so when rolling over the buttons, the white is outside of the blue bar - i would like it to stay inside. here is the CSS code just for the nav bar... any more ideas? thanks,

laura

#menu {
background: #B1D3EC;
height: 25px;
width: 700px;
margin:10px auto 10px;
}
#menu ul {
margin: 0px;
/padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
float: left;
font-weight: bold;
}
#menu li {
list-style-type: none;
display: inline;
margin: 0px;
}
#menu li a {
margin: 0px;
text-decoration: none;
padding: 7px 10px;
/padding: 7px 10px;
color: #285577;
}
#menu li a:link {
color: #285577:
}
#menu li a:visited {
color: #285577;
}
#menu li a:hover {
color: #285577;
background-color: #ffffff;
}

 

a {
color: #142A3B;
}
a:visited {
color: #363;
}
a:hover {
color: White;

}
blockquote {
border-left: 5px solid #ccc;
margin-left: 1.5em;
padding-left: 5px;
}
body {
background: #4C7899;
font-family: verdana, arial, helvetica, geneva, sans-serif;
font-size: .8em;
border: 0;
padding:0px auto;
text-align:center;
}
h2 {
font-size: .95em;
font-family: verdana, arial, helvetica, geneva, sans-serif;
border-bottom: 1px dotted #fff;
color: #fff;
margin: 15px 0 7px 0;
padding-bottom: 2px;
}
h3 {
font-size: .85em;
font-family: verdana, arial, helvetica, geneva, sans-serif;
margin-top: 5px;
}
p, li, .feedback {
color: #fff;
font-family: verdana, arial, helvetica, geneva, sans-serif;
font-size: .75em;
}
cite {
font-style: normal;
font-size: 90%;
}
#content {
background: #ffffff;
width: 700px;
border-bottom: 3px solid #285577;
border-top: 0px;
margin:0px auto 0px;
border:1px solid #285577;
padding-top:30px;
padding-bottom: 30px;
/padding: 30px;
text-align: left;
}
#header {
background: #285577;
background-image: url(images/whitesands-header.gif);
background-repeat: no-repeat;
height: 250px;
width: 700px;
margin: 0px auto;
padding: 0px;
}
#header a {
color: #fff;
text-decoration: none;
font-size: 1em;
position: relative;
top: 200px;
left: 25px;
}
#header a:hover {
text-decoration: underline;
}
#menu {
background: #B1D3EC;
height: 25px;
width: 700px;
margin:10px auto 10px;
}
/*#menu form {
margin: 0;
}
#menu input {
background-color: #fff;
border: 1px solid #0066B2;
font-family: verdana, arial, helvetica, geneva, sans-serif;
font-size: .9em;
width: 80px;
}
#menu input[type="submit"] {
background-color: #e8e8e8;
border: 1px solid #696;
font-family: verdana, arial, helvetica, geneva, sans-serif;
font-size: .9em;
width: 50px;
}
*/

#menu ul {
margin:0px 0px 0px -40px;

/padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
/font-size:small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
text-align:left;
font-weight: bold;

}
#menu li {
list-style-type: none;
display: inline;
margin: 0px;
}
#menu li a {
margin: 0px;
text-decoration: none;
padding: 7px 10px;
/padding: 7px 10px;
color: #285577;
}
#menu li a:link {
color: #285577:
}
#menu li a:visited {
color: #285577;
}
#menu li a:hover {
color: #285577;
background-color: #ffffff;

}
#rap {
margin: auto;
width: 702px;
}
#contenthead {
font-size: 1.25em;
font-family: verdana, arial, helvetica, geneva, sans-serif;
border-bottom: 1px dotted #fff;
color: #285577;
margin: 15px 0 7px 0;
padding-left:30px;
padding-right:30px;
/padding:0px;
background-color: #B1D3EC;
width: 300px;
}
#contenttext {
font-size: .95em;
font-family: verdana, arial, helvetica, geneva, sans-serif;
color: #285577;
padding-left:30px;
padding-right:30px;
/padding:0px;
}

#footer {
background: #B1D3EC;
height: 25px;
width: 700px;
margin:10px auto 10px;
padding:0px;
/padding:0px 5px;
color: #285577;
text-align: middle;
font-size: .75em;
line-height: 30px;
}

 

I recommend that you change your DocType declaration at the top of your page to this:

Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd"> 

I realize this is an old thread from 2002, but I followed the link to the web site in question in both IE7 and Firefox, and saw some differences in spacing, but it's not bad once I size and position the two page views on the screen in the same size and position browser window.

I then zoomed the page in IE and notice that the scroll bars are magnified along with the page content. This means that IE is in quirks mode, and that usually means no Document Type Declaration is in use.

A look at your source shows that you are using the HTML 4.01 Transitional doctype, but have no reference url included.

Therefore, the browser still is in quirks mode.

If you really want to get consistent behavior with your css across different browsers, you must use standards-compliant html. This includes a proper declaration at the top of the source. Then IE and Firefox will in most cases show the same page style.

 

I'm lazy and I hate IE, so I do a check and see if they're using IE. If they are I then redirect them to a firefox download page.

 

yup...lazy..