Member Avatar for borkodb

Hi everybody! I'm new here, so don't blame me if i posted in the wrong topic.
I made some vertical spry menu with Dreamweaver, but when I look it with IE, it looks different (worse) than it looks with Firefox for example. I see in the javascript file,that there are some "hacks" for IE, which are supposed to fix this problem, but they obviously dont.
Can somebody tell me where is the problem, and how to fix it.
If u look the site with firefox - that's what i wanted to be. if u look it with IE, you'll see the difference.

Edited by borkodb
  • 3 Contributors
  • 2 Replies
  • 123 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by rotten69

Dani AI

Generated

Browsers normally render the same HTML/CSS differently for three practical reasons: document mode (DOCTYPE or X-UA-Compatible), a JavaScript error stopping Spry’s IE fallbacks, or CSS differences on UL/LI/anchor defaults. ’s note that Dreamweaver added IE “hacks” but they don’t work usually means IE is either running in quirks/emulation or Spry’s script never finishes (so the CSS/JS fixes aren’t applied).

Quick, practical checklist to narrow the cause:

  • Ensure a standards DOCTYPE is at the very top (for example <!DOCTYPE html>). Quirks mode changes box model and default margins.
  • Add an X-UA-Compatible meta early in the head: <meta http-equiv="X-UA-Compatible" content="IE=edge">.
  • Open IE’s dev tools (F12) and confirm Document Mode and Browser Mode are standards. Watch the Console for JS errors — a single error will abort Spry’s code.
  • Guard against console.log / trailing-comma JS errors that break older IE. A small guard prevents console issues:
if (typeof window.console === 'undefined') {
  window.console = { log: function() {} };
}

Concrete CSS fixes that often resolve visual differences: reset UL/LI and make anchors fill the menu item so padding/height is consistent.

ul.SpryMenuBarVertical, ul.SpryMenuBarVertical ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.SpryMenuBarVertical li a {
  display: block;
  padding: 8px 12px;
  line-height: 1.2;
}

If you must target old IE (7/8) to trigger hasLayout or emulate inline-block behaviour, use a conditional stylesheet tweak:

<!--[if lte IE 8]>
<style>
.SpryMenuBarVertical li { zoom: 1; display: inline; }
</style>
<![endif]-->

was right that generated code can be brittle; was right that small CSS changes often fix it. Start with DOCTYPE/Document Mode and JS console checks, then normalize the list/anchor rules above. If problems persist, compare computed styles in both browsers (margins, padding, display, width) and fix the difference; consider replacing Spry with a maintained solution for long-term stability.

Recommended Answers

All 2 Replies

Member Avatar for lps

Actually, I suggest you don't ever have dreamweaver done all the jobs for you. My suggestion is: why don't you try google for a CSS named 'superfish'. It is a amazing css which work in most major browser including safari, IE 7-9

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.