Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Where do the extra pixels come from?

Reply
Thread Tools

Where do the extra pixels come from?

 
 
Tim W
Guest
Posts: n/a
 
      12-31-2013
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
 
Reply With Quote
 
 
 
 
JJ
Guest
Posts: n/a
 
      12-31-2013
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.
 
Reply With Quote
 
 
 
 
richard
Guest
Posts: n/a
 
      12-31-2013
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.
 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      12-31-2013
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.
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      12-31-2013
In article <auelcms9y1t3.1retg4suo7gdt$(E-Mail Removed)>,
JJ <(E-Mail Removed)> 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
 
Reply With Quote
 
JJ
Guest
Posts: n/a
 
      01-01-2014
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.
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      01-01-2014
In article <okghg32pjjl$.762b4bntw302$(E-Mail Removed)>,
JJ <(E-Mail Removed)> 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
 
Reply With Quote
 
BootNic
Guest
Posts: n/a
 
      01-01-2014
In article <okghg32pjjl$.762b4bntw302$(E-Mail Removed)>,
JJ <(E-Mail Removed)> 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-----

 
Reply With Quote
 
JJ
Guest
Posts: n/a
 
      01-01-2014
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.
 
Reply With Quote
 
Tim W
Guest
Posts: n/a
 
      01-01-2014
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: Is there any way to get the raw image data from a Nikon Coolpix S8200 P&S camera? Tony Cooper Digital Photography 16 04-17-2013 07:49 PM
Is there a difference between the use of the word montage vscollage Danny D. Digital Photography 8 04-15-2013 02:24 PM
Windows 8 - so bad it's hastening the death of the PC? ~misfit~ NZ Computing 18 04-15-2013 04:15 AM
silly question about Running a script from the command line A.Rock Python 0 04-10-2013 11:21 AM
Re: Is there any way to get the raw image data from a Nikon Coolpix S8200 P&S camera? nospam Digital Photography 0 04-09-2013 07:42 PM



Advertisments