IE background images of vertical menu not lining up (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

spinningjennie -> IE background images of vertical menu not lining up (10/31/2006 22:49:34)

In IE I can't get the background images of the vertical main menu to line up correctly. It works correctly in Mozilla FF.


Here's the page.
Here's the stylesheet. (See line 118 to 250 for menu css)


Background detail:
I originally thought this was related to my vertical pop out submenu but now I don't think so. (If I remove my submenu code there's still a problem in IE with the main menu).

I want the main menu item background images to be aligned bottom right so that the viewer sees the right faded end of each image. But I also want the line in the image to be under the start of the link. It's too far to the right.

I'm really spinning on this one! Any advice much appreciated.


Regards,
spinningjennie



spinningjennie -> RE: IE background images of vertical menu not lining up (11/5/2006 21:04:44)

Thanks to all who read this and tried to help. I can now say that I've solved it, with 1 proviso that I've listed at the end of this post, though my understanding is tentative.

Here's the page.

Here's the stylesheet.

The right padding on my main menu links (#menuv a) was handled differently by IE and FF. I think that IE subtracts the padding and FF adds it. My '#menuv a' right padding was 11.5em and my #menuv was 12 em wide, and this caused spacing issues. I reduced the right padding to 0.2em (a big difference I know) and all is pretty good.

There is still a minor spacing issue in IE. The space between the main menu (#menuv) and the content (#content) is a bit too narrow in IE, though fine in FF.

Maybe someone can advise on this.

Regards,
spinningjennie




jaybee -> RE: IE background images of vertical menu not lining up (11/5/2006 21:27:46)

OK, here's the deal. IE6 can't add up. It never has been able to add up. Now, IE7 supposedly can add up so I suggest you check it in that. If you can live with a slight shift for a few weeks until IE7 rolls out fully then you won't have a problem.

If you do want to fix it then be warned, the hack you'll need to put in may very well cause it to go wrong in IE7. The only other thing you can try is to get rid of padding and use margin or border instead, it's padding IE has the problem with.



Tailslide -> RE: IE background images of vertical menu not lining up (11/6/2006 2:48:44)

It looks almost identical in IE7. Only issue I can see is that it's just slightly too wide in FF as you can see it peeping out of the container a bit.

I have to say though, and you're going to hate me for this, you're using absolute positioning to position the menu which is really not a good idea. When the browser is resized down the menu overlaps the main content (at 800px wide). I'd dump the AP and go with the float method - more reliable generally.



spinningjennie -> RE: IE background images of vertical menu not lining up (11/8/2006 20:28:22)

Many thanks Jaybee and Tailslide for the sound advice. I've made some changes but there are still 2 issues:

1. In IE 6.0 there is still extra margin on right side of #content and less space on left side of #content between main menu and content, compared with FF.

What I've done:
I've removed padding from right side of menu links(#menuv a), and instead inserted #menuv-inner div and added a margin-right to that, but no luck. I've also changed the width of #menuv to % value rather than 12 em in case that was mucking up the widths.

2. To fix the problem of the menu overlapping the text when the window is resized to 800, I've now removed the absolute positioning on the #menuv and floated it left. All seems fine in FF but in IE the #menuv is completely out of position.

Here is the updated page
Here is the updated stylesheet
I've also now attached a hack stylesheet in case that helps.

Any tips much appreciated!

Regards,
spinningjennie



treetopsranch -> RE: IE background images of vertical menu not lining up (11/9/2006 0:26:59)

You need to check that menu in various resolutions. On my screen, the menu still covers part of the main text. Netscape and Firefox. On IE 6 the menu is at the bottom of the page.



spinningjennie -> RE: IE background images of vertical menu not lining up (11/9/2006 19:01:12)

Thanks treetopsranch. You're right. I could see the menu was overlapping the content but I thought that was only happening on a very small screen. But it is still happening on the 800x600 screen which I need to allow for.

In the #menuv I've now removed the z-index: 10; but that makes no difference to overlapping either. I also know that the menu positioning is not working in IE now that I've floated it, but I don't know how to fix it.

Here's the page.
Here's the stylesheet.

Regards,
spinningjennie



treetopsranch -> RE: IE background images of vertical menu not lining up (11/9/2006 22:55:43)

You know spinningjennie, I have had so many problems with CSS menus that I made the decision not to use them. Reason: Most of them just don't work in all browsers without hacks. The ones that do seem to work are mostly simple one link menus, with no dropdowns and no special positioning.

So, I made the time saving decision to purchase a menu maker from AllWebMenu and have been very happy ever since. However, those menus use Javascript so that could be another problem if your visitors have Javascript turned off so I use a Noscript message to let them know.

This is not a commercial for AllWebMenu, it is just the program I happen to like.



Tailslide -> RE: IE background images of vertical menu not lining up (11/10/2006 2:49:04)

What you need to do to sort this out is start by sticking a border around your menu div and your content div. Then you'll be able to see their relative sizes and, for instance that the menu div stated width is too small for the actual content.

Once you can see where the divs actually are you can start fiddling with the widths and the margins to get them where you want to be!

My guess is to reduce the left margin on the menu div - alot, then reduce the width on the main content div too.

You might also want to look into min-width as a way of stopping the container div collapsing below a certain width and causing overlapping. Needless to say that min-width doesn't work in IE but if I remember rightly (haven't done this in a while) you can use plain old Width which you'll need to restrict to IE only as IE will just keep expanding the divs to encompass whatever content you use. So in effect using Width in IE is the same as using min-width in other browsers. I think that's right...



jaybee -> RE: IE background images of vertical menu not lining up (11/10/2006 3:56:03)

I used to use allweb. I still have a copy around somewhere that I haven't re-installed. It's pretty cool if you want js menus.

There are some css menus that work across browsers, you just have to know where to look. [;)]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125