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. Advertising

  2. Tim W

    JJ Guest

    On Tue, 31 Dec 2013 19:01:43 +0000, Tim W wrote:
    > 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


    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. Advertising

  3. Tim W

    richard Guest

    On Wed, 1 Jan 2014 02:25:21 +0700, JJ wrote:

    > On Tue, 31 Dec 2013 19:01:43 +0000, Tim W wrote:
    >> 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

    >
    > 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.


    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

    On Wed, 1 Jan 2014 02:25:21 +0700, JJ wrote:

    > On Tue, 31 Dec 2013 19:01:43 +0000, Tim W wrote:
    >> 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

    >
    > 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.


    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

    In article <auelcms9y1t3.1retg4suo7gdt$>,
    JJ <> wrote:

    > On Tue, 31 Dec 2013 19:01:43 +0000, Tim W wrote:
    > > 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


    They will take up space in proportion to the font-size.

    > > width. I can't find anything in any css to account for the extra px.
    > > where have they come from?
    > >

    >
    > 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>
    >


    Yes, that is right, and you can set out the HTML to wrap to avoid
    overlong horizontal lines with:

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


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


    > Any whitespace between UL and LI can affect display too.
    >


    Sure about that?

    ------
    btw, the OP might note that when you set a size of an element in pxs,
    you will get trouble when associated text is enlarged in browsers that
    use text-only-zoom. The text size grows without regard to the fixed px
    width and spills all over the place. There are design remedies.

    --
    dorayme
    dorayme, Dec 31, 2013
    #5
  6. Tim W

    JJ Guest

    On Wed, 01 Jan 2014 10:04:52 +1100, dorayme wrote:
    > Yes, that is right, and you can set out the HTML to wrap to avoid
    > overlong horizontal lines with:
    >
    > <li>abc</li
    >><li>def</li
    >><li>ghi</li>

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


    Good idea. Ugly, but it works. :)

    >> Any whitespace between UL and LI can affect display too.
    >>

    >
    > Sure about that?


    It depend in the adjacent tag and the UL's styles.
    JJ, Jan 1, 2014
    #6
  7. Tim W

    dorayme Guest

    In article <okghg32pjjl$.762b4bntw302$>,
    JJ <> wrote:

    > On Wed, 01 Jan 2014 10:04:52 +1100, dorayme wrote:
    > > Yes, that is right, and you can set out the HTML to wrap to avoid
    > > overlong horizontal lines with:
    > >
    > > <li>abc</li
    > >><li>def</li
    > >><li>ghi</li>

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

    >
    > Good idea. Ugly, but it works. :)
    >


    Yes, I agree, it is rather ugly! <g>
    >


    > >> Any whitespace between UL and LI can affect display too.
    > >>

    > >
    > > Sure about that?

    >
    > It depend in the adjacent tag and the UL's styles.


    Have you a handy example?

    --
    dorayme
    dorayme, Jan 1, 2014
    #7
  8. Tim W

    BootNic Guest

    In article <okghg32pjjl$.762b4bntw302$>,
    JJ <> wrote:

    > On Wed, 01 Jan 2014 10:04:52 +1100, dorayme wrote:
    >> Yes, that is right, and you can set out the HTML to wrap to avoid
    >> overlong horizontal lines with:


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


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


    > Good idea. Ugly, but it works. :)


    [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

    On Wed, 01 Jan 2014 15:10:23 +1100, dorayme wrote:
    > Have you a handy example?


    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

    On 31/12/2013 19:25, JJ wrote:
    > On Tue, 31 Dec 2013 19:01:43 +0000, Tim W wrote:
    >> 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

    >
    > 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.
    >


    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. Tim W wrote:

    > On 31/12/2013 19:25, JJ wrote:
    >> On Tue, 31 Dec 2013 19:01:43 +0000, Tim W wrote:
    >>> 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


    Actually, they are displayed as *inline*-blocks (layout.css line 90).

    >>> 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

    >>
    >> 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.
    >>

    >
    > 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?


    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.

    > 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;


    Alternatively, you may use display:block and float:left.

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


    --
    Christoph M. Becker
    Christoph Michael Becker, Jan 1, 2014
    #11
  12. Tim W

    Tim Streater Guest

    In article <la15ov$m4u$>, Tim W <>
    wrote:

    > 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;


    Can't you edit the html? CMSes sometimes allow for that.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
    Tim Streater, Jan 1, 2014
    #12
  13. Tim W

    Tim W Guest

    On 01/01/2014 14:10, Christoph Michael Becker wrote:
    > Tim W wrote:
    >
    >> On 31/12/2013 19:25, JJ wrote:
    >>> On Tue, 31 Dec 2013 19:01:43 +0000, Tim W wrote:
    >>>> 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

    >
    > Actually, they are displayed as *inline*-blocks (layout.css line 90).
    >
    >>>> 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
    >>>
    >>> 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.
    >>>

    >>
    >> 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?

    >
    > 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.
    >


    ah, I see, Ta.

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

    Tim W Guest

    On 01/01/2014 14:21, Tim Streater wrote:
    > In article <la15ov$m4u$>, Tim W <>
    > wrote:
    >
    >> 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;

    >
    > Can't you edit the html? CMSes sometimes allow for that.
    >


    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. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rashmi Panduranga

    Relation between Points & Pixels

    Rashmi Panduranga, May 16, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    3,575
    Rashmi Panduranga
    May 17, 2005
  2. Vishal Gupta

    text length in pixels

    Vishal Gupta, Jan 19, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    3,065
    Rick Lemons
    Jan 20, 2004
  3. Trint Smith
    Replies:
    2
    Views:
    352
    Brad Williams
    Feb 17, 2004
  4. =?Utf-8?B?SmVyZW15IERhdmlz?=

    RE: String Length in Pixels

    =?Utf-8?B?SmVyZW15IERhdmlz?=, Sep 16, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    434
    =?Utf-8?B?SmVyZW15IERhdmlz?=
    Sep 16, 2004
  5. mathieu
    Replies:
    3
    Views:
    585
    Bo Persson
    Sep 4, 2009
Loading...

Share This Page