0

Text in a dialog div is appearing under the text on the page only in IE 7.

See this page and click on any of the text boxes on the left hand side.

I tried changing the z-index in the skin.css file on the div.dialogFromAndTo element but this has no effect.

tsukimi
  • 1,605
  • 2
  • 21
  • 36
  • 1
    You might want to check out this post http://stackoverflow.com/questions/1287439/ie7-z-index-layering-issues – antony Jun 06 '12 at 11:32

2 Answers2

1

you might need to clearFix your <div id="dialogFrom"> as there are elements in there that are floated.

this old article: http://www.positioniseverything.net/easyclearing.html explains the concept and you can find different ways to apply the clearFix method by googling it

EDIT try adding this:

div.dialogFromAndTo {
    overflow: hidden;
}

or possibly zoom: 1 to trigger hasLayout - I don't know if you have it already as I can't access your page at the moment

Luca
  • 9,259
  • 5
  • 46
  • 59
  • I tried that didnt change anything. I put `
    ` in the bottom of the div like in the article.     – tsukimi Jun 07 '12 at 02:15
  • I've edited my answers with another couple of options that might work - might not, sorry I could not test them beforehand, they're almost a shoot in the dark – Luca Jun 07 '12 at 08:51
  • Thanks for the other suggestions, i tried them , did not work. – tsukimi Jun 08 '12 at 02:00
0

I used this for IE 7 only, its a hack but works, is there any better way?

*  {
  *z-index:13; 
}
tsukimi
  • 1,605
  • 2
  • 21
  • 36
  • using the * selector is considered harmful in terms of performance, see http://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful If z-index worked to fix your layout issue, try making it as specific as possible – Luca Jun 07 '12 at 08:50
  • @luca Thats the thing , im not sure which element to target. – tsukimi Jun 08 '12 at 02:03