Member Avatar for panjewellerybox

Hi All,

I'm having problems with my spry menu bar in internet explorer.... it works fine in firefox.

The menu bar on each of my pages drops down as it is intended to in firefox but when viewed in internet explorer the drop down sections appear horizontally and not vertically??

Apologies if this has been covered already in another thread, if it has then please let me know where?

If not then my site is and any help would be much appreciated.

Kind Regards
Pandoras Jewellery Box

  • 3 Contributors
  • 4 Replies
  • 189 Views
  • 4 Months Discussion Span
  • Latest Post Latest Post by bmalvin

Dani AI

Generated

Good catch by and nice confirmation from — the symptom described (submenu items laying out side-by-side in Internet Explorer while they stack correctly in Firefox) is a classic cross‑browser layout difference. was right to close the loop on the thread; a short note about root causes and a more robust approach is helpful for future readers.

Why it happens: IE’s rendering and the way it resolves widths, floats and positioning can differ from other engines. Common contributors are: the submenu not being taken out of the normal flow (no absolute positioning), child LIs being floated or inline-level, the parent not forming a positioning context, and older IE “layout” quirks. A quick diagnostic checklist that would have narrowed it down: confirm a standards DOCTYPE, open IE’s developer tools and inspect the computed display/float/position of the submenu UL and its LI children, and see whether any global reset/skin rules are overriding expected values.

A more resilient stylesheet pattern (override Spry skin rules rather than editing core files) that stacks subitems vertically across browsers:

/* parent becomes positioning context */
ul.horizontalmenubar { position: relative; }

/* submenu is removed from flow and stacked under the parent */
ul.horizontalmenubar ul {
  position: absolute;
  left: 0;
  top: 100%;
  display: block;
  white-space: normal;
  z-index: 999;
  /* helps older IE take the intended layout */
  zoom: 1;
}

/* ensure each submenu entry occupies its own line */
ul.horizontalmenubar ul li {
  float: none;
  display: block;
}

Notes: prefer overrides loaded after the Spry CSS so upgrades/skins are preserved. For testing, use IE’s F12 tools and toggle compatibility modes to reproduce issues seen in legacy versions. The explicit-width workaround works, but the positioning + block-item approach above is generally more flexible and future‑proof.

Recommended Answers

All 4 Replies

Member Avatar for panjewellerybox

I no longer have problems, all it took was to change the css so that the drop down section under ul.horizontalmenubar ul had a value next to the width.... Apparently internet explorer doesn't like "auto" it has to have something like "11em".

Thanks to anyone that was thinking of replying or was looking for an answer on my behalf.

Phil.

Member Avatar for Lusiphur

Phil, if the issue has been resolved you may want to look into marking this thread as 'solved' so it doesn't look as though it's still an active thread ;) Glad you figured it out though.

Member Avatar for panjewellerybox

I will make sure that I do that in future, it looks like someone else may have already done that for me!

Sorry, newbie at this.

Member Avatar for bmalvin

Worked for me!
Thanks,
Barry

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.