I have constructed a css menu with a tab image set in the background… all works perfect… that is unless I enlarge the text in the browser. While the rest of my page enlarges accordingly with good results, the css menus enlarge, pushing them onto 2 lines and the tab image in the background seems to cut across into the adjacent header.
My question is… is there anyway I can prevent this from happening? Either by creating a css menu that will enlarge without mishap (with the tab image set as the background)… or by preventing it from enlarging at all when clicking on the text enlarge button in the browser window?
The background image can be set to tile (repeat) vertically, or horizontally, or both so if div is enlarged background fills in space. You could also make your graphic bigger than it needs to be to account for later increase in div size.
Cheers for your reply… unfortunately the graphic I am using is tab shaped (i.e. rounded top corners) so having it repeat wouldn’t look too good i’m afraid. Is there any other way, I can either increase the background image size should it be enlarged in the browser… or… ensure that the menu doesn’t change size at all.
… unfortunately the graphic I am using is tab shaped (i.e. rounded top corners) so having it repeat wouldn’t look too good i’m afraid.
Ok, in that case your only alternative would be to create the CSS menu tabs the hard way and not use the CSS Menu action. There is a technique of using different graphics for the four corners of the div so no matter what size it is the shape stays the same.
Thanks so much… really helpful. The second alternative is the stuff I have done in the past but just wanted to do something a little different so will have a proper read up of your first link you sent, as it seems to answer what I need.
Not being great with script… it’ll be a learning curve, but I am sure (perhaps with a little help) I can achieve what I need.