The Web Squeeze: Css Padding With Rtl Direction In Firefox - The Web Squeeze

Hi

Please help me with this :

I have created a blog with wordpress, i have created a navigation menu with list items, if you see the screenshots you will see that in IE and OPERA it looks ok, but in FF it doesn't !

The problem is that the texts are in persian language which i use rtl direction in css, but FF is acting strange with this ! it adds all the paddings to the right side of the menu !

these are css codes for navigation :

#nav {
	background-image: url(images/menubg.jpg);
	width:741px;
	height:30px;
	background-repeat:no-repeat;
	margin:10px auto;
	padding:12px 0;
}
ul#nav-links li {
	direction:rtl;
	display:inline;
	list-style:none;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:18px;
	padding-left:110px;
}

Is this firefox bug ? or am i doing something wrong ?!

This is just a hit or a miss but have you tried margin instead of padding? I have never used the direction attribute.

yes, tried, but dont know why firefox act like this !!!
IE and Opera render it correctly !!

marSoul, on Feb 14 2008, 02:49 PM, said:

maybe try using percentages for the width of the <li>'s instead of using the fixed padding?

I have tried all ways !
Firefox will add the whole padding to one element !!!

marSoul, on Feb 14 2008, 04:01 PM, said:

well what I mean is make the ul 100% of the #nav div and then for each <li> use width:25%; instead of the padding: 110px and then just add text-align: center.

paintingtheweb, on Feb 14 2008, 07:09 PM, said:

Marsoul, is this the entire code for the navigaton? Do you have the <ul></ul> bits?

If there is more code, please post it up and I'll see if I can figure it out.

here is the whole code for navigation :

#nav {
	background-image: url(images/menubg.jpg);
	width:741px;
	height:30px;
	background-repeat:no-repeat;
	margin:10px auto;
	padding:12px 0;
}
ul#nav-links li {
	list-style:none;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:18px;
	display:inline;	
	padding: 0 0 0  110px;	
}
#nav-links li a {
	color:#174974;
	text-decoration:none;
}
#nav-links li a:hover {
	color:#FFFFFF;
	text-decoration:none;
}

the problem is with direction:rtl, firefox cant render it correctly, other browsers render it right, even IE6 !
here is the link to my site : http://blog.datisdesign.com/persian

You can replace the display inline with a float: right and move the padding to the other side.

ul#nav-links li 
	list-style:none;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:18px; 
	float:right;
	padding:0pt 110px 0pt 0px;}

That displays correctly in firefox. I did not check out what that does in IE6 though.

Many Many Thanks !
It worked !