shinnmill
asked on
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
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
dday
ASKER
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.
ASKER
one more question
why is the white bar wider in ff than in ie?