SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS: Button centering 100% fine in all except IE7

    Hi all,

    The below CSS works fine in Chrome, Firefox, Opera, Safari, IE8 and Flock but not IE7.

    In IE7 the buttons/links don't get centered but rather have a tendency to float on the right (though there appears to be some right padding).

    Only happens in IE7. What gives?

    CSS

    .button-container {
    float: left;
    display: block;
    padding: 5px 5px 0px 5px;
    }

    .button-container-center {
    position: relative;
    left: 50%;
    padding: 5px 0px 0px 0px;
    }


    .button-button {
    float: right;
    display: block;
    }

    .button-button-center {
    position: relative;
    left: -50%;
    }

    HTML

    <div class="button-container button-container-center">
    <div class="button-button button-button-center ">
    buttons and/or links etc.
    </div>
    </div>

    Thanks a lot,

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use text-align: center for the parent.

  3. #3
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    use text-align: center for the parent.
    Unfortunately applying text-align: center to button-container-center and/or button-button-center doesn't work. IE7 doesn't even react in any way.

    I've also tried doing it the * + html .classname {} way but that also doesn't work.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the problem is that IE7 doesn't like it when a right floated element is inside a left floated element (both no widhts). THe parent will stretch to 100&#37; width and thus since the widths are bigger then the floated shrinkwrap, the 50% left offset goes a longer way

    This can be fixed very easily by changing hte float direction
    Code:
    .button-button {
    float: right;
    display: block;	
    }
    To this
    Code:
    .button-button {
    float: left;
    display: block;	
    }
    Though the display:block isn't even needed sinnce <div> is block already
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm

    I changed .button-button and .button-button-center (2 different attempts, not at the same time) as below and IE7 refuses to give in. The changes however doesn't negatively affect the other browsers.

    float: left might be the answer but IE7 seems to suggest it wants something more.

    .button-button {
    float: left;
    display: block;
    }

    .button-button-center {
    float: left;
    position: relative;
    left: -50&#37;;
    }

    P.S. The DTD is as below should it help:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    My fix works perfectly with your above code. You must have done something else because using htis code works perfect IE7
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; 
    
    charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .button-container {
    float: left;
    display: block;	
    border:1px solid red;
    padding: 5px 5px 0px 5px;	
    }
    
    .button-container-center {	
    position: relative;
    left: 50&#37;;
    padding: 5px 0px 0px 0px;	
    }
    
    
    .button-button {
    float: left;
    display: block;	
    }
    
    .button-button-center {
    position: relative;
    left: -50%;	
    }
    </style>
    </head>
    <body>
    <div class="button-container button-container-center">	
    <div class="button-button button-button-center ">	
    buttons and/or links etc.
    </div>
    </div>
    </body>
    </html>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It's worth mentioning that Centered Widthless Blocks can also be done with display:inline-block; as a shrinkwrapping container. Most effectively that would be done with a UL which would be the container.

    You can avoid the problem with whitespace nodes by floating the LI & A (float them both to kill the IE staircase bug) instead of setting them as inline-block.

    It does require an extra div to nest the UL in but the centered widthless float method requires one as well. The benefit I see to it is that you do not have to use overflow:hidden; to hide relative positioned elements when they extend beyond the viewport.

    Something like this would be a starting point -

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Centered Widthless Blocks</title>
     
    <style type="text/css">
    h1 {
        font-size:1.4em;
        text-align:center;
    }
     
    /*=== Demo Code ===*/
    #nav {
        width:1000px;
        margin:0 auto;
        background:#CCC;
        text-align:center; /*center the entire ul*/
    }
    #nav ul { 
        display:-moz-inline-box;/* for FF2 if needed */
        display:inline-block;/* shrinkwrap the ul */
        vertical-align:bottom;
        margin:0;
        padding:0;
        list-style:none;
        background:#FF0;
    }
    * html #nav ul {display:inline;}/* IE6 inline-block trip */
    *+html #nav ul {display:inline;}/* IE7 inline-block trip */
     
    #nav li, #nav a {float:left}
     
    #nav a {
        padding:5px 15px;
        text-decoration:none;
        color:#000;
        font-weight:600;
    }
    #nav a:focus,
    #nav a:hover {
        background:#000;
        color:#FFF;
    }
    </style>
     
    </head>
    <body>
    <h1>Centered Widthless Blocks</h1>
    <div id="nav">
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
        </ul>
    </div>
     
    </body>
    </html>

  8. #8
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've taken a few deep breathes, studied each line of code for discrepancies, did some ad hoc tests and.....something must be interfering as most online articles on this topic seem to insist that only any of the below tweaks are necessary for IE7:

    a) float: left;
    b) text-align: center
    c) overflow: hidden

    All concerning the parent.

    Below is all the CSS code within which the buttons are enclosed. Does it interfere? I can't see why but perhaps it does, I certainly can't find out any other reason why there's this bias in IE7 to push things to the right.

    I would rather not redo the buttons code approach as there's lots of pages which use the current method well (even IE7 is fine *providing* you don't ask it to center them).

    Anyone spot a culprit in any of the below CSS?

    CSS:

    .annoucement-area-container-562 {
    float: left;
    margin: 0px 0px -8px 0px;
    /*overflow: hidden;
    text-align: justify; */
    }
    .annoucement-top-562 {width: 562px; background: url(../images/content_top_562.png) no-repeat;}

    .annoucement-content-562 {
    padding: 0px 35px 0px 35px;
    background: #fff;
    border: solid #b1b1b1 1px;
    border-top: 0;
    border-bottom: 0;
    text-align: center;
    overflow: hidden;
    }
    .button-container {
    float: left;
    display: block;
    padding: 5px 5px 0px 5px;
    }

    .button-container-center {
    position: relative;
    left: 50&#37;;
    padding: 5px 0px 0px 0px;
    }
    .button-button {
    float: right;
    display: block;
    }

    .button-button-center {
    position: relative;
    left: -50%;
    }

    * + html .button-button {float: left; } /* IE7*/

    <div class="annoucement-area-container-562 id4">
    <div class="annoucement-top-562 id4"></div>
    <div class="annoucement-content-562 id4">
    <div class="button-container button-container-center">
    <div class="button-button button-button-center ">
    Sample plain text
    </div>
    </div>
    </div>
    <div class="annoucement-bottom-562 id4"></div>
    </div>

    P.S>. Id4 is just a dummy class, doesn't exist in CSS, just used as a reference for other jquery code.

    Thank you,

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The overflow:hidden can be removed
    Code:
    .annoucement-content-562 {
    padding: 0px 35px 0px 35px;
    background: #fff;
    border: solid #b1b1b1 1px;
    border-top: 0;
    border-bottom: 0;
    text-align: center;/*
    overflow: hidden;*/	
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    The overflow:hidden can be removed
    Code:
    .annoucement-content-562 {
    padding: 0px 35px 0px 35px;
    background: #fff;
    border: solid #b1b1b1 1px;
    border-top: 0;
    border-bottom: 0;
    text-align: center;/*
    overflow: hidden;*/	
    }
    I couldn't get it to work (and try I did) so I ended up thinking up the one liner below, works great. Maybe it's not a top notch solution however it's all I could think up. The div acts as a wrapper round all buttons.

    * + html .buttons-pane {float: left; margin: 0 auto; width: 100%;} /* IE7*/

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I tested all my solutions in this thread before posting so we must be crossing paths somewhere, although it seems like you git it fixed (note that the margin:0 auto is used to center elements, however with the width:100&#37; there it basically nulls hte margin:0 auto (it makes it useless))

    SO you could remove that margin:0 auto part.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I tested all my solutions in this thread before posting so we must be crossing paths somewhere, although it seems like you git it fixed (note that the margin:0 auto is used to center elements, however with the width:100&#37; there it basically nulls hte margin:0 auto (it makes it useless))

    SO you could remove that margin:0 auto part.
    width: 100% was necessary as IE7 wouldn't center it otherwise on my end. I had to leave it there, I guess because the other inner div's all don't have a set width, and as IE7 wants a width I had to give it one.

    EDIT: You're right, I can remove "margin: 0 auto;" if I leave "width: 100%;" in there, but not vice versa. Thanks again.

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    IE wants a width, yes, but the automargins can't do anything with someone who's 100% wide.

    If you have a box in a box, and the inner box is 100% wide (completely fills the width of the parent box), can you center it?

    Sounds like one of those guru koans really. What is the sound of one hand clapping?

  14. #14
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by Stomme poes View Post
    What is the sound of one hand clapping?
    a red palm mark on your wife's butt cheeck !

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    Off Topic:



    a red palm mark on your husbands butt cheeck !
    Fixed
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #16
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Yup, Ryan fixed it. : )
    I'm a guuurl

  17. #17
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    and i'm a GUI and i meant it as a general solution, not directed at Sp.

    so, how could i say otherwise than wife?

    let me tell you this though, i was tempted to say girl, but what if my wife sees it? i predicted a lot of one hand clapping sounding really red marked so i decided to stick with the wife

    from there, everybody can apply the solution to their own situation and hearth desire


Bookmarks

Posting Permissions

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