MAC Safari 3.0 Frames issue. DIV not centering

[jamesx521]

This page is not showing properly on MAC, Safari 3.0 (I think). I have Top frame and Bottom frame. I don't like to work with frames, but in this case using frames is a must, because there is an audio plalyer on the top frame. (Just in case you're asking why use frames with flash audio players... because your audio player needs to be on a separate frame, otherwise when you click to go to another page the song will load again from the beginning... it's very annoying!).

I have two white background divs that should stay in the center behind the layout/content. Those two divs are not staying in the center (I was shown screen capture from Safari 3)... I am sure it's some issue with my code that I don't know how to resolve.

Anyway, here's the page that doesn't show well on Safari 3:
Link (http://xn3ct.net/maultsby/frameset.html)

Here's the CSS for the DIVS:


#vertop {
background: transparent url(../img/vfr.gif) repeat-y fixed center;
margin:0 auto;
height:100%;
padding:0;
}

#verbottom {
background: transparent url(../img/bottom.gif) no-repeat center;
height:100%;
width:auto;
padding:0;
margin-top:-10px;
position:exact;
}


HTML:
In the top frame:<div id="vertop"></div>

In the bottom frame:<div id="verbottom"></div>

The vfr.gif, which is the TOP white background is 819px wide and 10px tall
The bottom.gif, which is the BOTTOM white background is 819px wide and 455px tall.

Thanks.

[jamesx521]

Oh, and if anyone can tell me how to style the <h1> text on the main page to appear smaller on MAC -- Safari, I'd appreciate it. It's OK on PC, but not on MAC. I don't have a MAC, I am just getting screen-captures from other sources emailed to me, as to how it looks on MAC. Thanks.

[Centauri]

The problem also shows on FF, and is dependant on screen size. Whilst the background images ARE centred, it is the content that isn't. As the #vertop and #verbottom divs do not have a width set, they extend the full width of the screen, meaning that the left position dimensions you have used on the content elements actually references the left edge of the screen, and not the centre. As the images are 819px wide, you also have to set the width of #vertop and #verbottom to 819px (the current auto side margins will automatically centre it). You then need to reduce the values of "left" on the various content elements to bring them back to proper position.

Oh, and both those divs need to have position:relative to provide the reference point for internal positioning. (position:exact ??? - that is not valid)

[smyhre]

Centauri is right and the same issue is in IE7 as well or another issue same difference.