CODEWITHSUNDEEP
cssgoogle-chromeright-to-left
rix
rix

Reputation: 10642

Chrome, right to left issue with <ul>

I'm having some issues trying to style a menu in chrome. The menu looks fine in ltr mode, but in right to left mode it breaks in Chrome.

I have a fiddle of this here: http://jsfiddle.net/YKger/

In firefox, the menu in ltr is "one - two - three", in rtl "three - two -one". It chrome it is always rendered as "one-two-three".

Any idea why this is happening, or how I can style this without the first 'li' spanning the whole menu?

Thanks,

Also, here's the code:

<!doctype html>
<head>

<style>
.navigation { float:right; }

ul#main-menu {
list-style-type: none;
direction:rtl;
}

li {
border: 2px solid black;
padding: 5px 10px;
position: relative;
}

ul#main-menu span#tail1 {
position:absolute;
bottom:-21px;
left:10px;
width:0;height:0;
border-color:#000000 transparent transparent transparent;
border-style:solid;
border-width:10px;
}

ul#main-menu span#tail2 {
position:absolute;
bottom:-18px;
left:10px;
width:0;height:0;
border-style:solid;
border-width:10px;
}

ul.inline li {
display:inline;
}
</style>


</head>

<body>
<nav class="navigation">
<ul id="main-menu" class="links inline clearfix main-menu">
<li class="menu-1501 first"><a href="/fa/blogs" title="">One</a><span id='tail1'>    </span>
<span id='tail2'></span></li>
<li class="menu-1014"><a href="/fa/node/2" title="">Two</a><span id='tail1'></span><span id='tail2'></span></li>
<li class="menu-1759 active-trail last active"><a href="/fa/projects" class="active-trail active">Three</a><span id='tail1'></span><span id='tail2'></span></li>
</ul>
</nav>
</body>

</html>

Upvotes: 3

Views: 1473

Answers (2)

itzhar
itzhar

Reputation: 13031

i think thats the easy way - you should make both of your:

ul, li 
{
direction:rtl;
}

Upvotes: 2

Bernie
Bernie

Reputation: 1489

Try this:

.navigation { float:right; }

ul#main-menu {
list-style-type: none;
direction:rtl;
}

li {
border: 2px solid black;
padding: 5px 10px;
position: relative;
}

ul#main-menu span#tail1 {
position:absolute;
bottom:-21px;
left:10px;
width:0;height:0;
border-color:#000000 transparent transparent transparent;
border-style:solid;
border-width:10px;
}

ul#main-menu span#tail2 {
position:absolute;
bottom:-18px;
left:10px;
width:0;height:0;
border-style:solid;
border-width:10px;
}

ul.inline li {
display:inline-block;
}

Upvotes: 0

Related Questions