2 replies [Last post]
Satan
Offline
Regular
Last seen: 15 years 48 weeks ago
Timezone: GMT-5
Joined: 2004-09-07
Posts: 14
Points: 0

Hi guys,

Here is the CSS code:

ul li.head {
 margin: 0;
 padding: 0;
 border: none;

 width: 130px; /* doesn't help */
 height: 12px /* doesn't help */

 background-image: url(menuhead.gif);
 background-repeat: no-repeat;
}

And the HTML:

<ul>
 <li class="head" />
 <li><a href="#">Hail Satan</a></li>
 <li><a href="#">Item 02</a></li>
 <li><a href="#">Item 03</a></li>
</ul>

The menu head graphic comes in nicely *except* there is a gap (about 5 pixels) between it and the first text item.

But I can do it like this with no gap:

<img src="menuhead.gif" alt="" />
<ul>
 <li><a href="#">Hail Satan</a></li>
 <li><a href="#">Item 02</a></li>
 <li><a href="#">Item 03</a></li>
</ul>

Any ideas what is causing the gap in the first method ? I am using IE6.x.

Thanks.

chris_sw
Offline
Enthusiast
Leeds, UK
Last seen: 15 years 46 weeks ago
Leeds, UK
Joined: 2004-09-21
Posts: 115
Points: 0

&lt;li&gt; background-image problem

I think the gap may be being caused by the empty list item. That combination should properly produce no background image at all (and does in Firefox). What is it you want to apply a background image to? If it's the list, why not remove the empty item and apply the style to the ul tag?

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 8 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

&lt;li&gt; background-image problem

It should produce a backgound image and does in Firefox if you add a semi-colon after the height parameter.

However what's the point in having a empty li just for the image, apply it to the ul and give it top padding to move the li items doen below it such as

ul{
 margin: 0;
 padding: 12px 0 0 0;
 border: none;
 width: 130px; 
 background-image: url(menuhead.gif);
 background-repeat: no-repeat;
}

and

<ul>
 <li><a href="#">Hats are great</a></li>
 <li><a href="#">Triblys are best</a></li>
 <li><a href="#">Item 03</a></li>
</ul>