Menu is driving me crazy!

[user123]

I made this website for a friend: http://escapexc.com/

and the top menu bar wraps in FireFox and on a Mac. I know it has something to do with the .horizontalcssmenu ul li a{ width but when I adjust it, I can get it to fit on one line, but then it looks like crap because it's too short in IE!

There must be a work around for this - can anybody PLEASE help?!

[bluewalrus]

Adjust the width or padding of that class. Your current width + padding exceeds your table and content width. Your table width also exceeds your content width.



.horizontalcssmenu ul li a{
width:96px; /*from 110 */
}


You can make a statement after if it is still wrong in IE.

for example



<title>Escape XC Paragliding Adventures & Tuition</title>
<link rel="stylesheet" type="text/css" href="csshorizontalmenu.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="csshorizontalmenu.js">

<!--[if ie]>
<style type="text/css">
.horizontalcssmenu ul li a{
width:110px; /*from 96 */
}
</style>
<![endif]-->

/***********************************************


I cant test IE.

Your image isn't here http://escapexc.com/images/menuarrow.gif.

[user123]

Thank you for your reply bluewalrus.

The statement for IE doesn't seem to work though. I tried scouring the internet for a similar IE statement but couldn't find one. Any other suggestions?

[user123]

Oh yeah, I omitted the menu image on purpose, because it's ugly! I guess I should make it a transparent gif or something.

[bluewalrus]

Not sure try fiddling with it. I can't see the ie problem so I can't advise there.

[simcomedia]

I believe your problem is the padding for your menus. Keep in mind that your padding adds to the width. You have the width of your li elements at 110px plus 8px left and 8px right padding. That's actually 126px in width for each one. You have 7 menu li's which would total 882px. Your #content wrapper is set at 780px. Therefore there's no room for the menu to have 7 items without wrapping...which is what it's doing. Remove the padding and see how it works. Should fit with 10px to spare.

[user123]

I believe your problem is the padding for your menus. Keep in mind that your padding adds to the width. You have the width of your li elements at 110px plus 8px left and 8px right padding. That's actually 126px in width for each one. You have 7 menu li's which would total 882px. Your #content wrapper is set at 780px. Therefore there's no room for the menu to have 7 items without wrapping...which is what it's doing. Remove the padding and see how it works. Should fit with 10px to spare.

Awesome, thanks so much for your help! It's fixed! Thanks again! :D