SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    stop display inline block 3px yield

    Can you make 3px space between 2 button disappear? Without floating them, because I need their inline property reserved

    Code HTML4Strict:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .fl {float:left;}
    .btn {
    	display:inline-block;
    	position:relative;
    	-moz-border-radius:3px 3px 3px 3px;
    	border-radius: 3px 3px; 
    	background:-moz-linear-gradient(center top , #F9F9F9, #E3E3E3);
    	background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3));
    	border:1px solid #BBBBBB;
    	border-top:1px solid #CCCCCC;
    	border-bottom:1px solid #A0A0A0;
    	cursor:default;
    	outline:none;
    	padding:3px 8px;
    	text-align:center;
    	vertical-align:middle;
    	white-space:nowrap;
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	font-size:13px
    }
    .nbl {
    	border-top-left-radius:0px 0px;
    	border-bottom-left-radius:0px 0px;
    	border-left:0;
    }
    .nbr {
    	border-bottom-right-radius: 0px 0px;
    	border-top-right-radius: 0px 0px;
    }
    </style>
    </head>
     
    <body>
        <div class="btn In nbr mb2" role="button" tabindex="0">Bigger Font Size</div>
        <div class="btn De nbl" role="button" tabindex="0" style="margin-left:0px !important">Smaller Font Size</div>
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Wrap the buttons in a div that has font-size:0 set and then set the font-size on the children instead.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .fl {
        float:left;
    }
    .btn {
        display:inline-block;
        position:relative;
        -moz-border-radius:3px 3px 3px 3px;
        border-radius: 3px 3px;
        background:-moz-linear-gradient(center top, #F9F9F9, #E3E3E3);
        background: -webkit-gradient(linear, 0&#37; 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3));
        border:1px solid #BBBBBB;
        border-top:1px solid #CCCCCC;
        border-bottom:1px solid #A0A0A0;
        cursor:default;
        outline:none;
        padding:3px 8px;
        text-align:center;
        vertical-align:middle;
        white-space:nowrap;
        -webkit-user-select: none;
        -moz-user-select: none;
        font-size:13px
    }
    .nbl {
        border-top-left-radius:0px 0px;
        border-bottom-left-radius:0px 0px;
        border-left:0;
    }
    .nbr {
        border-bottom-right-radius: 0px 0px;
        border-top-right-radius: 0px 0px;
    }
    .wrap {font-size:0}
    p {margin:0}
    * html .btn{display:inline}/* ie6*/
    *+html .btn{display:inline}/* ie7*/
    
    </style>
    </head>
    <body>
    <div class="wrap">
        <p class="btn In nbr mb2" role="button" tabindex="0">Bigger Font Size</p>
        <p class="btn De nbl" role="button" tabindex="0">Smaller Font Size</p>
    </div>
    </body>
    </html>
    Kills inheritance of course

  3. #3
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's cool, Paul. Can we eliminate 1px space in the middle as well ?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'm not seeing a gap in Firefox. Are you sure that's not just an illusion because of the background color and radius corner?
    Attached Images Attached Images

  5. #5
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I mean in chrome..

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You can close the white space in the HTML
    Code:
    <div class="wrap">
        <p class="btn In nbr mb2" role="button" 
    
    tabindex="0">Bigger Font Size</p><p class="btn De nbl" 
    
    role="button" tabindex="0">Smaller Font Size</p>
    </div>
    Note no space between the two <p>'s
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool thank you guys.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    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)
    Quote Originally Posted by runrunforest View Post
    That's cool, Paul. Can we eliminate 1px space in the middle as well ?

    Oh, I mean in chrome..
    It is a confirmed webkit bug. They need to get it fixed!

    Using font-size:0; as Paul pointed out will eliminate most of the gap but it still leaves that dreaded 1px.

    The same thing happens when using word-spacing:-.5em; on the parent.

    The only solution for webkit is to mutilate the html or run the children in one string (which is not always desirable for me) like Ryan pointed out.


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
  •