No content after drop down in Safari

[White On Rice Couple]

Thank you for creating such a great web-tool.  We are trying to implement it into our site, and everything looks perfect in Firefox, but when we try to load the site in Safari, none of the blog content shows up after the drop down.  Our site where we are trying to implement it is http://www.whiteonricecouple.com.  Your help and advice is truly appreciated. Thanks.  T & D.

[imported_Ryan]

Hi,
I’d love to help, but the link you provided me does not have the menu installed currently.

If you post back once you have it running, then I’ll take another look for you.

[imported_Ryan]

Ah, I just reread the email you sent. I’ll be back with a fix for you shortly – hopefully.

[imported_Ryan]

I noticed your menu was jumping around for some strange reason, so I’ve fixed that with the following code:

[code:jjjcf0iz]#suckerfishnav a:hover, a:active {border-bottom:0}[/code:jjjcf0iz]

… Safari bug fix coming shortly – hopefully

[imported_Ryan]

That was quite tricky to fix. The culprit was hiding deep inside your CSS.

[code:2hq0j8zw]#header, #content, #sidebar, #footer, .widget {
    overflow: hidden;
}[/code:2hq0j8zw]

For some reason, the overflow:hidden was triggering some sort of error when it was immediately after the dropdown menu. I have no idea why and suspect it is some sort of errant bug in Safari rather than a coding error per se.

At any rate, I seem to be able to fix it by removing the #content from the CSS declaration. I couldn’t see any problems in IE7, Opera, FF3 and Safari when I did that, but it would be a good idea to double check as it may need to be there and I just didn’t notice whatever it was correcting for.

Final code:
[code:2hq0j8zw]#header, #sidebar, #footer, .widget {
    overflow: hidden;
}[/code:2hq0j8zw]

[imported_Ryan]

Arghhh!

That didn’t work at all. I double checked after posting and it seems that the overflow:hidden allows the theme footer to stay in view. When I removed it from #content the footer no longer displayed.

I’ll have to ask some experts about this one. I don’t know enough about the insides of Safari to be able to figure out a solution for this without recoding a whole chunk of your theme. I’ll post back tomorrow with an answer – hopefully.

[imported_Ryan]

In the process of trimming down the code for passing on to some others to look at, I noticed that the following code in the dropdown menus CSS is causing the trouble …

[code:1q7lrist]#suckerfishnav, #suckerfishnav ul {float:left}
[/code:1q7lrist]

[imported_Ryan]

Wow, this is a nightmare of a problem to solve. I seem to have sorted a quick fix on my cutdown test version by removing the float:left and replacing it with the following. When I removed the float:left the menu crushes to a zero height, so by forcing the menu into a set height it seems to have avoided the problem.

[code:3jzozk2c]#suckerfishnav {height:24px}[/code:3jzozk2c]

I’ll post back shortly once I’ve checked if it works in your full site.

[imported_Ryan]

Yep, it works.

Tested in IE7, FF3 and latest versions of Opera and Safari and couldn’t see any problems.

This is one of the trickiest CSS questions I’ve been asked yet.

[White On Rice Couple]

So I changed to code to what I think you are saying it is supposed to be.  Now everything shows up in Safari, except there are what look like bullets kind of on top of the page navigation.  Did I replace too much of the code?  Sorry for all the hassle.  You’ve been awesome to work so hard on this.

[White On Rice Couple]

Thanks for all the work you put into making this function well for us.  After moving the code around in the header.php, the original problem in Safari is cleared up and no more broken page.  The nav menu is now moved to the top of the page, but we’re happy with it there for now.  Don’t spend any more time on us, we feel guilty.  We are going to be traveling a lot over the next several weeks, so once we get back we’ll upgrade to the premium & fine tune this baby.  Thanks again for all the effort in solving our stuff.  We’re trouble makers.

[imported_Ryan]

Lol, don’t feel bad. It was actually quite helpful as I’ve learned a little more about the WebKit rendering engine from this experience.

Incidentally your site was suffering from the same problem in the brand new Google Chrome Beta browser … http://www.sitepoint.com/forums/showthread.php?t=569052

Both Google Chrome and Safari run on the same WebKit rendering engine, hence suffer from the same problem.

[Author]

Posts