ModalPopup not centered 2

[pinkpoppy]

Hello, I have been having this issue for over a week and I am about to pull my hair out. It is not centering for me. Here's what I have right now for the css (I've searched for solutions and tried just about every one of them available on the internet, this is what I have so far for it.)

div.ModalPopup2
    {

        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 15px;
        font-style: normal;
        background-color: #544d3d;
        position: fixed; /* set z-index higher than possible */
        z-index: 10000;
        color: Black;
        border-style: solid;
        border-color: #999999;
        border-width: 1px;
        top: 50%;
        left: 50%;
        width: auto;
        height: auto;
        margin-top: -9em;
        margin-left: -23em;
    }

And this is how is it used. The popup is off to the left.

<div id="divLogout" align="center" class="ModalPopup2" runat="server" style="display: none;">
                         <table style="background-color: #F6F3EE; border: solid 2px #000000;" cellpadding="2" cellspacing="2">
                               <tr>
                              <td align="center">
                                 <span style="color: Red; font-weight: bold;">
                              Are you sure you want to log out?<br />
                               Your data will not be saved.</span>
                                            </td>
                                            </tr> 
                                            <td align="center">
                                                <asp:Button ID="btnYes" UseSubmitBehavior="false" CssClass="button" runat="server" CausesValidation="false"
                                                    Text="Yes" OnClick="btnYes_Click" Height ="30px" Width= "85px" />
                                                <asp:Button ID="btnNo" UseSubmitBehavior="false" CssClass="button" runat="server" CausesValidation="false"
                                                    Text="No" OnClick="btnNo_Click" Height ="30px" Width= "85px"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                 
                                            </td>
                                        </tr>
                                    </table>
                                </div>

Any help and suggestions is greatly appreciated!

 

[vacunita]

Assuming you want to center it in the middle of the window, try this:

div[COLOR=#993399].ModalPopup2[/color]
[tab][COLOR=#FF0000]{[/color]

[tab][tab][COLOR=#0000FF]font-family:[/color] [i][COLOR=#009900]Verdana[/color][/i], [i][COLOR=#009900]Arial[/color][/i], [i][COLOR=#009900]Helvetica[/color][/i], [i][COLOR=#009900]sans-serif[/color][/i];
[tab][tab][COLOR=#0000FF]font-size:[/color] [i][COLOR=#009900]15px[/color][/i];
[tab][tab][COLOR=#0000FF]font-style:[/color] [i][COLOR=#009900]normal[/color][/i];
[tab][tab][COLOR=#0000FF]background-color:[/color] [COLOR=#FF0000]#544d3d[/color];
[tab][tab][COLOR=#0000FF]position:[/color] [i][COLOR=#009900]fixed[/color][/i]; [i][COLOR=#9A1900]/* set z-index higher than possible */[/color][/i]
[tab][tab][COLOR=#0000FF]z-index:[/color] [i][COLOR=#009900]10000[/color][/i];
[tab][tab][COLOR=#0000FF]color:[/color] [i][COLOR=#009900]Black[/color][/i];
[tab][tab][COLOR=#0000FF]border-style:[/color] [i][COLOR=#009900]solid[/color][/i];
[tab][tab][COLOR=#0000FF]border-color:[/color] [COLOR=#FF0000]#999999[/color];
[tab][tab][COLOR=#0000FF]border-width:[/color] [i][COLOR=#009900]1px[/color][/i];
[tab][tab][COLOR=#0000FF]top:[/color] [i][COLOR=#009900]50%[/color][/i];
[tab][tab][COLOR=#0000FF]left:[/color] [i][COLOR=#009900]50%[/color][/i];
[tab][tab][COLOR=#0000FF]width:[/color] [i][COLOR=#009900]350px[/color][/i];
[tab][tab][COLOR=#0000FF]height:[/color] [i][COLOR=#009900]101px[/color][/i];
[tab][tab][COLOR=#0000FF]margin-left:[/color][i][COLOR=#009900]-175px[/color][/i];
[tab][tab][COLOR=#0000FF]margin-top:[/color] [i][COLOR=#009900]-50px[/color][/i];
[COLOR=#FF0000]}[/color]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[pinkpoppy]

Thank you! It worked!!!!!

 

[jbenson001]

How can you be sure that those margins will work for any size screen? I am not CSS expert and I am curious. Thanks

 

[vacunita]

Welcome.
The Margins are based on the dimensions I gave the modal popup. As long as the popup has those dimensions it will be centered in every screen.

If you change the dimensions, you'll need to change the margins. They are basically half of the width and height of the popup.

You can test the centering, by resizing your browser window.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[jbenson001]

I see so it's dependent on the size of the modal popup. I have never seen it done with CSS. In my experience, I have usually seen it done dynamically with javascript. But that gets ify depending on the browser and version.

Thanks for the explanation.

 

[vacunita]

Yup. You have to move the popup half of its width back to the left, and half of its height up so it centers.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[darryncooke]

Since his modal is fixed dimensions and he is relatively placing the modal then simply moving the modal 1/2 of the width and height in the opposite direction it will be centered.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[vacunita]

That's what I said. And it didn't originally have fixed dimensions. I gave it the fixed dimensions.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[ChrisHunt]

Just to further flog this dead horse, here's how this works...

This bit of CSS tells the browser to put the top left corner of the box in the centre of the screen:

top: 50%;
left: 50%;

To get the box centred, we need to define how tall and wide it is:

border-width: 1px;
width: 350px;
height: 101px;

So the box is 352 pixels wide (box width + 2 borders) and 103 pixels high (Box height + 2 borders). So to get the box centred on the screen, we need to move it left and up by half those distances. We can do that with negative margins:

margin-left: -176px;
margin-top: -51px;

Note that if you add any [tt]padding[/tt] to the box, you'll need to account for that in the height/width calculations in the same way you do the border:

overall width = [tt]width[/tt] + 2 * ([tt]border-width[/tt] + [tt]padding[/tt])
overall height = [tt]height[/tt] + 2 * ([tt]border-width[/tt] + [tt]padding[/tt])

(assuming you go for the same border/padding width all the way round, that is)

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd