Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts

    Safari Navigation Problem

    Hi guys,

    Just checked my site Aegean Dream Property 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:

    Code:
    <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:

    Code:
    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.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Add this to the top of your CSS to see if it helps.
    Code:
    * {
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    Yeah meant to say Mac Safari.
    Tried the
    Code:
    * {
    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.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •