Log in

View Full Version : Border not displaying correctly in FF


wkenny
05-15-2007, 11:32 AM
I'm experimenting with CSS positioning and right at the outset have a problem with FF which is not displaying the border correctly. Any help appreciated.

CSS

#container {
width: 97%;
border: 1px solid gray;
margin: 0;
}

.company {
float: left;
width: 75%;
border: 1px solid red;
margin: 0;
}

.company h1 {
font-weight: bold;
font-size: 120%;
margin: 0;
}

.companyname {
width: 68%;
float: left;
border: 1px solid green;
margin: 0;
}

.email {
width: 15%;
float: right;
border: 1px solid blue;
margin: 0;
}

.logo {
width: 15%;
float: left;
margin: 0;
border: 0;
}



HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="company.css" class="sitestyles" />
</head>
<body>
<div id="container">
<div class="company">

<div class="logo">

logo
</div> <!-- logo -->

<div class="companyname">

<h1>company</h1>
</div> <!-- company name -->
<div class="email">

email
</div> <!-- email -->

</div> <!-- company -->


</div> <!-- container -->

</body>
</html>
Veronica
05-15-2007, 01:33 PM
You can add a height attribute. For example, this will put the border around the whole page:

#container {
width: 97%;
height: 100%;
border: 1px solid gray;
margin: 0;
}

Or you can set the height to the correct pixel size for your logo, etc.

The border will also display correctly in FF if you add content under the logo/name/email header. (which I assume you will be?) It will adjust to the height of the content.

You would need to add at the end of your html (new stuff in red)

</div> <!-- company -->

<div style="clear:both"></div>
your content here

</div> <!-- container -->
wkenny
05-15-2007, 05:36 PM
Thanks Veronica,

Adding height to container and adding content to logo etc did not work but adding the break div solved the problem.

Only thing is I cannot see any logical reason why - is it a bug in FF (ver 2.0.0.3)
mwinter
05-15-2007, 06:00 PM
Only thing is I cannot see any logical reason why - is it a bug in FF (ver 2.0.0.3)

Then I suggest you read the CSS specification. Once you understand how floats work, it should be obvious. As a quick overview, floated elements are removed from the flow of rendered elements, only affecting the rendering of line boxes (a CSS concept). As floats have no vertical size, as least as far as any containing block is concerned, the latter will normally be much shorter than the combined height of its descendent elements.