Weird behaviour when highlighting list items using opera

Question

When I highlight my list items using the mouse, parts of my text just disappear or get moves towards the left side. This sometimes also happens when I click or just move the mouse over without clicking or highlighting. It only happen with list items, I used Joomla to make my website.

I tested this with Firefox, IE, Chrome and Opera, Opera is the only one that has this behavior.

I suppose this has something to do with my CSS?!?!?

Answer 1

This is a known bug in Opera Presto (12.x and earlier) that occurs when you try to apply text-align: justify styles to li items. Either don't try to justify the list item content, or use the workaround specified in this answer, i.e. instead of this:

<li>list item text</li>

you would wrap the text in a span or div, something like this:

<li>
  <span class="listItemContent">list item text</span>
</li>

and define your listItemContent class (or whatever you want to call it) as:

.listItemContent {
  display: inline-block;
  vertical-align: top;
}

That should do the trick (I just tried it in Dragonfly).

Answer 2

Here is a site that explains how you can specify certain CSS Settings for different browsers.

http://rafael.adm.br/css_browser_selector/

However, I dont see a list on the Bottom of your page. I use Chrome and the list on your Home Page does not get highlighted at all. Is this the part you are talking about?

Maybe you can give us a little bit more code here.