Internet Explorer body Element

Forum Moderators: open

Message Too Old, No Replies

Internet Explorer body Element

compatability

Steve Newcastle

11:32 pm on May 16, 2010 (gmt 0)

I have a page which validates but the body border doesnt contain all the elements without enforcing IE7 compatability with the META tag. I have worked around it but I cannot see what is wrong with the original. The border only extends to the opening elements which are not in the divs. Is this a bug or a mistake on my part?

[edited by: tedster at 12:46 am (utc) on May 17, 2010]
[edit reason] no personal links [/edit]

tedster

1:01 am on May 17, 2010 (gmt 0)

Hello Steve, and welcome to the forums.

Does the page display as you intend in other browsers - Safari, Firefox, Opera, Chrome? As a general rule, those rendering engines are much more standards-compliant. Cross-browser development works best if you start with one of those browsers, and then tweak for any IE problems that show up.

If the only problem you see is in IE, then try reducing your source code to the bare essentials needed to show the problem (without giving any hints to the actual website involved) and we'll take a look at that test case.

Steve Newcastle

11:00 am on May 18, 2010 (gmt 0)

It seems that in IE8 and Firefox there is problem when you apply a border to the body element if you have floating elements within it. The workaround is to enclose everything in a further div and apply the border to that. It is strange that IE7 does not seem to have this problem.
Here is the coded


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Problem With Border</title>
<style type="text/css">
body {border:2px solid green;padding:5px}
div {float:left;width:40%;height:40px;border:1px solid black;margin:10px}
</style>
</head>

<body>
<p>The border ought to be around the whole page not just this</p>
<p>Steve</p>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
</body>
</html>