How to align a small image within <li> tag

[smitb]

Hi,

I am a CSS/HTML novice. Can anyone please answer my question.

I am trying to insert a small image(an arrow) within an <li> tag. My problem is that I cannot right align the image.
Here is what I am trying to do.
<div class="menu">
<ul>
<li><a href="link_path">Display text<img src="flyout_arrow.gif" width="4" height="7" border="0" align="right"/></a>
</li>
</ul>
</div>


Here is the CSS used along with the html

.menu {display:block; font-family: arial, helvetica, sans serif; font-size: 11px; width:175px; position:relative; margin:0; padding:0; z-index: 1000}

.menu ul li a {display:block; text-decoration:none; cursor: hand; color:#08288d; width:175px; height:22px; text-align:left;margin:0; padding:0;border:1px solid #efefef; background-color:#ffffff; line-height:20px; font-size:11px;z-index: 1000}

.menu ul li a:visited {display:block; text-decoration:none; cursor: hand; color:#08288d; width:175px; height:22px; text-align:left;margin:0; padding:0; border:1px solid #efefef; background-color:#ffffff; line-height:20px; font-size:11px;}

.menu ul {padding:0; margin:0;list-style-type: none; }

Is there any other way it can be done?

[tommurray]

Why not take out the img tag and insert the image into the css, the whole Idea of CSS is to take out all design elements leaving plain XHTML. Only images that portray information should be included within the html.

Try somthing like the below to position your arrow image and then add in your other css.

Another tip is to make your site work in Firefox and then create a ie only spreadsheet. More info can be found on creating an IE only spreadsheet by search through google for CSS conditional if statements.

Its important to make it work for Firefox as its a standards browser and does everything right. IE on the other hand is not standards based.

HTML:
 
<ul class="list">
     <li>Test</li>
</ul>
 
CSS:
 
.list{
     background: (pathtoimage.gif) right no-repeat;
     padding-right: 20px;  
}

If you have any problems give us a shout.

[drhowarddrfine]

CSS conditional if statements.

Just to be clear, CSS does not have "conditional statements". This is something that only IE would recognize while all other browsers would ignore it. The actual term for it is "conditional comments".

[drhowarddrfine]

Why do you give the image dimensions inline when everything else is in CSS? The sizes you currently have are too small to be viewable. Also, there is no attribute 'valign' for <img>.

I don't know the purpose of all the 'ul li' stuff though some of it is needed, but if you get rid of all of it, and just put height and width dimensions for the image in CSS, you'll see the image gets placed where you want.