Results 1 to 3 of 3

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

  1. #1
    Join Date
    Apr 2010

    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?

    <div id="menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    #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
    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
    American, living in Toronto, ON. CANADA
    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 {
    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 08: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