Member Avatar for xiakhan

Hello every one.

I am getting annoyed by the menu part in IE6.
I am developing a Site and my client wants the site to be perfect in all browser. This is where my head ache starts.

I have used Horizontal Spry for Navigation its perfect in all browsers, but the vertical menu I have used for the images behaves horrible in ie6.

I have spent a lot of time fixing it, tried using another method but it just won't fix.

I would be grateful if anyone could help me with this.
Here is the link to live demo.

Thanks in Advance

  • 2 Contributors
  • 4 Replies
  • 87 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by xiakhan

Dani AI

Generated

A quick summary tied to the thread: reported a Spry vertical menu that rendered badly in IE6 while the horizontal Spry nav was fine. reminded that third-party code can reveal browser quirks. The final post shows the problem went away after restoring Spry�s generated CSS and reducing custom overrides, which points to a CSS conflict rather than a Spry engine bug.

Common IE6 causes for vertical-menu breakage that are worth checking after a restore: elements that never get IE�s "hasLayout", positioned children losing their stacking context, anchor sizing (hover area), and PNG/positioning oddities. A practical debugging workflow that avoids reintroducing the original problem: build a minimal HTML/CSS test of the Spry menu (no custom rules), confirm it renders in IE6, then add custom rules back a few lines at a time until the break reappears. Use an IE6-capable debugger or the IE Developer Toolbar and keep IE6-targeted fixes isolated in a conditional stylesheet so the main styles stay standard.

A small, commonly effective IE6 tweak (apply only for IE6 via conditional comments):

<!--[if lte IE 6]>
<style type="text/css">
/* trigger hasLayout and ensure proper positioning in IE6 */
#menu, .menu { zoom: 1; }
.menu li     { position: relative; }
.menu a      { display: block; }
</style>
<![endif]-->

Keeping legacy fixes minimal and scoped makes it easier to maintain the Spry defaults while still supporting IE6 when required.

Recommended Answers

All 4 Replies

Member Avatar for xiakhan

I ll be checking and will try to reply in real time for next 6 to 7 hours. I might get a good night sleep then when it gets fixed. :(

Member Avatar for MidiMagic

When you use some company's code, you have to accept the limitations of what they produce.

Also note the following:

- You need to validate your code at the w3c validator. I saw some things that don't seem to be compliant with the transitional doctype.

- One of those things is the number without a unit of measure used as a size argument.

- Why are you specifying the obvious? Images always display in real space by pixels, unless told to display in some other way. Don't put width and height specifications in an img tag unless you are changing the displayed size of the image.

- Using pixels for sizes causes things to display in strange ways when the screen resolution or the window size changes. Use percent or em to define sizes.

- Check the actual displayed sizes of things in each browser. Remember that IE uses different methods to determine the size of something.

- Note that if you make something with a very small size in the xhtml, and then use JavaScript to put something in it that makes it larger, IE can make a mess of it the resulting rendering.

Member Avatar for xiakhan

Thanks for suggestion.

The page is going through development phase from time to time, I get to change the layout and code manually often thats why I uploaded the demo of raw code which isn't W3C validated after altering.

I tried your way but it didn't seem to work. My client agreed to left out the IE6 part currently.

Thanks for suggestions once again.

Member Avatar for xiakhan

I removed the altered CSS and replaced it with new Spry Generated CSS, but this time with less customization, which fixed the issue.

Thanks for your suggestions.

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.