CODEWITHSUNDEEP
csspositioningcss-position
jamcoupe
jamcoupe

Reputation: 1452

CSS absolute positioning nightmare—browser differences

I have some code that will allow me to have a couple of divs pop up with HTML in them.

I got it pixel perfect in Firefox and then realised that all the other browsers (not tested in IE) are off.

Could anyone tell me or show me an article on how different browsers treat absolute positioned elements and how to correct my dilemma?

Here is my original code, and here is my new code.

This is what I am seeing:

Photo of differences

Upvotes: 2

Views: 2644

Answers (3)

jamcoupe
jamcoupe

Reputation: 1452

I have worked out what I was doing wrong. I created a div around the p tag and then set the width to what I wanted because before it calculated the space by using padding around the p here is my updated code that works perfectly! (I hope)

Updated code: DEMO

Edit: I had the hidden boxes outside each of the visible boxes (where you click to show the hidden ones) so it when I was trying to position them it was not easy to determine where they were going to be in the DOM but if you make the hidden boxes a child of the visible boxes respectively then you can use position: relative; CSS property to position the child boxes exactly where you want them!

CSS

.visibleBox{
     position: relative;
}

.hiddenBox{
     position: absolute;
     bottom: 0; 
     right:0;
}

HTML

<div class="visibleBox">
    <p class="hiddenBox">I am hidden sometimes<p>
</div>

So what I am trying to say is that I have the P outside of the DIV and this was making it totally awkward to position it correctly in all browsers but using the parent and child with the relative and absolute position it fixed my issue.

Upvotes: 1

Dean
Dean

Reputation: 459

Looks good to me in IE9, Chrome 17 and FF9. adding position relative to div#userControls will ensure you are positioning absolute nodes relative to its parent node.

Upvotes: 1

kidwon
kidwon

Reputation: 4504

In all browsers the absolute positioning is defined the same way.

Elements are positioned absolutely to a relative/absolute positioned parent or the body element if not such.

Upvotes: 1

Related Questions