Safari Behaivor (position bug?)

I have noticed some very odd Safari behaivor. Usually, when you have a parent element with position:relative and a child position:absolute The child element will align itself to the parent element. However, I have run into a bit of an issue.

It happens when I have another element, a relative positioned float left next to the element in question.


#main {
position:relative;
width:785px;
margin:35px auto;
}

#cont {
position:relative;
width:564px;
padding:0 10px;
margin:0 auto;
}

#subnav {
position:relative;
width:138px;
padding:0 5px;
margin-right:50px;
float:left;
}

#subnav .top, #cont .top {
position:absolute;
top:-21px;
left:0px;
}

#subnav .bottom, #cont .bottom {
position:absolute;
bottom:-21px;
left:0px;
}


<div id="main">
<div id="subnav">
<img src="img/sn-top.jpg" class="top" />
Subnav.
<img src="img/sn-bot.jpg" class="bottom" />
</div>
<div id="cont">
<img src="img/top.jpg" class="top" />
Content. The two images are incorrectly positioned ONTOP of #subnav.
<img src="img/sn-bot.jpg" class="bottom" />
</div>
</div>


Anyone know of a possible solution, or cause of this problem?
CSS/ HTML simplified for example. Actual page you can see this problem:
http://www.camdenrose.com/catalog/

Thanks Much.

Using Safari v85 (1.0) for MAC OS 10.2.8

Safari 1.0 is crazy... Honest... That bug (and about 50,000 others) were fixed in 1.2.

Giving the absolutely positioned elements a left:192px; I was able to get them to align properly in Safari, but seeing as how I don't know of any CSS comment bugs that target Safari 1.0 only, I was forced to browser sniff for that Safari <= v85 and if #subnav was present (thanks to some clever forward thinking on my part, #subnav is included when necessary by assigning a variable ($subnav) to the location of the include file, then checking if $subnav is set in the header file.

A little bit mote complicated and dangerous than I would have liked, but it works and does not effect other browsers.

By the way, if anyone knows of a comment bug/hack that will only effect Safari =< 1.0 It would be greatly apprieciated.

I do as it goes - the mixed-case @media hack (or CSS Hack 53c (http://diveintomark.org/safari/csshacks/53c.html) to use Mark Pilgrim's colorful terminology), which used to hide rules from Safari, but now it doesn't:

@media ScReEn {
property:value;
}

I'm not sure if that was fixed in 1.1 or 1.2, but imo you don't need to consider 1.1: Safari comes as an update to the OS, and the version/support split is between OS10.2 and 10.3, so all 1.1 users can easily upgrade; since Safari is the default browser in OSX, I would imagine that most, if not all, have upgraded; or if not, that's because they don't use it. Okay that's not bulletproof logic, but it's a very strong balance of likelihoods.

(Btw - Opera 7 for Mac is much better to actually use - not noticeably faster as it is when compared with Firefox, but it is more CSS compliant, more advanced in its DOM support, and infinitely more customisable).

But your original bug only happens when the parent container is floated - if you can find a way of doing without the float on #subnav that would have avoid having to use a hack.

Unfortunately, there really isn't another solution as #content needs to be centered when #subnav is not present, and when #subnav is, their sum width needs to be centered, this works in all other browsers and I can't think of any other solution other than inline style, which defeats the purpose.

I'm just upset they left Safari for 10.2.8 so broken.