PDA

View Full Version : Sliding Doors Problem In Safari



.Darkman
Jun 10th, 2009, 04:32 AM
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 :


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


.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) :


.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,

abduraooft
Jun 10th, 2009, 10:20 AM
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?

.Darkman
Jun 10th, 2009, 10:23 AM
I've not uploaded the page anywhere..
Its still in my computer...
Will uploading help ?

.Darkman
Jun 10th, 2009, 10:57 AM
I've uploaded it here : http://gotchance.com/gc2/

abduraooft
Jun 10th, 2009, 11:10 AM
Try adding line-height:1.4em; to .menu ul li a

.Darkman
Jun 10th, 2009, 11:18 AM
Thank, that worked like a charm.

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



#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 ?

Kristofa
Jun 10th, 2009, 11:31 PM
Try this:


#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 :)

.Darkman
Jun 11th, 2009, 05:49 AM
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..