CSS - Problems with lists in IE, Opera and Firefox

2008-03-16

I am setting up a navigation using an unordered list, but I am tearing my hair out trying to find an easy way that will work in all browsers to have one bit of text on the right hand side of the anchor tag and another bit on the left hand side of the anchor tag. So far all my attempts have failed. I've tried putting the text that I want on the right in a div and span tags (on separate attempts) and floating it to the right then adding a nevative bottom margin to push it up, but either Opera, Fire Fox or IE will show incorrectly when any of the other two display it correctly. It'd be nice to have a way to target Firefox in CSS like you can with IE becuse it's being such a pain.

I am looking for something like this

<ul>
<li><a>Text on the left Text on the right</a></li>
<ul>

I've tried putting the text on the right into a div tag and then floating it to the right, and then adding a negative bottom margin but Firefox doesn't like that and nor does Opera. When I take the negative bottom margin away, Opera displays it fine, and both bits of text are lined up horizontally, but not in IE or Firefox

<ul>
<li><a>Text on the left <div>Text on the right<div></a></li>
<ul>

I also tried something like this where the text to go on the right side goes in a div outside of the anchor tag (in the HTML) but when I float it to the right and use padding to line it up visually with the text on the left it works fine in Firefox and Opera, but not IE6

<ul>
<div>Text on the right<div>
<li><a>Text on the left</a></li>
<ul>

So any suggestions on how I can get one bit of text on the right hand side in an anchor tag and another bit on the left (obviously the width is such that there would be a gap in between) then I'd be grateful. Thanks so much in advance!

FredVaux.com | LightFused.net

Nutrox · 2008-03-16 #2

Something like the following should work, but it depends how you have you li elements styled really:

XHTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
    <title></title>
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="content-language" content="en-gb"/>
    <meta http-equiv="imagetoolbar" content="false"/>
    
    <meta name="mssmarttagspreventparsing" content="true"/>
 
    <style type="text/css">
        ul, li
        {
            margin:0px;
            padding:0px;
            list-style:none;
        }
        li
        {
            width:200px;
            text-align:right;
        }
        li span
        {
            float:left;
        }
    </style>
 
</head>
    
<body>
 
    <ul>
        <li><span>Left</span> Right</li>
        <li><span>Left</span> Right</li>
        <li><span>Left</span> Right</li>
    </ul>
 
</body>
 
</html>

flashkicks · 2008-03-16 #3

Wow, thanks nutrox. I can't beleive that simply swapping the text align to right and putting the first bit of text in a span, and then floating that solved it. I don't know what it is with right floats. Everything always seems to get messed up with right floats.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:


	Ultrashock Forums > Development > Client Side • CSS - Problems with lists in IE, Opera and Firefox	Member Blogs

	flashkicks	2008-03-16 #3
	Wow, thanks nutrox. I can't beleive that simply swapping the text align to right and putting the first bit of text in a span, and then floating that solved it. I don't know what it is with right floats. Everything always seems to get messed up with right floats.