Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Css Padding With Rtl Direction In Firefox

This is a discussion on Css Padding With Rtl Direction In Firefox, within the CSS section. This forum and the thread "Css Padding With Rtl Direction In Firefox" are both part of the Designing Your Website category.

 
 Reply to this topicStart new topic
> Css Padding With Rtl Direction In Firefox
marSoul
post Feb 14 2008, 05:39 PM
Post #1


Fresh Squeezed
**

Group: Members
Posts: 14
Joined: 13-February 08
From: Tehran - Iran
Member No.: 15
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 :

CODE
#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 ?!
Attached File(s)
Attached File  FF.jpg ( 43.18K ) Number of downloads: 26
Attached File  IE_OPERA.jpg ( 38.55K ) Number of downloads: 18
 


--------------------
Designing for Communicating

Datis Design Website
Datis Design Weblog
Go to the top of the page
 
+Quote Post
Marc
post Feb 14 2008, 05:44 PM
Post #2


Squeeze Machine
*****

Group: Members
Posts: 573
Joined: 13-February 08
From: Scotland, UK
Member No.: 4
This is just a hit or a miss but have you tried margin instead of padding? I have never used the direction attribute.


--------------------
Thanks,
Marc
Go to the top of the page
 
+Quote Post
marSoul
post Feb 14 2008, 05:49 PM
Post #3


Fresh Squeezed
**

Group: Members
Posts: 14
Joined: 13-February 08
From: Tehran - Iran
Member No.: 15
yes, tried, but dont know why firefox act like this !!!
IE and Opera render it correctly !!


--------------------
Designing for Communicating

Datis Design Website
Datis Design Weblog
Go to the top of the page
 
+Quote Post
paintingtheweb
post Feb 14 2008, 06:54 PM
Post #4


Squeezing
***

Group: Members
Posts: 70
Joined: 14-February 08
From: Las Vegas, NV
Member No.: 122
QUOTE (marSoul @ Feb 14 2008, 02:49 PM) *
yes, tried, but dont know why firefox act like this !!!
IE and Opera render it correctly !!


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


--------------------


"Always program as if the person who will be maintaining your program is a violent psychopath that knows where you live." Martin Golding
Go to the top of the page
 
+Quote Post
marSoul
post Feb 14 2008, 07:01 PM
Post #5


Fresh Squeezed
**

Group: Members
Posts: 14
Joined: 13-February 08
From: Tehran - Iran
Member No.: 15
I have tried all ways !
Firefox will add the whole padding to one element !!!


--------------------
Designing for Communicating

Datis Design Website
Datis Design Weblog
Go to the top of the page
 
+Quote Post
paintingtheweb
post Feb 14 2008, 07:09 PM
Post #6


Squeezing
***

Group: Members
Posts: 70
Joined: 14-February 08
From: Las Vegas, NV
Member No.: 122
QUOTE (marSoul @ Feb 14 2008, 04:01 PM) *
I have tried all ways !
Firefox will add the whole padding to one element !!!


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.


--------------------


"Always program as if the person who will be maintaining your program is a violent psychopath that knows where you live." Martin Golding
Go to the top of the page
 
+Quote Post
Linda
post Feb 14 2008, 07:12 PM
Post #7


Co-Founder
*******

Group: Co-Founders
Posts: 2,761
Joined: 13-February 08
From: Pink House in USA
Member No.: 3
QUOTE (paintingtheweb @ Feb 14 2008, 07:09 PM) *
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.

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.


--------------------
Maine-ly Web Design | My Photography | Twitter ME
Check out Stumbleupon
Go to the top of the page
 
+Quote Post
marSoul
post Feb 14 2008, 07:21 PM
Post #8


Fresh Squeezed
**

Group: Members
Posts: 14
Joined: 13-February 08
From: Tehran - Iran
Member No.: 15
here is the whole code for navigation :

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


--------------------
Designing for Communicating

Datis Design Website
Datis Design Weblog
Go to the top of the page
 
+Quote Post
ejg
post Feb 14 2008, 08:23 PM
Post #9


Squeezing
***

Group: Members
Posts: 75
Joined: 14-February 08
Member No.: 86
You can replace the display inline with a float: right and move the padding to the other side.

CODE
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.
Go to the top of the page
 
+Quote Post
marSoul
post Feb 14 2008, 08:32 PM
Post #10


Fresh Squeezed
**

Group: Members
Posts: 14
Joined: 13-February 08
From: Tehran - Iran
Member No.: 15
Many Many Thanks !
It worked ! dance4.gif dance4.gif


--------------------
Designing for Communicating

Datis Design Website
Datis Design Weblog
Go to the top of the page
 
+Quote Post
« Next Oldest · CSS · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   8 Bridges 276 20th February 2008 - 06:45 PM
Last post by: Daygon
No new 20 Scott-S 864 5th July 2008 - 02:56 PM
Last post by: thewal
No New Posts   10 kela 365 16th April 2008 - 07:27 AM
Last post by: Craigboy87
No New Posts   3 Jason 169 14th April 2008 - 01:38 PM
Last post by: c010depunkk
No New Posts   6 Linda 130 2nd May 2008 - 10:21 AM
Last post by: Linda