SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Button images in line

    I have several images which make up a horizontal navigation bar. They are wrapped in a span with the following css:

    span.mainnav{
    margin:0;
    padding:0;
    display:inline
    }

    The only problem is that the buttons have a gap between each one, unless i put all the code on one line. This becomes a bit cumbersome to use, so is they a way I can stop this?

    cheers

    monkey
    monkey - the rest is history

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The display:inline you have there is redundant, as SPAN elements are inline elements by default.

    Inline elements (like SPAN) show whitespace within them and, as IMG elements are also inline elements by default, the space between them is showing.

    A solution is to use a DIV instead and to float the images. Floating will make the images have block display by default, and this will cause the whitespace between them to be ignored.

    Alternatively, you could put them all in a list and then float the LI elements. This would probably be a more semantically sensible solution.

  3. #3
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    The display:inline you have there is redundant, as SPAN elements are inline elements by default.

    Inline elements (like SPAN) show whitespace within them and, as IMG elements are also inline elements by default, the space between them is showing.

    A solution is to use a DIV instead and to float the images. Floating will make the images have block display by default, and this will cause the whitespace between them to be ignored.

    Alternatively, you could put them all in a list and then float the LI elements. This would probably be a more semantically sensible solution.
    OK - I started with the LI method but not using float - how would i do that?

    cheers
    monkey - the rest is history

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,708
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    float:left; the <li>'s.

    Unless yo uare going to do the floating option it will show the white space (minus a few exceptions)

    Also Raffles, floating doesn't make it a block box, but it makes it block level. Floating does not imply display:block;

    Straight from Tommy.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I should have chosen my words a bit more carefully.

    Incidentally, display:table-cell will achieve the intended effect, but its level of support makes it a less attractive solution that floating.

  6. #6
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all - with a bit of trial and error, i;ve sorted it now!

    Cheers again
    monkey - the rest is history

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    float:left; the <li>'s.

    Also Raffles, floating doesn't make it a block box, but it makes it block level. Floating does not imply display:block;

    Straight from Tommy.
    To clarify a little

    Floating makes the element generate a block box that is floated (either left or right as specified). It is not the same as display:block and it is not the same meaning as a "block level element" (which refers to html).

    If you floated a list item it should still remain as a display:list-item but also floated. Unfortunately it seems that IE6/7 actually change it to display:block which is why the bullet disappears in floated lists.


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
  •