I have converted an English to Arabic however I am having one minor CSS issue on IE 7. Bullet points in the list items are displaying at the bottom of the list for items that are longer than one line, see example below

Does anyone see a problem with my CSS :

#bodyblock ul {
 margin:0;
 padding:0 0 5px;
}
#bodyblock li {
 direction:rtl;
 font-size:1.6em;
 margin:0 15px 0 5px;
 padding:0;
 width:380px;
}

Screenshot

3 answers

0
points

I'd use a background image that has a specific background-position. That way, the bullet always stays at the same place even if there's a lot of text in the li.

#bodyblock li {
 list-style:none;
 background: url(../img/your-bullet.jpg) no-repeat 0 6px; // the important part :) I wrote 6px but it could be any value you want
 direction:rtl;
 font-size:1.6em;
 margin:0 15px 0 5px;
 padding:0;
 width:380px;
}
Answered almost 7 years ago by Bernard Chhun
danwellman 5600
0
points

Difficult to say without being able to play with the live page, but have you tried using padding instead of margin on the li elements?

Do you still get the same problem if you set to ltr instead of rtl?

Answered almost 7 years ago by danwellman
  • @danwellman - Your "answer" is two questions. How is that an answer? Abinadi Ayerdis almost 7 years ago
  • a few probing questions can sometimes help the OP solve the problem themself. And they were questions in the form of suggestions. danwellman almost 7 years ago
0
points

Do you have carriage returns at the end of those lines? If so, then the ul will consider those "new lines" new items and give them bullet points. If you need items to wrap without adding a bullet point, you'll need to give the ul a width so that the lines will wrap (since word-wrap isn't coming until CSS3).

Answered almost 7 years ago by tahdhaze09