IE7...not cooperating....all other browsers working fine

[pelsar]

Only IE7 throws the header menu system off to the right-off the page. the programming works fine in other browsers (got some minor errors to fix after this)

any solutions?

http://www.mazecordblood.com/dev240610/

 

[agiphone]

Not only IE7 throws the menu right, but in IE8 the list items in the menus are inline.

A quick look at your style sheet appears to use a .menu class that is positioned absolute. If this is the container for your menu, and all link lists are positioned absolute, this is not correct. The container needs to be positioned:relative in order for the menus to be positioned absolute.
That also applies to the phonetitle class.

In general, this type of construction you are using, doesn't really needs positioning. You could simply use the .phonetitle without the need of a float:left and positioning. Same applies to the .menu container.

Keep it simple, no need to complicate the style sheet and run into the sort of issues you are having.

You also use some CC's for IE that could interfere with the actual style sheet.

 

[angelwatt]

One issue I see is using span.header as a div container. You're misusing the span tag, as in it's invalid. You also have 2 div tags with an id of header. See the validator for more details. That should get you started.

 

[pelsar]

cleaned up the code

lets try again..i cleaned up the code (someone else had added "stuff") and I have now defined the problem area:

i have set up two examples:

the problem clearly seen in IE7
http://www.mazecordblood.com/temp1

and the almost solution
http://www.mazecordblood.com/temp/


the difference in the code is in the SpryMenuBarHorizontal.css

if i add "nowrap" to two places in the submenu i get what you see in temp1 if there is no "nowrap" i get what you see in temp

width: auto;
white-space: nowrap;


any ideas?

 

[agiphone]

I will refer to the second page, "temp", which looks closer to reality.
Some issues:
- .MenuBarActive seems to be part of the same <ul> as .MenuBarHorizontal and I'm not sure why you split it? Anyway, in order for z-index:1000 to be a correct rule, you need to position this <ul>. I don't see a need for positioning here and no need for a z-index rule at this point [considering my suggestions below]
- in order for the <li> in the main <ul> to be inline, you need to declare it display:inline; At this point is "squeezed" inline by the declared height of the menu container [there's also a difference of about 1px between the height of the container and the actual menu display]
- I would get rid of the white-space and declare the <a> in the secondary <ul> display:block; This will display each <a> as a block and will not wrap the links. [actually, I see you did this already]

I would suggest to simplify the whole top construction such as:
- one <div> for the phone # image
- one <div> for the menu
- one <div> for the header/image at top and img. map; it appears that the header is starting after the top phone # div and the menu is layered on top; no need to complicate things.