div pushed down in firefox

can someone please help me figure out why the code below renders fine in ie, but is pushed down in firefox?

thanks
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Merrick Construction</title>
 
<style type="text/css">
 
html {
margin: 0px;
padding: 0px;
height: 100%;
}
 
img {
margin 0;
}
 
body {
margin: 0;
padding: 0;
color:black;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
a:link {text-decoration:none; color:#000000;}
a:visited {text-decoration:none; color:#000000;}
a:active {text-decoration:underline; color:#cc0000;}
a:hover {text-decoration:none; color:#cc0000; }
 
#header{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color:white;
background-color: #ffcc33;
background: blue url(images/yellow_header_background.jpg) top repeat-x;
height: 200px;
}
 
#main{
margin: 0;
padding: 0;
width:100%;
height: 400px;
background-color: #8CB1FF;
background: blue url(images/test_merric_main_bckgrnd.jpg) top repeat-x;
color:black;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
#navbar{
margin: 0;
padding: 0;
width: 100%;
/* background-color:#fff2cc; */
background-color:#000000;
background-color:#ffffff;
/* background-color:#cc0000; */
}
 
#navlist{
margin: 165px 0px 0px 500px
/* padding: 140px 0px 0px 500px; */
}
 
#navlist li
{
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
display: inline;
list-style-type: none;
padding-right: 40px;
}
 
#footer
{
margin 0;
padding 0;
width: 100%;
height: 150px;
background-color:#404040;
background-color:#7f7f7f;
color:#ffffff;
}
 
</style>
</head>
 
<body>
 
<div id="header"><img style="float:left; margin:0px 0px 0px 150px;" src="images/Merrick_Logo_Transparent180.jpg"/>
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Project Gallery</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">About Merrick</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
 
<div id="navbar">
<p>just hanging in navbar for now</p>
</div>
 
<div id="main">
<p>In Main</p>
<p style="color: #cc0000;">here's some red text</p>
<p style="color: #ffcc33;">here's some yellow text</p>
<p style="color: #81371D;">here's some brick text</p>
<p style="color: #ffffff;">here's some white text</p>
</div>
 
<div id="footer">footer</div>
 
</body>
</html>

Open in new window

shinnmillAsked:
Who is Participating?
 
RartemassConnect With a Mentor Author, martial arts coach, IT ConsultantCommented:
Its to do with the image in the header floating left.
If you remove the float the image adjusts to the top of the page.
The menu will then be out of alignment with the white bar but that can be adjusted with padding or margins.

<div id="header"><img style="float:left; margin:0px 0px 0px 150px;" src="images/Merrick_Logo_Transparent180.jpg"/>

0
 
ddayx10Connect With a Mentor Commented:
It's doing that because of a combination of the fact that you are floating the img and the margin you have set in #navlist.

If you add the clear attribute tto the ul below:
<ul id="navlist" style="clear:both;">

...and change the margin to padding it mostly fixes it. You are still in for some tweaking but that is the jist of why this is happening.

Good Luck,

dday
0
 
shinnmillAuthor Commented:
thanks

one more question

why is the white bar wider in ff than in ie?
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
ddayx10Commented:
You have a <p> inside a <div>.

The div has css set, but the p does not. Set the margin/padding for that <p> tag as you have the others and I suspect the issue will disolve.

dday
0
 
David S.Connect With a Mentor Commented:
To add to what ddayx10 said, in Firefox the <p> has default top and bottom margins which is why it's taller than in IE.

Another issue is that the doctype is missing.

Recommended reading:
http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your/
http://www.dynamicsitesolutions.com/blog/2008/12/10-things-you-might-not-know-about-using-css/
0
 
ddayx10Commented:
Just a gentle reminder. It's been two weeks since you indicated that your questions were answered on this post. Time to assign points please :)

dday
0
 
shinnmillAuthor Commented:
Sorry about the delay - I'm suffering a bit from sleep deprivation!  Thanks for all the help, I really appreciate it.  I'm learning, but right now, know just enough to be dangerous.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.