PDA

Click to See Complete Forum and Search --> : css menu bug

can_add
04-20-2007, 09:36 AM
I'm working on a website and it is my first time trying css menus. The Nav works fine in all other browsers but seems to be very buggy in IE can any one help we with a work around.

test link http://www.storybook.london.ca/design_2007/test.htm

There are some other issues with this page I know but right now I'm really just trying to fix the menu for IE.

thanks
ryanbutler
04-20-2007, 10:15 AM
For starters, you have duplicate tags in your page, such as duplicate <html>, <head> etc. Secondly, is this a CSS driven menu? If so, I don't think you'll get IE 6 or 7 to play ball completely w/out hacking the CSS to death, which will present other bugs in FF and Opeara. IE 6 & 7 both have problems pure CSS menu's, because of a pseudo-class bug.

Plus, pure CSS menu's are notoriously buggy for accessibility. You have no pre-programmed triggers to mouse behavior, among others.
ray326
04-20-2007, 12:36 PM
Plus, pure CSS menu's are notoriously buggy for accessibility.Huh?

<li><a href="#"><strong>Slippery’s Great Escape</strong></a></li><strong>
</strong><li><strong><a href="#"><strong>Pirate's Island</strong></a></strong></li><strong><strong>
</strong></strong><li><strong><strong><a href="#"><strong>Storybook Valley</strong></a></strong></strong></li><strong><strong><strong>
</strong></strong></strong><li><strong><strong><strong><a href="#"><strong>Old McDonald’s Farm</strong></a></strong></strong></strong></li><strong><strong><strong><strong>
</strong></strong></strong></strong><li><strong><strong><strong><strong><a href="#"><strong>The Enchanted Forest</strong></a></strong></strong></strong></strong></li><strong><strong><strong><strong><strong>
</strong></strong></strong></strong></strong><li><strong><strong><strong><strong><strong><a href="#"><strong>Village and Backwoods</strong></a></strong></strong></strong></strong></strong></li><strong><strong><strong><strong><strong><strong>
</strong></strong></strong></strong></strong></strong><li><strong><strong><strong><strong><strong><strong><a href="#"><strong>Frog Pond</strong></a></strong></strong></strong></strong></strong></strong></li><strong><strong><strong><strong><strong><strong><strong>
</strong></strong></strong></strong></strong></strong></strong><li><strong><strong><strong><strong><strong><strong><strong><a href="#"><strong>Springbank Park</strong></a></strong></strong></strong></strong></strong></strong></strong></li><strong><strong><strong><strong><strong><strong><strong><strong>
</strong></strong></strong></strong></strong></strong></strong></strong><li><strong><strong><strong><strong><strong><strong><strong><strong><a href="#"><strong>Accommodations</strong></a></strong></strong></strong></strong></strong></strong></strong></strong></li><strong><strong><strong><strong><strong><strong><strong><strong><strong>
</strong></strong></strong></strong></strong></strong></strong></strong></strong></ul><strong><strong><strong><strong><strong><strong><strong><strong><strong>
</strong></strong></strong></strong></strong></strong></strong></strong></strong></li>

Holy cow, man. With code like that it wouldn't surprise me if ANY browser didn't choke on that menu.
WebJoel
04-20-2007, 12:43 PM
Gee... insteaad of "<strong><strong><strong><strong>(etc.) TEXT </strong></strong><s/trong></strong>(etc.),
You could use a 'number' to indicate 'how bold' to make a text.

<a href="#" style="font-weight:600;">TEXT</a>

Valid 'font-weight' values are:

100, 200, 300, 400, 500, 600, 700, 800, and 900

with "600" essentially being the first true "BOLD", and going up incrementally thereafter.
Only incrementals of "one-hundred" allowed (e.g., cannot go "font-weight:650; for a desired value greater-than 600 but less-than 700...").

'kay?
:)