I am working on a webpage where I want to put a label over an image. I was able to achieve this using position: absolute for the label and float: left for the img tag. This method worked perfectly in most browsers, except for Firefox (both version 3 and 4).
This is how the HTML structure will look like:
<h3>Header</h3>
<div class="wrapper">
<span class="img-title">OVERLAY LABEL</span>
<img src="pic.jpg">
<div class="text">
<p>Some text about the lovely picture goes here</p>
</div>
</div>
<p>Footer bits</p>
And here is the CSS used:
.wrapper {
overflow: auto;
}
.img-title {
position: absolute;
}
img {
float: left;
}
I'm puzzled as to why Firefox is displaying the layout differently compared to Chrome, IE, Safari, and Opera when it comes to using position:absolute. Any insights on this issue?
You can also view my jfiddle page demonstrating the problem.