Question

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?

Answer 1

Your <br /> does not clear the float it only advances download a specific number of pixels listed in your CSS – I would guess 8 pixels down and that does not clear the 15 pixel floating background-image in the divide on the left.

You need something like <br style=”clear:left”/> or <br style=”clear:both”/> the style=”clear:left” will advance below the last floating element.

For semantics you could style a LI to be a block and have a background image. If ../images/design/box.png is greater than 15 pixel make sure you use the overflow style.

Update

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

would be the none semantics solutions