I have another problem for the same site I have been working on (http://doctype.com/ie7-when-one-div-grows-sibling-div-does-accomodate).

I think I have solved all of the issues for Webkit and IE I have two small gotchas in Firefox.

  1. If you go to any page on the site and wait 60 seconds a dialog box will appear. In every other browser the text shows up just fine. In Firefox the content of the box doesn't show up at all. I am using a standard jquery ui dialog box and I have used them in the past without problem.
  2. Also have a minor issue rounding the top left and top right corners of the navigation.

2 answers

This was chosen as the best answer

I figured it out. It took me a few days to find the time and patience required to figure the darn thing out.

The Solution

Open your jqueryui css file and go to line# 443 which should be the ".ui-dialog" selector. Remove "overflow: hidden".

The Explanation

I created a custom jqueryui style sheet for this project. I stated with a default theme and changed the colors. I never added anything in there to change the overflow property. I even removed all of the other style sheets just to make sure there wasn't a conflict. The problem is definitely in their style sheet, not sure why or how this hasn't been addressed before.

Hopefully someone else can use this answer before having to go through many many lines of code.

Answered over 7 years ago by Patrick Rauland
danwellman 5600
  1. To fix the dialog problem, try changing setTimeout to use the more modern anonymous function format, e.g.

    setTimeout(function() { $("#popUpReminder").dialog("open"); }, 60000);

    If that doesn't work, try stripping the code right back so that the dialog opens when the page loads to see whether the content is displayed in the popup. If it isn't, try removing some of the configuration options. Basically, strip it right back till it works, then gradually add the functionality back in to see what is causing the issue. Also try removing the slidedown.js script to see if that is conflicting somehow...

  2. To round the corners of the navigation menu, apply the -moz-border-radius to the <ul> instead of the <nav>. You then just have a problem with the hover/currentpage state on the very first item, so you can probably use :first-child and :first-child:hover or :first-child a and :first-child a:hover perhaps (have a play, see what works...)
Answered over 7 years ago by danwellman
  • Well you certainly pointed me in the right direction. I found out that if I remove the code that controls the buttons that go in the dialog box that it works. I'm guessing that there is some conflict (it isn't the slidedown.js). Any further suggestions? Patrick Rauland over 7 years ago