Hi hope to get some help (sorry I'm a novice)

I have a site and I put a menu bar horizontal accross the top just under my banner. It is a div layer with a css id with interactive buttons inserted into it.

The problem I have is that they all sit on my page OK IE8 but my friend tried it on his iphone (safari) and the last button has jumped to a new line.

I have changed the width of each button but on ie8 there seems to be plenty of room to the right of the last button. It now works on his iphone but my text now looks a bit blurry. Any suggestions?

My Site is
http://www.guitarandsong.com/

Thanks

In FF3 it looks fine down to about 1000 px and then things just disappear. There is no wrap or scroll bar. At 1440+ you have scads of space to the right.

Same thing in IE7.

it's ok in ff, i don't have other browsers to test this. but what you may want to do is use dreamweaver and you'll be able to optimize for devices the faster way.

PS: your site's header is too heavy (over 600KB)!! you may want to make is a web friendly graphic. reduce the size and maintain the quality with PS.

good luck.

I take it then its down to the res of the screen its being viewed on? is there a way to make the menu always display on one line and take up the whole screen width?

The only way you're going to have your cake and eat it too, in that way, is to NOT use images for your navigation the way you are doing it. Use CSS, REAL text, and perhaps a very small repeating graphic to create the 'button' look, so it won't matter what the width of your 'button' is.

Originally Posted by LadynRed

The only way you're going to have your cake and eat it too, in that way, is to NOT use images for your navigation the way you are doing it. Use CSS, REAL text, and perhaps a very small repeating graphic to create the 'button' look, so it won't matter what the width of your 'button' is.

Thanks for the reply the help I've been getting from this forum has been brill, just hope I can repay the favour to others when I learn a bit more. Could you give any examples of "repeating graphic to create the 'button' look"

Tony

Not sure what Lady uses. I use:
~ shift above the left tab key
| shift above the right enter key
<>
<
>

And there is a ton of them you can use with the proper character code which more than likely I can not show in VB.

Thanks for all the advice. Took a different approsch to stop the last button jumping down to next line and put wrapper around all sections so if screen res poor scroll bar appears along bottom. It looks Ok on most browsers I've check now so thanks for all the help learning something new every day.