Where do the extra pixels come from?

Discussion in 'HTML' started by Tim W, Dec 31, 2013.

  1. Tim W

    Tim W Guest

    Here is a site I completed recently:
    http://www.janetphillips-weaving.co.uk
    The main nav menu has four li in an ul displayed as blocks with
    background images and the width set at 100px. I didn't put any spacing
    between the items but when I measure them the four take up about 410px
    width. I can't find anything in any css to account for the extra px.
    where have they come from?

    Puzzled,

    Tim w
     
    Tim W, Dec 31, 2013
    #1
    1. Advertisements

  2. Tim W

    JJ Guest

    It's caused by the new line characters between closing LI tag and the next
    opening LI tag. e.g.:

    <li>abc</li>
    <li>def</li>

    Fix it by not leaving any whitespace between them. e.g.:

    <li>abc</li><li>def</li>

    Any whitespace between UL and LI can affect display too.

    In HTML, whitespaces do count, except that within some specific tags and
    display style, adjacent whitespaces will be treated as one space even if
    they are within other adjacent tags.
     
    JJ, Dec 31, 2013
    #2
    1. Advertisements

  3. Tim W

    richard Guest

    From the css, fancybox is setting the padding to 5px.
    So that either side has 5px. Added together, you get 10.
    Change the 5 to 1 and see what happens.
     
    richard, Dec 31, 2013
    #3
  4. Tim W

    richard Guest

    I just posted to your reply without watching who I was posting to.
    I've never had a problem with whitespace from <li> tags before.
    It's generally caused by margin or padding.
    If the image has a narrow white border, and the page is the same coler, you
    don't notice the border. So that leaves you guessing why.
     
    richard, Dec 31, 2013
    #4
  5. Tim W

    dorayme Guest

    They will take up space in proportion to the font-size.
    Yes, that is right, and you can set out the HTML to wrap to avoid
    overlong horizontal lines with:

    making sure there is no visible whitespace between the closing greater
    than and the next less than.

    Sure about that?
     
    dorayme, Dec 31, 2013
    #5
  6. Tim W

    JJ Guest

    Good idea. Ugly, but it works. :)
    It depend in the adjacent tag and the UL's styles.
     
    JJ, Jan 1, 2014
    #6
  7. Tim W

    dorayme Guest

    Have you a handy example?
     
    dorayme, Jan 1, 2014
    #7
  8. Tim W

    BootNic Guest

    [snip]

    No need to modify the HTML.

    Use display:table-cell; rather then display:inline-block;

    For ancient version of IE that do not support display:table-cell;, almost
    the same effect, display:inline:zoom:1;



    --
    BootNic Wed Jan 1, 2014 04:48 am
    All my humor is based upon destruction and despair. If the whole world
    was tranquil, without disease and violence, I'd be standing on the
    breadline right in back of J. Edgar Hoover.
    *Lenny Bruce US comedian, satirist, author*

    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v1.4.11 (GNU/Linux)

    iEYEARECAAYFAlLD5HcACgkQOcdbyBqMFBGZ4ACeJgbXlv7/zMxnhfYQngf5keNf
    UAMAoI3shaZh9/2DjbOUs+3Fy9B0qDbJ
    =3fN8
    -----END PGP SIGNATURE-----
     
    BootNic, Jan 1, 2014
    #8
  9. Tim W

    JJ Guest

    Odd... I can't seem to reproduce it now. I encountered the issue some years
    ago, but I can't remember if it was with IE or Opera.
     
    JJ, Jan 1, 2014
    #9
  10. Tim W

    Tim W Guest

    Well I never! I had no idea. Is that just browser oddities? I mean is it
    somewhere in the html spec that a browser should bung in an extra pixel
    or two?

    Unfortunately the <li>s are generated by the CMS I am using so I can't
    put them all on one line. I will try BootNic's suggestion to use
    display:table-cell; rather then display:inline-block;

    If I have to just live with it it isn't a big deal. It was not knowing
    that was bugging me.

    Thanks

    Tim w
     
    Tim W, Jan 1, 2014
    #10
  11. Actually, they are displayed as *inline*-blocks (layout.css line 90).
    The browser doesn't add extra pixels, but it merely presents the
    whitespace character between the LIs, if the LIs are displayed inline or
    as inline-block. That is the specified behavior and usually it's desired.
    Alternatively, you may use display:block and float:left.
     
    Christoph Michael Becker, Jan 1, 2014
    #11
  12. Tim W

    Tim Streater Guest

    Can't you edit the html? CMSes sometimes allow for that.
     
    Tim Streater, Jan 1, 2014
    #12
  13. Tim W

    Tim W Guest

    ah, I see, Ta.

    Tim w
     
    Tim W, Jan 1, 2014
    #13
  14. Tim W

    Tim W Guest

    Totally - I wrote the html to go with the skeleton css but with this CMS
    to get a menu as a list you write

    <ul><?php get_navigation(return_page_slug()); ?></ul>

    and the cms gives you links to the pages that have been marked for
    inclusion in the menu along with the anchor text, all in the right order
    so that particular bit of html is not so easy to edit.

    Tim W
     
    Tim W, Jan 1, 2014
    #14
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.