S
steve
Hi,
I've got a simple problem - I'm trying to position a logo in CSS with a 1px
border that has a padding of 1px, and a 1px margin. In IE6 it works fine,
but in Opera 9 or Firefox 2 the bottom border seems to have some extra
padding applied. The problem only occurs if the DOCTYPE declaration is in
place, without one everything is fine.
Here's my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
<title>CSS Problem</title>
</head>
<body>
<div id="header">
<div id="logo"><img
src="http://newsimg.bbc.co.uk/media/images/42001000/gif/_42001036_bbc_logo_2.gif"
alt="Logo" /></div>
</div>
</body>
</html>
And here's my CSS:
#logo {
float: left;
border: 1px solid black;
padding: 1px;
margin: 1px;
}
Can someone shed some light on this easy problem?
Thanks
steve
I've got a simple problem - I'm trying to position a logo in CSS with a 1px
border that has a padding of 1px, and a 1px margin. In IE6 it works fine,
but in Opera 9 or Firefox 2 the bottom border seems to have some extra
padding applied. The problem only occurs if the DOCTYPE declaration is in
place, without one everything is fine.
Here's my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
<title>CSS Problem</title>
</head>
<body>
<div id="header">
<div id="logo"><img
src="http://newsimg.bbc.co.uk/media/images/42001000/gif/_42001036_bbc_logo_2.gif"
alt="Logo" /></div>
</div>
</body>
</html>
And here's my CSS:
#logo {
float: left;
border: 1px solid black;
padding: 1px;
margin: 1px;
}
Can someone shed some light on this easy problem?
Thanks
steve