me again.. ie works ff doesn't please help

L

liunx

Guest
the content div seems to go wider than 660px in firefox.. can anyone see what's going on?

any other suggestions or comments appreciated.. this is my first real attempt at a website
:)

page:
<!-- m --><a class="postlink" href="http://www.dixiederbygirls.com/index.html">http://www.dixiederbygirls.com/index.html</a><!-- m -->
style sheet:
<!-- m --><a class="postlink" href="http://www.dixiederbygirls.com/ddg.css">http://www.dixiederbygirls.com/ddg.css</a><!-- m -->


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dixie Derby Girls</title>
<link rel="STYLESHEET" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"ddg.css">
</head>

<body>
<div id="container">
<div id="header">
</div>
<div id="nav">

<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html"><img border="0" src="images/btnHome.gif" alt="Home"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.html"><img border="0" src="images/btnAbout.gif" alt="About"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"teams.html"><img border="0" src="images/btnTeams.gif" alt="Teams"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"scrapbook.html"><img border="0" src="images/btnScrapbook.gif" alt="Scrapbook"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"events.html"><img border="0" src="images/btnEvents.gif" alt="Events"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"merch.html"><img border="0" src="images/btnMerch.gif" alt="Merch"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.html"><img border="0" src="images/btnContact.gif" alt="Contact"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.dixiederbygirls.com/phpbb2/"><img border="0" src="images/btnForum.gif" alt="Forum"></a></li>

</ul>
</div>
<div id="content">
<br>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/pHelp.gif" alt="Help The Derby Girls">
<p class="top">
Listen up girlies, we are currently looking for new skaters to be a part of the most kick ass gang of girls to ever roll over the rocket city.
We are also looking for sponsors and volunteers of every sort.
Thank you all for supporting your local derby girls !!!!
</p>
<br>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/pSponsors.gif" alt="Sponsors">

<ul class="top">
<li>4Motion Skate Shop</li>
<li>Bandito Burrito Co.</li>
<li>Artisans SalonSpa </li>
<li>Sunburst Records </li>
</ul>
<br>



<h4>Don't miss the Dixie Derby Down & Dirty Dodgeball Tournament!
Click <a href=http://www.webdeveloper.com/forum/archive/index.php/"dodgeball.html">here</a> for info </h4>

</div>
<div id="footer">
COPYRIGHT 2005 DIXIE DERBY GIRLS ROLLER DERBY LEAGUE
</div>
</div>
</body>

</html>



body{
text-align:center;
background-color:#000;
}
#container{
background-image: url('images/smBlackBgk.gif');
width: 780px;
margin: auto;
text-align: left;
color: #000;
background-color: #CCC;
padding: 0;
}
#header{
background-image: url('images/header.gif');
margin-left: 60px;
margin-right: 60px;
width:660px;
height:125px;
}
#nav{
margin-left: 60px;
margin-right: 60px;
width:660px;
height:25px;
background-color: #000;
}
#nav ul{
text-align:center;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
list-style-type: none;
padding:0 0 0 0;
}
#nav li{
display: inline;
}
#content{
margin:0 60px;
background-color:#999;
padding: 0 20px 1px 20px;
width:660px;
}
#footer{
margin-left: 60px;
margin-right: 60px;
width:660px;
height:25px;
background-color:#990000;
text-align:center;
}
.floatright{
float:right;
margin: 10px 10px 0 0;
}
.floatleft{
float:left;
margin: 10px 10px 0 0;
}
.top{
margin-top:0;
}
.topcenter{
text-align:center;
margin-top:0;
}
ul
{
padding-left:0;
margin-left:30px;
margin-top:0;
}
a:link {color: #990000}
a:visited {color: #CCCCCC}
a:hover {color: #FFF}
a:active {color: #990000}I纾沞 studied your code and I find this very amusing aswell... seems like in firefox 660px is wider than 660px. If you remove the left margin then there will clearly look wider than what IE shows.

I have a small hack for you to use while some genius can explain this... First you adjust for FF so it looks good. Decrease the width of the content by 40px (620px) and then add this line in your css just above #content

* html #content {width:660px;}

That will be only affect IEthanks for the reply... i'll give it a shot.that hack works... i'm still wondering if anyone else could explain what is going on?


i have put the originaly css back on the page so that people can see the problem, but yes the hack works and i'll use it if there are no other suggestions....


thanks so much. :)Firefox gives you a content div that is 660px+40px because that's what you asked for.

<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS1#formatting-modelI">http://www.w3.org/TR/REC-CSS1#formatting-modelI</a><!-- m -->纾
 
You must log in or register to reply here.
Back
Top