Hello all,
I recently did a demo header for someone and saw something weird in Opera. Only Opera, both 11 and an old copy of 9.6.
http://stommepoes.nl/opera.html
http://stommepoes.nl/operabug.png <–Opera (the mouse was a hand, just doesn’t while screenshotting
http://stommepoes.nl/operabugFirefox.png <–same page, on Firefox 3
The code (remember this was from a quick throw):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<title>Opera</title>
<meta name="description" content="wut?" />
<style type="text/css">
* {
margin: 0;
}
html, ul {
padding: 0;
}
img {
vertical-align: bottom;
border: 0;
}
body {
padding: 130px 0 0;
font: 100% georgia, "urw bookman l", serif;
background-color: #c0ffee;
}
#container {
width: 1150px;
margin: 0 auto;
padding: 20px 0;
background-color: #decaff;
}
#header {
width: 100%; /*Haslayout*/
margin-bottom: 1em;
outline: 1px solid #000;
background-color: #615096;
}
#header:after {
content: " ";
display: block;
clear: both;
height: 0;
}
#sitename {
float: left;
width: 220px;
height: 58px;
margin-bottom: 8px;
border: 1px solid #000;
}
#sitename a {
/* display: block; remove this line, critical*/
font-size: 46px;
border: 1px solid #f00;
}
#header a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
#header a:focus,
#header a:hover,
#header a:active {
color: #ffd55a;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<p id="sitename"><a href="home"><img src="logo.png" width="220" height="58" alt="Yoursell!" /></a></p>
</div>
</div>
</body>
</html>
On the left in the #header is a floated <p> holding an inline <a> holding an image. Whether the image is there or not, the <a> sticks up out of the <p> and the #header unless I make it some kind of block.
I have no idea why.
When I first made the original mockup, there were 4 headers, each with an outline, and that’s where I saw Opera being strange. No other browser did this. The floated anchor-holding-image on the right does not affect things (this still fails when the ul is removed, as I did above).
Any ideas?
What’s wrong with block and inline as siblings? Seen that mentioned a couple times but have never seen a prob with it?
