Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthortechnophobe
- CommentTimeMar 27th 2008
I've a problem with a page displaying in Firefox. It displays perfectly in Internet Explorer but when loaded in Firefox the #nav div shifts below the #picture div and stay on the right side of the page. Is there a way of displaying the div to align correctly beside #picture div in Firefox as it does in Internet Explorer.
Here's the code below:
-------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>Photo</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body{
width:800px;
margin:auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#header{
width:800px;
height:50px;
background-color:#999933;
margin-top:30px;
}
#picture{
margin-top:10px;
margin-right:0px;
margin-bottom:10px;
float:left;
}
#nav{
margin-top:10px;
margin-bottom:10px;
float:right;
}
#nav ul{
list-style-type:none;
margin-left:0;
font-size:24px;
}
#home{
width:270px;
height:65px;
padding-left:20px;
padding-top:20px;
margin-left:10px;
margin-bottom:10px;
background-color:#00CCCC;
}
#about{
width:270px;
height:65px;
padding-left:20px;
padding-top:20px;
margin-left:10px;
margin-bottom:10px;
background-color:#CC0066;
}
#gallery{
width:270px;
height:65px;
padding-left:20px;
padding-top:20px;
margin-left:10px;
margin-bottom:10px;
background-color:#660000;
}
#contact{
width:270px;
height:65px;
padding-left:20px;
padding-top:25px;
margin-left:10px;
background-color:#000099;
}
</style>
</head>
<body>
<div id="header">
Header
</div>
<div id="content">
<div id="picture">
<img src="pic01.jpg" width="500" height="375" />
</div>
<div id="nav">
<ul>
<li id="home">Home </li>
<li id="about">About</li>
<li id="gallery">Gallery</li>
<li id="contact">Contact</li>
</ul>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------
Thanks for your help. -
The navi div shifts below the image, because there isn't enough space for it. Try to set the width of the body to 850px instead of 800, you'll see the difference. IE doesn't sum up the margins and paddings of elements to their widths, that's the reason.
1 to 2 of 2