having issue positioning images in safari

[pushyr]

i have a problem with css background images (i think thats what is causing the issue) that i use in my main navigation. my main navigation or link buttons position incorrectly when viewed in safari, and just a few other browsers. although it seems fine in firefox and internet explorer. but i would like to fix the issue so it works across all the main browers that i've mentioned.

here's the live page

http://www.push1.com/test/index.php

here's what it looks like in safari

http://www.push1.com/test/incorrect.jpg

here's my div code

<div id="main_tab_subholder"><div id="main_tab_subcopy"><a href="">tab1</a></div></div>
<div id="main_tab_subspacer"></div>
<div id="main_tab_subholder"><div id="main_tab_subcopy"><a href="">tab2</a></div></div>
<div id="main_tab_subspacer"></div>
<div id="main_tab_subholder"><div id="main_tab_subcopy"><a href="">tab3</a></div></div>
<div id="main_tab_subspacer"></div>
<div id="main_tab_subholder"><div id="main_tab_subcopy"><a href="">tab4</a></div></div>
<div id="main_tab_subspacer"></div>
<div id="main_tab_subholder"><div id="main_tab_subcopy"><a href="">tab5</a></div></div>
<div id="main_tab_subspacer"></div>
<div id="main_tab_subholder"><div id="main_tab_subcopy"><a href="">tab6</a></div></div>
<div id="main_tab_subspacer"></div>

and here is the css code

#main_tab_subholder a:link, #main_tab_subholder a:visited {
display:block; 
margin:0; 
width:108px; 
height: 22px; 
border: 0px; 
background-image: url(../_images/00_buttons/main_tabs.gif); 
background-repeat: no-repeat; 
position: relative; 
float: left; 
margin-left:0px;
}


#main_tab_subholder a:hover {
background-image: url(../_images/00_buttons/main_tabs_hover.gif);
}
	  
	  
#main_tab_subcopy a:link, #main_tab_subcopy a:visited  {
text-align: center; 
text-decoration: none; 
font-family: Arial, Helvetica, sans-serif; 
color: #ffffff; font-size: 12px; 
font-weight: normal; 
padding-top:0.4em; }


#main_tab_subcopy a:hover {
color: #ffffff;
}	


#main_tab_subspacer {
padding:0.1em; 
float: left; 
margin-left:0px;
}

 

[BillyRayPreachersSon]

It looks perfect for me in Safari v3.0.3 under Windows XP. What version of Safari are you running, and under what OS?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

IDs must be unique. Maybe you should switch to using classes instead for your markup. The fact Firefox and IE are showing ok is probably just a coincidence.

Check out all the errors on your page using the validator service: validator.w3.org

PS: It shows fine using Safari 3.04 MacOSX10.4x

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[BillyRayPreachersSon]

pushyr,

Did you resolve your problem?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[pushyr]

apologies!! yes, i did resolve the problem. its strange because it wasn't a result of the background images as i'd thought, to fix the issue added float:right; to my css which seemed to sort it out in safari.

to answer your previous question, i am running safari 2.0.4 using a intel macbook.