CSS box-height problems in Mozilla

I've built a website (using MS Expression Web). Works fine on IE. However, I can't get the box heights to work correctly on Firefox. A few specific boxes want to default to zero height, even when there is content in the box. (specifically images, and lists of links)

Specifying the height exactly seems to fix the problem, but if the text is made larger (for the navigation links), then it runs out of the box, and the box doesn't rescale.

So, why does this happen? Why is firefox not fitting the html box to fit the content (image or text), while IE does fit the box to the content?

Here's some code. IE shows the text below the image. Firefox shows the text next to the image. (CSS is further down)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="SP2007.css" />
</head>
<body><div id="container">
<div id="headerwrap">
<div id="header">
<img alt="logo1" src="images/logo1.gif" align="left"/>
</div>
</div>
<div id="content">
 <p>This text ends up next to the logo in Firefox, instead of under it. IE shows text under the logo.</p>
 </div>

-----------
and some CSS
-----------


body {height:100%}html {height:100%}
* {
 margin: 0;
 padding: 0;
}
body {
 text-align: left;
}
#container {
 height: auto!important;
 min-height: 100%;
 padding-bottom: 15px;
 position: relative;
}
#headerwrap { /* grey bar behind header, full width of browser */
 background: #888;
 margin: 0 auto;
}
#header { /* 740px column, centred */
 width: 740px;
 margin: 0 auto;
 position: relative;
}
#content {
 width: 740px;
 margin: 7px auto;
}

CSS box-height problems in Mozilla

surfdabbler

appi2

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week