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 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Sliding Doors Problem In Safari

    Hello,

    In a recent redesign of my website, i tried to use the CSS Sliding Doors technique for the menus, from here : http://www.alistapart.com/articles/slidingdoors/

    But, i'm facing some problems in Safari. In Safari, the height of the menu item decreases.

    This is how it looks in Firefox : http://img8.imageshack.us/img8/2149/65748195.png

    In Safari : http://img8.imageshack.us/img8/6306/safarix.png

    In Safari (after a small CSS change) : http://img30.imageshack.us/img30/161/safari2.png

    The menu item background : http://img230.imageshack.us/img230/82/menub.png

    My Markup :
    Code:
    <div class="menu">
    	<ul>
    		<li><a href="#">Home</a></li>
    		<li><a href="#">About</a></li>
    		<li><a href="#">Our Work</a></li>
    		<li><a href="#">Products</a></li>
    	</ul>
    </div>
    My CSS :
    Code:
    .menu
    {
    	font-size: 16px;
    	margin: 0;
    	padding: 0;
    	width: 900px;
    	height: 88px;
    	background: url(../img/menu-bg.png);
    }
    
    .menu ul
    {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    .menu ul li
    {
    	float: left;
    	margin: 0;
    	background: url(../img/menu.png) no-repeat right bottom;
    	padding: 0 15px 0 0;
    	margin-right: 15px;
    }
    .menu ul li a
    {
    	display: block;
    	background: url(../img/menu.png) no-repeat left top;
    	padding: 14px 0 14px 15px;
    }
    My CSS (after the change) (the second safari screenshot) :
    Code:
    .menu
    {
    	font-size: 16px;
    	margin: 0;
    	padding: 0;
    	width: 900px;
    	height: 88px;
    	background: url(../img/menu-bg.png);
    }
    
    .menu ul
    {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    .menu ul li
    {
    	float: left;
    	margin: 0;
    	background: url(../img/menu.png) no-repeat 100% -50px; /* changed this line */
    	padding: 0 15px 0 0;
    	margin-right: 15px;
    }
    .menu ul li a
    {
    	display: block;
    	background: url(../img/menu.png) no-repeat left top;
    	padding: 14px 0 14px 15px;
    }
    Can anyone tell me what's wrong with this code ?

    Thanks,

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    But, i'm facing some problems in Safari. In Safari, the height of the menu item decreases.

    This is how it looks in Firefox : http://img8.imageshack.us/img8/2149/65748195.png

    In Safari : http://img8.imageshack.us/img8/6306/safarix.png

    In Safari (after a small CSS change) : http://img30.imageshack.us/img30/161/safari2.png

    The menu item background : http://img230.imageshack.us/img230/82/menub.png
    Could you post a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I've not uploaded the page anywhere..
    Its still in my computer...
    Will uploading help ?

  • #4
    New Coder
    Join Date
    Jul 2006
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I've uploaded it here : http://gotchance.com/gc2/

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try adding line-height:1.4em; to .menu ul li a
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    .Darkman (06-10-2009)

  • #6
    New Coder
    Join Date
    Jul 2006
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank, that worked like a charm.

    However, to center the menu, i'm using a little different CSS. Different from ALA's Sliding doors.

    Code:
    #navigation 
    {
    	background: url("../img/menu-bg.png") no-repeat;
    	font-size: 16px;
    	margin: 0;
    	padding: 0;
    	width: 900px;
    	height: 88px;
    }
    
    #navigation ul, #navigation ul li {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    #navigation ul {
    	padding: 5px 0 4px;
    	text-align: center;
    }
    
    #navigation ul li {
    	display: inline;
    	margin-right: .75em;
    	background: url("../img/menu.png") no-repeat 100% -50px;
    	padding: 14px 15px 14px 15px;
    }
    
    #navigation ul li a {
    	/*background: url("tab-right.gif") no-repeat 100% 0;*/
    	background: url("../img/menu.png") no-repeat top left;
    	color: #06C;
    	padding: 14px 0 14px 14px;
    	text-decoration: none;
    }
    With this, the same problem persists in Safari : http://gotchance.com/gc2/

    Any ideas on how to fix this one ?

  • #7
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Try this:

    Code:
    #navigation 
    {
        background: url("../img/menu-bg.png") no-repeat;
        font-size: 16px;
        margin: auto;
        padding: 0;
        width: 900px;
        height: 88px;
    }
    Although if that is the problem, then I have no idea why only Safari is displaying it incorrectly...

    Edit: Can't find anything to back it up, but I seem to remember 'text-align: center;' can only be applied to inline elements, and <ul> is a block level element, which could be why it is not working in Safari. (Then again that could all be complete bull.) The above fix should work
    Last edited by Kristofa; 06-10-2009 at 10:35 PM.

  • #8
    New Coder
    Join Date
    Jul 2006
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I tried that margin: auto;, but that did not change anything. Check out http://gotchance.com/gc2/

    Also, i think text-align: center; is for block elements. And, that was the only way by which i could align the menu in the center..


  •  

    Posting Permissions

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