How to correctly display image in a <li> element?

sherrysunset

New Member
Ok this is simple thing. I firstly created a usual "Home" Button linking to the Home Page of the website, but the word "Home" looked too obvious. Hence I tried to insert an icon in place of that word, but its not fitting properly. I have tried some things in my css but its messing up the whole (used to create the navigation menu). The screenshot is attached. Please if someone can see whats wrong.
jbJVw.png
CSS:-\[code\] ul#menu{padding: 0px;position: relative;margin: 0;}ul#menu li{display: inline;text-decoration:solid;}ul#menu li a {color: black;background-color: #f5b45a;padding: 10px 20px;text-decoration: none;line-height: 2.8em;/*CSS3 properties*/border-radius: 4px 4px 0 0;}\[/code\]HTML:-\[code\]<ul id="menu"> <li id="Home_Link"><a href="http://stackoverflow.com/questions/15604828/Home"><img src="http://stackoverflow.com/Image_Data/Home_Icon.ico" id="Home_Icon"/></a></li> <li><a href="http://stackoverflow.com/questions/15604828/Men">MEN</a></li> <li><a href="http://stackoverflow.com/questions/15604828/Women">WOMEN</a></li> <li><a href="http://stackoverflow.com/questions/15604828/Kids">KIDS</a></li> <li><a href="http://stackoverflow.com/questions/15604828/Design">DESIGN!!</a></li>\[/code\]
 
Back
Top