Image appearing in the wrong place.

Posted by Luke on Stack Overflow See other posts from Stack Overflow or by Luke
Published on 2010-12-31T16:43:13Z Indexed on 2010/12/31 16:54 UTC
Read the original article Hit count: 265

Filed under:
|

I have a list that I want to precede on each line with a small image.

The CSS:

.left div.arrow{background-image: url(../images/design/box.png); float:left; height:15px; width:15px; margin-right:2px;}

.left a.list:link, a:visited, a:active {color:black; font-size:0.8em; text-decoration:none; display:block; float:left;}

The HTML:

<div class="panel">My quick links</div>
<div class="arrow"></div>
<a href="/messages.php?p=new" class="list">Send a new message</a>
<br />
<div class="arrow"></div>
<a href="/settings.php#password" class="list">Change my password</a>
<br />
<div class="arrow"></div>
<a href="/settings.php#picture" class="list">Upload a new site image</a>
<br />

As you can see, each image should go before the writing. On the first line, the text "Send a new message" has the preceeding image. However, each line afterwards has the image at the end. So "Send a new message" has an image at the start and finish.

It is like the images are staying at the end of the previous line. Any ideas?

© Stack Overflow or respective owner

Related posts about html

Related posts about css