Absolute div inside relative div not working?

[jlizarraga]

I can't get this to work in IE6 or FF2, and the W3C validator says my only error is my use of custom attributes (from the DOM Image Rollover script form this site - I use it all the time).

The URL is http://thayerauto.autofusion.com

Check out the lower half of the page where it says "Featured New Vehicles." The Featured New Vehicles div (#ta_HomepageFeaturedVehicle) is relatively positioned, and within that div is a div with class .ta_MoreInfoButton, which is absolutely positioned, and has "top" and "right" css values of 0px.

However the .ta_MoreInfoButton seems to behave like a relatively positioned div. Using the Web Developer Toolbar for FF2, I can see that the divs are indeed positioned correctly as absolute and relative. With the IE6 Developer Toolbar, all of .ta_MoreInfoButton's css styles show up in the list, but its position shows up as relative, not absolute. I'm thinking this is a clue.

I must be missing something here! Thanks in advance to any second sets of eyes that might see something I certainly don't!

[Medyman]

#ta_HomepageFeaturedVehicle {

width: 263px;

height: 80px;

margin-bottom: 25px;

}


That's from your stylesheet. It's not relatively positioned.

[jscheuer1]

You have a confusion of styles. Working from the innermost (the image) you have:


.ta_MoreInfoButton img {
width: 32px;
height: 32px;
position: relative;
top: 12px;
}

That sets it relative. It is contained by a division with no id and a class of
ta_MoreInfoButton, which gives it these styles:


.ta_MoreInfoButton {
width: 90px;
height: 32px;
position: absolute;
bottom: 0px;
right: 0px;
color: #754324;
font-size: 12px;
}

But that division also happens to be a division within the division with the class of ta_HomepageBox, which selects it with this rule:


.ta_HomepageBox div {
position: relative;
}

Now, as far as I recall, nested selectors take precedence over class selectors, so the net effect would be that both the image and its container are relatively positioned (what I think you are already telling us).

If you go up one more level, the next container is a division that is positioned relative. The one above that is static (no positioning specified), as is the next parent.

If you want more precise control, give the element you wish to affect an id, and select it by that id within any other nested selector that may already apply to it.

So to make sure that the .ta_MoreInfoButton div around that image is absolute, give it a unique id - say, 'bob' and refer to it like so:


.ta_HomepageBox div#bob {
position: absolute!important;
}

It would probably be easier and better to redo the page and/or the css. Try not to set up potentially conflicting selectors. Only use inheritance where it will benefit you without confusion, set unique selectors (id) for special items.

[jlizarraga]

Ah, so it was a problem of specificity. Thanks to this (http://www.rebelinblue.com/specificity.php) handy calculator, I see now that ".ta_MoreInfoButton" has a specificity score of 10, while ".ta_HomepageBox div" has a specificity score of 11.

Doh!

Thanks guys. :)

P.S. Medyman that "ta_HomepageFeaturedVehicle" div *was* relatively positioned as a descendant of a ".ta_HomepageBox" div. >_>

[jlizarraga]

Oh, and the ".ta_MoreInfoButton" is a class and not an ID because there will be one in each one of those boxes. >_>