Problem with menu image

swornavidhya_m

The size of the image i'm using in the background for <a> element is of width:130px and height:25px. Since <a> element is within <li> and it will act as menus. The problem is that when i run my sorce, the image gets displayed according to the contents of the <a>. How to set the background image for all <a> with width:130px and height:25px. My html code is : ***************** <html> <head> <meta name="GENERATOR" content="Microsoft FrontPage 6.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Try Web Page</title> <link type=text/css rel=stylesheet href=css/style.css> </head> <body> <div id="container"> <div id="top"> <div id="header">Inside Header Top Container</div> <div id="nav"> <UL> <li><a href=#>Home</a></li> <li><a href=#>About Us</a></li> <li><a href=#>References</a></li> <li><a href=#>Contact Us</a></li> </UL> </div> </div> <div id="main"> <div id="left">Inside Left Main Container</div> <div id="right">Inside Right Main Container</div> </div> <div id="footer">Inside footer Container</div> </div> </body> </html> CSS Part of code is: ******************** #nav { text-align:center; } #nav ul { list-style-type:none; } #nav li { width:200px; border:1px solid red; display:inline; } #nav a { background-image:url("../images/leftlinkbg1.jpg"); background-repeat:no-repeat; text-decoration:none; }

Lost User

The answer is in your question itself. I have modified your code as below.

#nav a
{
background-image:url("../images/leftlinkbg1.jpg");
background-repeat:no-repeat;
text-decoration:none;
width:130px;
height:25px;
}

The above solution is only for the situation if you want to fix size of all the that is coming under nav. And consider one point that the height and width is applied to only those elements which has image binded line #nav a. HTH

Jinal Desai - LIVE Experience is mother of sage....

swornavidhya_m

Thanks Desai, I tried with but failed. #nav a { background-image:url("../images/leftlinkbg1.jpg"); background-repeat:no-repeat; text-decoration:none; width:130px; height:25px. } is also not working. Blinking what to do further. Also, if i download any sample which contains background-image set for html elements in external stylesheet, is working fine. But when i try to code myself the same sample set with background-image property, It is not working. IF i copy and paste the same code, it is working fine. Also when i do hand-code the sample, differences occurs from browser to browser. How to overcome it too. M.Sworna Vidhya

Graham Breach

You can't set the width or height of inline elements like <a>, so you need to add display: block. Adding float: left to the <li> makes the blocks line up horizontally, and overflow: auto in the <ul> prevents items after the list flowing to the right of it.

#nav ul
{
list-style-type: none;
overflow: auto;
}

#nav li
{
width: 200px;
border: 1px solid red;
display: block;
float: left;
}

#nav a
{
background-image: url("../images/leftlinkbg1.jpg");
background-repeat: no-repeat;
text-decoration: none;
width: 130px;
height: 25px;
display: block;
}

swornavidhya_m

Thank you. It works for me. M.Sworna Vidhya