Opera float problem

I have a little problem. I would like the bullets to be positioned on the right edge of the div.
I made it work in IE and FF, but in Opera still doesn't work properly.

Becouse of the negative margin Opera puts bullets much higher than they should be (in the same line as link).

Need a css solution that would work in all three browsers. Help appreciated!

Code:
<div id="right">
<h1>Title right</h1>
<a href="#">Link 1<img class="imgRight" src="pic/bullet.gif" border="0" /></a><br />
<a href="#">Link 2<img class="imgRight" src="pic/bullet.gif" border="0" /></a><br />
<a href="#">Link 3<img class="imgRight" src="pic/bullet.gif" border="0" /></a><br />
</div>

CSS:
#right {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
float: right;
width: 150px;
background-color: #fff;
padding: 0;
margin: 0;
border: 0;
}

#right h1 {
color: #000;
font-size: 11px;
border-top: 1px #000 solid;
padding: 15px 0px 5px 0px;
margin: 5px 0px 0px 0px;
}

#right p {
font-size: 10px;
text-align: left;
margin: 0px 0px 20px 0px;
padding: 0;
}

#right a, #right a:visited {
color: #000;
font-size: 10px;
font-weight: normal;
text-decoration: underline;
}

#right a:active, #right a:hover {
text-decoration: none;
color: #000;
font-size: 10px;
font-weight: normal;
}

.imgRight {
padding: 0;
margin: -10px 0px 0px 0px;
float: right;
}

 

use a list.

display the list inline with list-style-type: none;

then, use the bullet as a background image. Thus, you can place using the bg position attributes.

<div id="right">
<h1>Title right</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

Code (markup):

#right li { list-style-type: none; background: url(image.jpg) no-repeat left center; padding-left: 20px; }

Code (markup):

This method will work cross browser, and is more semantic to boot.

 

the problem with list is that i already use one list in that div (a different one, with bullets infront of the text) and i think i can't use two different per div.

 

Sure you can. Give each list (ul) its own context, id or class, and style it as you wish.

cheers,

gary

 

Ok, you are right.

But if i use bullets, i can't alt tag and link them or can I?