Question

I am using jquery.alerts on my website and I am having a few issues with setting some things.
I can not seem to get the buttons centered in the box, and I would also like to add more padding between the two buttons.

The easiest way to view what I’m talking about, is by simply going to the website at http://www.beerbattle.net/skunk/ and clicking on the ‘Forgot password?’ link. You will see exactly what I’m talking about.

As for the CSS of the jquery.alerts, it is as follows:

#popup_container {
font-family: Arial, sans-serif;
font-size: 12px;
min-width: 400px; /* Dialog will be no smaller than this */
max-width: 600px; /* Dialog will wrap after this width */
background: #FCCB6C;
border: solid 2px #000;
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 130px;
}

#popup_title {
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.75em;
color: #000;
background: #FBB62D url(images/title.gif) top repeat-x;
border: none;
border-bottom: solid 1px #999;
cursor: default;
padding: 0em;
margin: 0em;
}

#popup_content {
background: 16px 16px no-repeat url(images/info.gif);
padding: 1em 1.75em;
margin: 0em;
}

#popup_content.alert {
background-image: url(images/info.gif);
}

#popup_content.prompt {
background-image: url(images/help.gif);
}

#popup_message {
padding-left: 48px;
}

#popup_panel {
text-align: center;
margin: 1em 0em 0em 1em;
}

#popup_prompt {
margin: .5em 0em;
}

.buttons a, .buttons button{
background: #b55100;
border: none;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
color: #ffffff;
display: block;
font: 18px Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
text-shadow: 0 1px 1px #000000;
text-transform: uppercase;
text-align: center;
float: left;
}
.buttons button{
width:auto;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button:hover {
background: #fbb62d;
cursor: pointer;
}

I had tried changing float: left; to middle, but it makes the buttons appear one above the other for whatever reason.
Any help is greatly appreciated. Thanks!

Answer 1

You can do this by changing three styles for .buttons a, .buttons button (only in the context of this dialog, if necessary). Change these lines:

.buttons a, .buttons button {
    display: block;
    margin: auto;
    float: left;
}

To these:

.buttons a, .buttons button {
    display: inline-block;
    margin: -5px 5px 0 5px;
}

So that’s changing display from ‘block’ to ‘inline-block’, changing margin from ‘auto’ to ‘-5px 5px 0 5px’ (adujust as necessary to get the spacing how you want), and removing float altogether.

More detailed explanation: The reason the buttons were all the way over to the left even though you had text-align: center; in the containing element is because of the float: left;. But getting rid of that made them display as full-width blocks one on top of the other, and block elements don’t respond to text-align of containing elements, only inline elements respond to that. That’s why you change display: block; to `display: inline-block;’. That way that act like blocks for most things, but act inline for positioning. So after those two changes, the buttons are aligned in the bottom center, one next to the other. The margin change is just to add space between them and center them better in the dialog.