1

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 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!

1 Answer 1

0

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.

4
  • Can't believe it was that easy. I thought it was going to be some complex thing that I missed. Lol. Thanks for the help good sir!!
    – syllable3
    Oct 7, 2011 at 4:10
  • Sorry, one last thing while we're on this subject. I have some perl code that injects data into the same box code in a different part of the site. But if the data is too long, it wont show the box at all. Is there a way to tell the CSS code to expand vertically as needed when data is added. Thanks again!
    – syllable3
    Oct 7, 2011 at 4:21
  • Unless I'm mistaken, it will already expand vertically. One thing I just noticed though, the #popup_message has padding-left: 48px; which I think is making the prompt and text input look strangely spaced (all the way up against the right of the dialog). I would either make the whole dialog wider, or change the 48px left padding to something like 22px.
    – Ben Lee
    Oct 7, 2011 at 4:40
  • Also, if you could select my answer as accepted by clicking the check mark next to it on the left, I would appreciate that =).
    – Ben Lee
    Oct 7, 2011 at 4:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.