Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Center Sliding Doors Button...

    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, 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 {
    float:left;

    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.

    Demo:
    http://snowcompanies.com/sliding_doors_button_test.htm

    (just View Page Source, it's all there)
    Last edited by itanon; 12-19-2006 at 10:07 PM.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    well, try these changes. I think it's what you want.
    Code:
    #button li {
    	/********float:left;*********/
    	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;
    	text-decoration:none;
    	color:#000;
    }

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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:
    Code:
    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;
    }
    Code:
    <table align="center" cellpadding="0" cellspacing="0">
      <tr>
        <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>
      </tr>
    </table>
    Good luck!
    Last edited by koyama; 12-20-2006 at 08:33 PM. Reason: typo

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    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:

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
    
        <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;
            }
        </style>
    
      </head>
      <body>
    
        <div id="button">
          <ul>
            <li>
              <a href="#">
                <img alt="" width="16" height="16" src="images/icons/building_add.gif"/>
                Add Property
              </a>
            </li>
            <li>
              <a href="#">
                <img alt="" width="16" height="16" src="images/icons/building_add.gif"/>
                Remove Property
              </a>
            </li>
          </ul>
        </div>
    
      </body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    http://snowcompanies.com/sliding_doo..._test_orig.htm


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

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by itanon View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •