FireFox doesnt expand div
If you look at the pic below, you can see that in Firefox, the layout does not look right, I want it to look like the internet explorer screenshot:
FireFox:
http://rajaie.alkorani.googlepages.com/inff.png
Internet Explorer:
http://rajaie.alkorani.googlepages.com/inie.png
Heres the code:
CSS
html,body {
font-family: Tahoma,Arial,Helvetica,Sans-serif;
background: url('/ziimobile/bg.png');
color: #000000;
}
#wrapper {
margin: 0 auto 0 auto;
width: 1000px;
border: 3px double #CCCCCC;
}
#header {
height: 130px;
width: 100%;
}
#header img {
border: 0;
margin: 0 0 -3px 0;
}
#menu {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
height: 21px;
background: white;
width: 100%;
}
#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu ul li {
display:inline;
}
#menu ul li a {
margin: 0;
float: left;
color: #000000;
border-right: 1px solid black;
display: block;
font-size: 13px;
line-height: 19px;
height: 21px;
width: 100px;
text-decoration: none;
text-align: center;
}
#menu ul li a:hover {
text-decoration: underline;
background: #4692b9;
}
#body{
padding: 10px;
width: 98%;
background: #e2e1e1;
}
#sidebar {
border: 1px #000000 solid;
background: white;
width: 300px;
float: right;
}
#content {
float: left;
border: 1px #000000 solid;
width: 660px;
background: white;
}
#footer {
text-align: center;
line-height: 47px;
border-top: 1px solid #000000;
background: #FFFFFF;
height: 50px;
width: 100%;
}HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="Rajaie AlKorani" />
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<title>ZiiMobile | HomePage</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="/ziimobile/"><img src="/ziimobile/header.jpg" title="ZiiMobile" alt="ZiiMobile"></a>
</div>
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Advertise</a></li>
<li><a href="">Downloads</a></li>
<li><a href="">Downloads</a></li>
<li><a href="">Downloads</a></li>
</ul>
</div>
<div id="body">
<div id="content">
d
</div><!-- Content End -->
<div id="sidebar">
dI've finished or cancelled a torrent. Why is it still listed in my profile?
Some clients, notably TorrentStorm and Nova Torrent, do not report properly to the tracker when canceling or finishing a torrent. In that case the tracker will keep waiting for some message - and thus listing the torrent as seeding or leeching - until some timeout occurs. Just ignore it, it will eventually go away.
Why do I sometimes see torrents I'm not leeching in my profile!?
I've finished or cancelled a torrent. Why is it still listed in my profile?
Some clients, notably TorrentStorm and Nova Torrent, do not report properly to the tracker when canceling or finishing a torrent. In that case the tracker will keep waiting for some message - and thus listing the to
</div><!-- Sidebar End -->
</div><!-- Body End -->
<div id="footer">
Copyright © 2008 | ZiiMobile
</div><!-- Footer End -->
</div><!-- Wrapper End -->
</body>
</html>
Jack Michaelson posted this at 15:51 — 29th February 2008.
He has: 1,733 posts
Joined: Dec 1999
I'm getting 404's on the images.
Rajaie posted this at 16:03 — 29th February 2008.
They have: 6 posts
Joined: Jan 2008
Sorry bout that, i fixed them now
webwiz posted this at 18:15 — 29th February 2008.
He has: 629 posts
Joined: May 2007
Try adding "overflow:auto;" to the rule for #body. This will establish a "new block-formatting context"[1] to #body that will cause it to contain the floats. IE applies its own "hasLayout" property on that element due to the width applied to it. The "hasLayout" contains floats, so in IE you are golden.
[1]
Another look at enclosing floats; TJKDesign.comCordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Rajaie posted this at 11:56 — 1st March 2008.
They have: 6 posts
Joined: Jan 2008
Thanks for that, i'll give it a try
IanD posted this at 21:36 — 5th March 2008.
They have: 222 posts
Joined: Sep 1999
I think if you put this inside #content, at the bottom, it'll work:
<div style="clear: both;"></div>Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.