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,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    •