Forum Moderators: not2easy
My problem is that it don't look so fine in opera and nn, but in ie it displays the way i want it.
How i have made the menu?
<a href="exampellink.asp" title="Link"><img src="images/meny_left.gif" alt="" width="7" height="15" />Link<img src="images/meny_right.gif" alt="" width="7" height="15" /></a>
And the css:
div.mainmenu a{
color:white;
font-size:12px;
vertical-align:bottom;
text-decoration: none;
background-image: url(meny_center.gif);}
div.mainmenu a.active{
background-color:#A0C8DF;
}
div.mainmenu a:hover, div.mainmenu a.active:hover{
background-color:#DEE7EC;
}
So i have a tranparent .gif on each side of the link text, and a tranparent .gif as background.
The problem is that in opera and nn the background-image and the images don't displays correctly, or the way i want it.
How can i make the box around the link text to be the same size as the images, so that the background image ( same size as the images) displays correctly.
left.gif bg.gif right.gif
____
[ ____ ]
Sorry for my bad english, and i hope you understand what i mean!
Is your menu meant to be horizontal (across the page) or vertical (up/down the page)
the reason I ask is that if it is vertical you can use display: block for your links then give them width and height attributes so there would be possibly no need to use transparent gifs at all.. you could use padding left and right to make the space at either side.
there is a good article on formatting menu links at alistapart [alistapart.com] there is a full example at the bottom of the page.
If this is not what you're after then post again
I think possibly that the line-height attribute would answer your original question, but I'm not sure about the support for it as I've not used it
Suzy
My menu is meant to be horizontal.
The gif's is not all transparent, it's the left and right side of the button.
In the middle, where the text is, the background is the up, and downside of the button.
Hmm, hard to explain this, but i hope you got the picture.
In this way, the "buttons" adjust to the width of the text.
But the problem is that in opera and nnn, the middle part of the "button", don't displays correctly, or the way i want it....
:)
Opera definitely doesn't support background images on Pseudo Classes, in the case the link class a
NN can be patchy..
but borders will work so try just having the middle bit change on hover with the top and bottom borders matching in to your gifs at the sides...
Suzy
