Menu graphic, FF & IE

Need to put an image at the top of a menu bar (and bottom), above links listed as:

<a href=“sample.htm” class=“LMenu”>Menu link</a>
<a href=“sample2.htm” class=“LMenu”>Menu link2</a>

.LMenu:link {background: #EEEEEE; color:#666666; border: 1px solid #E5E5E5; border-top:1px solid #FFFFFF; text-decoration: none; font-size: 13px; font-family: Arial, Helvetica, sans-serif; height:15px; width: 170px; padding-left: 10px; padding-top: 5px; padding-right: 5px; padding-bottom: 3px; display:block;}

Trying to place the gif as css:
.LMenu {background-image: url(menu.gif); background-repeat: no-repeat; background-position: left top; background-attachment: scroll; height:5px; width: 170px; display:block;}

But having trouble with FF & IE widths aligning with the links.
(trying div, span, font classes)

Question : must everything (including links) go in a table if there is a graphic? Placing the gif in its own:

<td><img src=“menu.gif” width=“170” height=“15”></td>

Hmm, it should work. But looking at your code above, there’s no reason to be putting this bg image on a link. Just place your links inside a div of width 170px. Leave 5px padding at the top of the div and place the image as a background image on that div. Then have an inner div with 5px padding at the bottom, and have the bottom image as a background on that.


If you want to add a bottom border to the top cap then you have to over-ride the !mportant rule that I switched the borders off with.

eg.{border-bottom:1px solid #fff!important}

This code you posted is invalid:

<li class="top"><b></b></li>
[B]<a href="#" class="2ndclass">Sample Heading Link</a>[/B]
<li><a href="#">Link goes here</a></li>

It should be:

<li class="top"><b></b></li>
[B]<li class="2ndclass"><a href="#">Sample Heading Link</a></li>[/B]
<li><a href="#">Link goes here</a></li>

However if you want it as a heading then you should a suitable heading tag of the correct level depending where on the page it is.

<li class="top"><b></b></li>
 [B]<h3><a href="#">Sample Heading Link</a></h3>[/B]
 <li><a href="#">Link goes here</a></li>

It won’t need a class because you can target it uniquely via the heading tag.

e.g. li h3{margin:0; etc.........} li h3 a{ etc.........}

What about if the bar is light grey?
(lack of spacing on bottom cap topside)

Trying to keep the same look, how can the space be added, refereincg: li {
border-top:1px solid #fff;

Also, since the li is defined altogether, can a second class be added simply from css outside of the this css (compatibility question)?

<li class=“top”><b></b></li>
<a href=“#” class=“2ndclass”>Sample Heading Link</a>
<li><a href=“#”>Link goes here</a></li>

hmm… sounds like a heading to me :slight_smile:

Just use a class if you don’t want to use the heading tag for some strange reason. li.newclass {margin:0; etc.........} li.newclass  a{ etc.........} 			 		

<li class="top"><b></b></li>
[B]<li class="newclass"><a href="#">Sample Heading Link</a></li>[/B]
<li><a href="#">Link goes here</a></li>

Didn’t know the css could go .5px line height (IE 1 px seems little fat on top of bottom cap)

It can’t :slight_smile: There is o such thing as half a pixel. It probably gets rounded to zero in some browsers and maybe 1px in others.

The menu already has a white border on the bottom of each list item so you will get 2px if you apply a 1px top border to the bottom cap as well. Just leave the bottom cap without a border.


Thanks for that!

I’m trying to figure how you are getting the base ‘cap’ to reverse.

Mine appears exactly like the top cap (no 180 degree flip)

I assume its in the background-position? (didn’t know this could be done!)

Otherwise I’ll separate the background images out.

I see views in FF 3.6.8 but prior to this any idea ?


I’ve just made a couple of changes and it should work on everything from ie6 upwards.


That looks about ideal. Any ideas on browser compatibility (versions)… everything?"


I’d be surprised if it doesn’t work in all versions of Firefox.

here’s a browsercam view.

Ignore the IE images as they are showing a black line which isn’t there natively.

I’m saying that even with the above css, the background width for the links is different for FF than for IE. Which poses a problem for the fixed width gif. It ends up being too narrow or too wide, depending on the browser.

Either the gif must expand/contract, which in this case doesn’t seem likely, or the link css must be the same for FF as for IE. But this does not force this:

width: 170px; display:block;


It uses one single image here:

It’s less than 1k and caters for any width up to 2000px which is enough for anyone.:slight_smile:

The single image is then manipulated via the background position to show the relevant parts as required. It saves using multiple images and saves on http requests and paints all images immediately.

The top left corner is position 0 0 and then some padding is added to the left of that element to preserve the left corner.

Then the top right corner is placed at background-position:100% 0 in the inner element to show the right top corner. This image doesn’t lay on top of the left corner because we preserved that with some left padding on the parent.

The bottom corners are exactly the same except we use background-position 0 100% and background-position:100% 100% respectively to show the correct parts of the image.

Just copy my image and use that and you won’t need to change anything.:slight_smile:

You could use a background image that is much larger than needed, so that it will accommodate a link of any width. But it is still unclear what visual result you are aiming for, so it’s hard to help you. Could you post an image of what you are aiming for?

EDIT: background images don’t resize (not in CSS2, anyhow).

There is no such property as “btm” you mean “bottom” :slight_smile:

You will rarely ever use position:relative to move elements around so don’t :slight_smile: A relative element is only moved visually and not physically and is usually used for more subtle overlapping effects. The space that a relative element originally occupied is always preserved as if the element had never moved.

Don’t use inline styling either - add a class and control it from the stylesheet. :wink:

This doesn’t want to take a position within the menu classes: {
    position:relative; top: 0px; left:15px; width:200px;

No does adjusting the following margin affect it. {
   [COLOR=Red] margin:2px 0;[/COLOR]

So how can the menus be positioned?

Again you are mis-using relative positioning and is unlikely to be what you want.

You can move elements around using margins quite easily or if you need horizontal alignment you would need to float the element.

I’d need to see your html to help any further as I don’t know where you want the element and what structure it resides in.

Can you post some html or do you have a link to the page in question?


You seem one of those people who values helping others. A sign of true intelligence.

I can see why you have “the most helpful thread”.

  • Thank you so much.

BTW - the alignment errors were caused by my adjustments to the css. Apologies for this and a few other blunders.

Apparantly FF aligns this with a jump to the right while IE aligns where it should, to the leftside of the <td>

This works in IE but not FF (wrap menu):

<div style="position:relative; top: 0px; btm: 0px; left: 15px;">

This doesn’t want to take a position within the menu classes: {
    position:relative; top: 0px; left:15px; width:200px;

No does adjusting the following margin affect it. {
   [COLOR=Red] margin:2px 0;[/COLOR]

So how can the menus be positioned for FF – without going to absolute?


Guess I could have mentioned that the image has curved corners, sorry.
Here’s the top and bottom.

So are you saying the black parts may need to expand in width if the links get longer? You could consider trying the sliding doors technique. li h3{margin:0; etc…} li h3 a{ etc…}
And what if I do need a class (no heading tag) how can I define?

Basically for the 2ndclass, wanted larger font with less of an indent.

Didn't know the css could go .5px line height (IE 1 px seems little fat on top of bottom cap) li.base{border-top: .5px solid #fff!important}


Here’s live example of what I think you are trying to do.

Just view source as the code is all in the head. I’ve kept it deliberately simple and should be obvious what’s going on but if you don’t understand then just shout.