Member Avatar for xgldani

Hi Everyone,

I'm new to building sites, have to make one for work. It's pretty simple/straightforward, but I got to having fun playing with it. So I have spry menus set up in it, one horizontal on all pages, & vertical ones on sub-pages.

The menus appear fine in Firefox & Safari, but are screwed up in IE. In IE, the horizontal bar submenus appear way off the left of the screen, & the vertical menus are shifted around; the colors are off (they are supposed to turn white in hover but are just white all the time) and it's broken into 2 columns instead of 1.

I have what is completed of the site online at smuggsuniversity.com. If you check it out in IE & another browser, you can compare the differences to see the problems probably better than I've explained them. If you go to the horizontal spry "SFU" & click on any of the 4 submenu items, it will take you to a page where you can see the vertical menu problems.

I'm sure that in all my playing around I managed to delete or change something in my CSS to cause the problem. But I can't figure out what I need to change to get it fixed. Everything I've tried has made it wrong in FF & Safari. If anyone would be willing to take a look & let me know what you think, I'd really appreciate it. It's an employee website so I guess I can just tell them to use FF, but I've worked pretty hard on this & would rather have it done right!

Thanks for any help/advice you can provide!

  • 3 Contributors
  • 2 Replies
  • 106 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Ritesh_4

Dani AI

Generated

Notes for (and thanks to and for the pointers): IE-only menu oddities usually come from one of three things — malformed markup, cascade/order problems that override the Spry styles, or IE-specific layout/z-index behaviour. Start with markup and stylesheet order before touching the Spry JS.

Quick checklist (high ROI)

  • Validate the HTML (check for missing/incorrect ul/li closes): https://validator.w3.org/
  • Ensure a standards DOCTYPE is used (for example <!DOCTYPE html>).
  • Confirm the Spry CSS/JS are actually loading and that your custom CSS isn’t unintentionally overriding Spry rules (look for broad a, ul, or li rules declared after Spry).
  • Use IE’s F12 tools to inspect computed styles and see which rule wins.

Concrete fixes to try (apply only to the menu container so other browsers aren’t affected)

  • Force IE layout and proper stacking:
.MenuBar, .MenuBar ul {
  position: relative;
  zoom: 1; /* triggers hasLayout in older IE */
  z-index: 1000;
}
  • Prevent submenu wrapping for horizontal bars:
.MenuBarHorizontal ul {
  white-space: nowrap;
}
  • Make hover styles specific so they aren’t overridden:
.MenuBarVertical li a { color: #333; }
.MenuBarVertical li:hover > a, .MenuBarVertical a:hover { color: #fff; }

If those tweaks break other browsers, isolate them into an IE-only stylesheet (conditional comments for older IE) so the fix only targets the problematic engines. If problems persist after these checks, reproduce the menu markup and minimal CSS in a small test page — that almost always makes the culprit obvious.

Recommended Answers

All 2 Replies

Member Avatar for teedoff

Without your code or a link to your site, its hard too tell whats going on.

oops didnt see your site typed in...you can enclose that in the link tags using the little blue icon above.

Edited by teedoff because: n/a
Member Avatar for Ritesh_4

It could be a problem with the javascript file/s in use or a missing css value somewhere, IE does have some issues concerning js/css files sometimes... try get some help from specialized Spry forums or read this:
or this:

Edited by Ritesh_4 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.