Float issue with jQuery/javascript and WebKit

Question

Hi,

I'm having a problem related to WebKit: http://demo.frojd.se/webkit/index.html

When you click "Menu item 1" it shows it's children. This renders fine in Firefox 3.5, IE8 and in Opera 10. In WebKit-browsers (Safari 4 and Chrome 3) it doesn't.

However, if I preset all the different classes and css-settings in the html, it renders correctly (without the javascript click events). I've got an URL to show you, but can't since this is my first post.

Any ideas on why this might be?

Cheers, Robin.

Answer 1

A true and ugly hack- but hey it works. try hiding and showing on the click of the <li>

for a simple test: try this in console

$('#nav li:first').hide(50).show(50)

Answer 2

I really haven't looked at the code closely, but something to look at in this situation is the padding or margin set on the menu item divs. In Safari, those are not taken into account with respect to width, so they may make the div or contents of the div expand wider than you expect, and that would cause the next element to be pushed to somewhere you don't expect it.

Not sure if that'll help, but it's some place you can look if you're still stuck.

Edit: After looking at the source using Web Inspector, it seems the divs with class = 'parentHook' are not wide enough after getting clicked on. After getting clicked on the class changes to 'parentContainer', which sets 'margin-left:-18px; margin-top:-15px;', and that seems to throw off the width of that div. In Web Inspector I changed the width of that div to 150px, and it worked as expected.