0

I have this, trying to make a modal window for a website: http://jsfiddle.net/qHqvn/

I want to make it look consistent along browsers, IE6, Firefox and Chrome. However I'm making something wrong because in every browser it displays diferently. I want the red box to always take 50% of the width and height of the screen and dont let the user interact with the underneath content until they close it.

In chrome it does behave as I expect but in firefox the box is never where I want, it is centered horizontally but not vertically and if i resize the navigator window, it is pushed even further. In IE6, well, no words for it, it just wont do the work.

Anyway, it is my fault that it does not behave propperly but I just don't know what i'm doing wrong

Roger
  • 2,912
  • 2
  • 31
  • 39
  • Does this have to be a modal box of your own making? Have you looked at JQuery's Dialogs? http://jqueryui.com/demos/dialog/#modal – amburnside Jun 21 '12 at 14:37
  • @amburnside I don't think it does, but for now, given that where I work they don't use jquery yet (I'm gonna have to propose it), it would have to be mine. However I'm interested in whats happenning with the css regardless of I will use jquery or not. – Roger Jun 21 '12 at 15:09
  • @amburnside How can I see what is it that jquery does that gives a good result? i'm interested more in the css understanding. Thanks for helping. – Roger Jun 21 '12 at 15:11

1 Answers1

1

All the margins in CSS are based off the width. So while your margin-left: -25% works and the box is horizontally centered, the margin-top: -25% property is using 25% of the width of the box.

See also this answer.

Community
  • 1
  • 1
Jen
  • 586
  • 3
  • 12