View Full Version : Center Sliding Doors Button...

12-19-2006, 10:05 PM
Hi Guys,

I'm having the hardest time trying to get these CSS buttons to center, specifically inside a table cell. Some of you may notice, this is the same method found on A List Apart: Sliding Doors (http://alistapart.com/articles/slidingdoors/), just more like a button and less like a tab. I believe the problem involves the width of the #button div. If you add width:100px; to #button then it centers just fine, well close enough anyways. This is hardly a solution though, as the buttons width will vary and in a lot of cases adding the width as a hack won't even look centered, ie small table cells.

#button li {

May also be a cause of the problem. One or the other anyways.

If you guys can think of anything to get me out of this rut, it would be greatly appreciated.

http://snowcompanies.com/sliding_doors_button_test.htm (http://snowcompanies.com/sliding_doors_button_test.htm)
(just View Page Source, it's all there)

12-20-2006, 02:09 AM
well, try these changes. I think it's what you want.

#button li {
display: inline;
background:url("images/button_left4.gif") no-repeat left top;
padding:0px 0px 0px 6px;
#button a {
/***** float:left; *******/
/***** display:block; ******/
/***** width:.1em; *****/
background:url("images/button_right4.gif") no-repeat right top;
padding:0px 10px 1px 2px;

12-20-2006, 04:30 PM
Wow, that wasn't too bad a fix, thank you koyama. However, there's still a problem with Firefox. It's centered and all, but the background is cut in half, looking like a tab again. Any ideas?

12-20-2006, 08:14 PM
Hi itanon,

I see what you mean. Your menu was more intricate than I thought first, and my 'patch' will not work. I remember IE treats inline elements incorrectly when it comes to paddings, borders, and margins, hence the different rendering than that in FF. Ironically, IE shows it the way you want!

The basic problem is how to 'center a float'. I don't know if this is possible using some technique. Maybe some expert out there knows.

Until someone comes up with a suggestion, try to rework your code using a table. I know that this is somewhat like reverting back to the old days, but you would get what you want. Sometimes it is necessary to revert back to tables because of lacking browser support.

Without the :hover and the :hover emulation script for IE (which you can add the same way) you could start out with this:

body {
font-family: sans-serif;
font-size: 10px;
td {
background: url("images/button_left4.gif") no-repeat left top;
padding-left: 6px;
.slide {
background: url("images/button_right4.gif") no-repeat right top;

<table align="center" cellpadding="0" cellspacing="0">
<td><div class="slide"><img src="images/icons/building_add.gif" border="0">Add Property</div></td>
<td><div class="slide"><img src="images/icons/building_add.gif" border="0">Second Button</div></td>

Good luck!

12-20-2006, 10:14 PM
In order to get things working purely via CSS, you need a declaration called display: inline-block. Firefox only supports this via a proprietary value, Internet Explorer only supports this on naturally inline elements, while does Opera support it. To get an idea of what it looks like with display:&#160;inline-block, you can look at this page in Firefox 2 and Opera 9:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<base href="http://www.snowcompanies.com/"/>
<title>CF 103382 Revision</title>

<!-- Tested: Firefox 2 and Opera 9 -->
<!-- Non-semantic image elements are used because Operaís implementation of the :after pseudo‐element seems to have bugs. -->

<style type="text/css">
* {
margin: 0;
padding: 0;
html {
margin: 1em;
div {
width: 50%;
margin: 0 auto;
padding: 90px 0;
border: 1px solid black;
background-color: #eee;
text-align: center;
div {
color: black;
font: 10px/16px Arial, Helvetica, sans-serif !important;
li {
display: -moz-inline-box; /* similar to display: inline-block in Mozilla */
display: inline-block; /* not supported by Internet Explorer for this element */
height: 16px;
background: url("images/button_left4.gif") no-repeat left -4px;
padding-left: 6px;
list-style-type: none;
a {
display: block;
height: 16px;
padding-right: 10px;
background: url("images/button_right4.gif") no-repeat right -4px;
color: black;
text-decoration: none;
li:hover, li:hover a {
color: #333;
li:hover {
background-position: 0 -24px;
li:hover a {
background-position: right -24px;
img {
border: 0 none;
vertical-align: middle;


<div id="button">
<a href="#">
<img alt="" width="16" height="16" src="images/icons/building_add.gif"/>
Add Property
<a href="#">
<img alt="" width="16" height="16" src="images/icons/building_add.gif"/>
Remove Property


12-21-2006, 09:48 PM
Hey thank you guys for your ideas. Arbitrator, unfortunately that method doesn't work in IE, which it has too, possibly more than any other browser (at least at the moment).

The original method I was using was supported by 3 browsers, just wouldn't center.


It seems I'm still stuck. Does anyone have any other ideas?

12-22-2006, 06:19 AM
Arbitrator, unfortunately that method doesn't work in IE, which it has too, possibly more than any other browser (at least at the moment).I was merely offering that code as a demonstration, not a solution. In Internet Explorer, you can use that declaration on naturally inline elements like span, but not on naturally block‐level elements such as list item elements; thus it may be possible to get what you want using different elements, if youíre interested in some experimentation. Either way, I donít think that youíre going to be able to do it using semantic code short of JavaScript; but that comes with its own array of problems.