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:
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.
Didn’t know the css could go .5px line height (IE 1 px seems little fat on top of bottom cap)
It can’t 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.
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:
It’s less than 1k and caters for any width up to 2000px which is enough for anyone.
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.
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”
You will rarely ever use position:relative to move elements around so don’t 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.
This doesn’t want to take a position within the menu classes:
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.
