CODEWITHSUNDEEP
htmlcssfirefox
JeremyH
JeremyH

Reputation: 39

Firefox position: absolute not returning expected results

I want to overlay a label on a picture in my webpage. Using position: absolute on the label and float: left on the img, I got it to work in all the browsers that I tested it on--other than Firefox (3 and 4).

Here is what the html will basically 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 the CSS:

.wrapper { 
    overflow: auto; 
}
.img-title { 
    position: absolute; 
}
img { 
    float: left; 
}

Can some one clue me in on why Firefox is behaving differently than Chrome, IE, Safari, and Opera in regards to position:absolute?

Here is my jfiddle of the problem?

Upvotes: 0

Views: 227

Answers (1)

James
James

Reputation: 3805

You have to specify more than that. 

.wrapper { 
    border:1px solid red;
    overflow: auto; 
    position: relative;
}
.img_title { 
    position: absolute; 
    top:0;
    left: 0;
}
img { 
    float: left; 
}

To position image_title absolutely, but relative to the wrapper, the wrapper must be positioned relatively. Additionally, you must also specify the top and left position of the absolutely positioned title.

Update Your text doesn't appear at the top, aligned with your image, because the <p> tag has some padding or margin on it. You can fix it by:

.text p {
    margin: 0; padding: 0
}

Upvotes: 2

Related Questions