SunnyByfleet
Technical User
I have a minor irritation on one of my sites. It renders fine in IE6 and 7, but inserts an extra blank link in FF and Opera.
I have produced a skeleton bit of code below which demonstrates the problem. it is self contained, and if you run it you should get the following in IE:
Green body background, with a centred pink box displaying the phrase "one line of random text". There are no gaps between the pink box and the top of the browser on all browsers, which is what I want.
Below the line of text is a grey box, with loads of random text.
Now, on IE, the grey box is directly below the "one line of random text". However, on FF and Opera, there is an extra blank pink line above the box. It is almost as if a rogue <BR> has been inserted, which of course it hasn't.
Now, I fully appreciate the FF and Opera are probably the ones behaving themselves, in which case, what am I doing wrong? I can get rid of the blank line by giving the grey box a negative top margin, but that just seems wrong. What is happening?
Anyway, here is the code:
I have produced a skeleton bit of code below which demonstrates the problem. it is self contained, and if you run it you should get the following in IE:
Green body background, with a centred pink box displaying the phrase "one line of random text". There are no gaps between the pink box and the top of the browser on all browsers, which is what I want.
Below the line of text is a grey box, with loads of random text.
Now, on IE, the grey box is directly below the "one line of random text". However, on FF and Opera, there is an extra blank pink line above the box. It is almost as if a rogue <BR> has been inserted, which of course it hasn't.
Now, I fully appreciate the FF and Opera are probably the ones behaving themselves, in which case, what am I doing wrong? I can get rid of the blank line by giving the grey box a negative top margin, but that just seems wrong. What is happening?
Anyway, here is the code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html>
<head>
<style>
body {
padding: 0px;
margin: 0px Auto;
width: 600px;
color: #000;
background-color: #aaffaa;
}
#outer
{
padding: 0px;
margin: 0px;
background-color: #FF8888;
width: 600px;
font: 9pt "Lucida Grande", Arial, Sans-serif;
}
#inner
{
width:570px;
margin: 0px auto;
padding: 0px;
text-align: center;
background-color: #ddddff;
}
</style>
<title>Border Test</title>
</head>
<body>
<div id="outer">
One line of random text
<div id='inner'>
<h3>Let's go!</h3>
<p>Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte Caesar adsum iam forte</p>
</div>
</div>
</body>
</html>
