www.webdeveloper.com
Results 1 to 3 of 3

Thread: Inline-block background image button links have spaces on both sides

  1. #1
    Join Date
    Apr 2010
    Posts
    14

    Question Inline-block background image button links have spaces on both sides

    I made an inline-block list style main menu navigation bar with background images and static dimensions, but the problem is that there's a little space between each of the buttons on right and left.

    I don't see any padding or margin styling in my css below. How can I fix this so the buttons stick to each other?

    HTML:
    Code:
    <div id="menu">
    <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    </div>
    CSS:
    Code:
    #menu ul li{
    	display: inline-block;
    	margin-bottom: 0px;
    }
    #menu ul li a{
    	padding-top: 7px; /* to center link text vertically */
    	width: 120px;
    	height: 41px;
    	float: left;
    	text-decoration: none;
    	color: #FFF;
    	background:url(image/bt1.gif) no-repeat right top;
    }
    #menu ul li a:hover {
    	background:url(image/bt2.gif) no-repeat right top;
    }

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    I don't normally use inline-block, but I suspect there might be some default spacing between the block boxes the style generates which may or may not be able to be altered using margin or padding.

    A safer option could be to rearrange your markup and styles to use "display: inline" after which you can easily close any gaps between the menu items.

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    It may not solve this problem, but always include this as for first line of CSS in all your builds:

    * {margin:0; padding:0;}

    It removes the default margin/padding from every element (" * " means "wildcard" or "all")

    This one line alone solves about 50 problems with IE and its default margin and padding that it places upon every nameable element..

    p.s., -I seldom use "display: inline-block;" for horizontal lists. I prefer:

    #menu ul li {
    float:left;
    margin-bottom: 0px;
    }

    and, if you use " * {margin:0; padding:0;} " as your very first CSS rule, you do not ever need to state the redundant " margin-bottom: 0px; " in your code again. -This not only levels the playing fields with IE, but it reduces code-bloat by removing the repetitive lines like this.
    Last edited by WebJoel; 05-19-2010 at 07:04 PM.
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles