473,390 Members | 1,292 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,390 software developers and data experts.

How to align a small image within <li> tag


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">
<li><a href="link_path">Display text<img src="flyout_arrow.gif" width="4" height="7" border="0" align="right"/></a>

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?
Oct 5 '07 #1
3 25162
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.

Expand|Select|Wrap|Line Numbers
  1. HTML:
  3. <ul class="list">
  4.      <li>Test</li>
  5. </ul>
  7. CSS:
  9. .list{
  10.      background: (pathtoimage.gif) right no-repeat;
  11.      padding-right: 20px;  
  12. }
If you have any problems give us a shout.
Oct 5 '07 #2
7,435 Expert 4TB
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".
Oct 5 '07 #3
7,435 Expert 4TB
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.
Oct 5 '07 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

by: YT | last post by:
Hello, I am this close | | to throwing myself out the window... I am trying to do a <UL><LI> series and i really really really want the disc size of the list to be nice and small. i've been...
by: Randall Sell | last post by:
OK, I am utterly stumped. The code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> ul {...
by: toylet | last post by:
Attached is some css codes for a website. It has 3 parts: top-bar, side-bar (on the left) and main-body. The top-bar has a mouseover menu called top-menu implemented via ul:hover. When the mouse...
by: abro | last post by:
Problem: A list contained in a div contains several items that are made of two parts: itemName and itemValue. ie: <div id="data"> <li>longtime1 <span> 1326 mins></span></li> <li>longtime2...
by: Udo Marx | last post by:
Hello to ciwas! Is there a way to change the bullet form, color, etc, of the element <li> under<ul> via css? Any reply will be appreciated. -- Freundliche Gruesse, Netzteil - Udo Marx...
by: Matt | last post by:
Hi, Got an unordered list with 100% width, with 5 list items of 20% width styled to fill the width of the container element. Renders fine in Mozilla, but when you change the size of the window...
by: Andrew Donaldson | last post by:
I'd welcome some help in understanding what's going on with graphical browsers in the navigation list at: http://www.bounceandtickle.org.uk/index.html (This site is not about what it might...
by: Syl | last post by:
Hello experts!! The top menu navigation bar displays perfectly in IE, but does not display properly in Mozilla or Netscape : http://checkeredshirt.com/textonly.html For some reason the non-IE...
by: GloStix | last post by:
For some reason, FF likes to put a black underline on all my buttons. No matter what I do, it has the line I've tried displaying as block and cursor, anything.. Also I've been trying to get it so...
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.