Where do the extra pixels come from?

[Tim W]

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

 

[JJ]

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.

 

[richard]

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]

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.

 

[dorayme]

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

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

 

[JJ]

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.

Good idea. Ugly, but it works.

Sure about that?

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

 

[dorayme]

Good idea. Ugly, but it works.

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

Have you a handy example?

 

[BootNic]

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

 

[JJ]

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.

 

[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

 

[Christoph Michael Becker]

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

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.

 

[Tim Streater]

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

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.

ah, I see, Ta.

Tim w

 

[Tim W]

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