...

View Full Version : Safari Navigation Problem



daemonkin
07-19-2007, 10:46 AM
Hi guys,

Just checked my site Aegean Dream Property (http://aegeandreamproperty.com/) in Safari and noticed that my sub navigation is not where it should be. The navigation is fine in FF and IE but not in Safari.

My code is:


<li><a href="/turkey/invest/">Why Invest?</a></li>
<li><a href="/regions/"><img src="/images/subsubmenu.gif" width="7" height="5" alt="hover for sub-menu" />Regions</a>
<ul>
<li><a href="/regions/?action=view&amp;regionID=1"><img src="/images/subsubmenu.gif" width="7" height="5" alt="hover for sub-menu" />White Beach</a>
<ul>

<li><a href="/regions/floorplans/?regionID=1">Floor Plans</a></li>
<li><a href="/regions/locations/?regionID=1">Site Map</a></li>
</ul>
</li>
<li><a href="/regions/?action=view&amp;regionID=2"><img src="/images/subsubmenu.gif" width="7" height="5" alt="hover for sub-menu" />GüLlüK</a>
<ul>

<li><a href="/regions/floorplans/?regionID=2">Floor Plans</a></li>
<li><a href="/regions/locations/?regionID=2">Site Map</a></li>
</ul>
</li>
<li><a href="/regions/?action=view&amp;regionID=3"><img src="/images/subsubmenu.gif" width="7" height="5" alt="hover for sub-menu" />Yalikavak</a>
<ul>

<li><a href="/regions/floorplans/?regionID=3">Floor Plans</a></li>

<li><a href="/regions/locations/?regionID=3">Site Map</a></li>
</ul>
</li>
</ul>
</li>

And my CSS is:


ul#nav, ul#nav ul { /* all lists */
padding: 0;
margin: 0;
float : left;
width: 145px;
list-style-position: inside;
list-style-type: none;
line-height: 1.5em;
z-index: 1;
}

ul#nav li { /* all list items */
position : relative;
float : left;
margin-bottom : -1px;
width: 145px;
}
ul#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 144px;
margin-top : -20px;
padding-left: 3px;
}
ul#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
ul#nav li a {
width: 145px;
w\idth : 135px;
display : block;
color : #fff;
text-decoration : none;
background-color : #0859a5;
background-image: url(/images/button.jpg);
background-repeat: no-repeat;
border-right : 1px solid #000;
border-top : 1px solid #000;
border-bottom : 1px solid #000;
padding : 2px 5px;
font: bold 0.9em Arial,Helvetica,sans-serif;
}
ul#nav li.client a {
background-color: #e4c76d;
background-image: url(/images/client_button.jpg);
color: #000;
}
ul#nav li.agent a {
background-color: #a5080a;
background-image: url(/images/agent_button.jpg);
color: #fff;
}
ul#nav li a:hover {
color : #000;
background-color : #c8d9ea;
background-image: url(/images/button_o.jpg);
background-repeat: no-repeat;
}
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.sfhover ul ul,
ul#nav li.sfhover ul ul ul {
left: -999em;
}
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
ul#nav li.sfhover ul,
ul#nav li li.sfhover ul,
ul#nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

I would certainly appreciate any replies.

D.

_Aerospace_Eng_
07-19-2007, 10:53 AM
Add this to the top of your CSS to see if it helps.

* {
margin:0;
padding:0;
}
That will get rid of all default margins and padding. If it fixes the issue then you know its a margin/padding problem somewhere on the menu.

ahallicks
07-19-2007, 11:06 AM
I'm using Safari for Windows and everything looks fine to me? I'm afraid I don't have a mac to test it on though, if that's what you were referring to.

daemonkin
07-19-2007, 11:34 AM
Yeah meant to say Mac Safari.
Tried the

* {
margin:0;
padding:0;
}

on my dev site but to no effect.
The problem is that the sub navigation on Mac Safari is displaced so that it starts below the navigation list parent element so that when you try to sub navigate you lose the sub nav.

I think that most of the sub nav can be reached by using the main navigation so there is no real urgency, just a matter of it bugging me.

D.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum