By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,408 Members | 1,796 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,408 IT Pros & Developers. It's quick & easy.

removing vertical spacing in LI elements

P: n/a
Hi,

I have a (strict) html document with the following portion:

<ul>
<li><img alt="" src="images/image1.jpg" /></li>
<li><img alt="" src="images/image2.jpg" /></li>
<li><img alt="" src="images/image3.jpg" /></li>
<li><img alt="" src="images/image4.jpg" /></li>
<li><img alt="" src="images/image5.jpg" /></li>
<li><img alt="" src="images/image6.jpg" /></li>
<li><img alt="" src="images/image7.jpg" /></li>
<li><img alt="" src="images/image8.jpg" /></li>
<li><img alt="" src="images/image9.jpg" /></li>
<li><img alt="" src="images/image10.jpg" /></li>
</ul>

I've removed border, padding, margin from all of UL, LI, and IMG
elements
but there is still vertical spacing between the LI's

Sorry I don't have a hosted site with the markup ... I've tried to play
around with other settings such as list-style-type, and displaying UL,
LI as block elements ... but no luck removing the vertical space

any help appreciated,
thank you.

Jan 2 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
da******@hotmail.com a écrit :
Hi,

I have a (strict) html document with the following portion:

<ul>
<li><img alt="" src="images/image1.jpg" /></li>
<li><img alt="" src="images/image2.jpg" /></li>
<li><img alt="" src="images/image3.jpg" /></li>
<li><img alt="" src="images/image4.jpg" /></li>
<li><img alt="" src="images/image5.jpg" /></li>
<li><img alt="" src="images/image6.jpg" /></li>
<li><img alt="" src="images/image7.jpg" /></li>
<li><img alt="" src="images/image8.jpg" /></li>
<li><img alt="" src="images/image9.jpg" /></li>
<li><img alt="" src="images/image10.jpg" /></li>
</ul>

I've removed border, padding, margin from all of UL, LI, and IMG
elements
but there is still vertical spacing between the LI's

Sorry I don't have a hosted site with the markup ... I've tried to play
around with other settings such as list-style-type, and displaying UL,
LI as block elements ... but no luck removing the vertical space

any help appreciated,
thank you.

Inline content sit on a baseline of a line which must provide space for
descenders (like j, q, p, y, g). So, that's why there is a small
vertical space (1-2px) under an image.
Longer explanation and full fix provided at:
http://developer.mozilla.org/en/docs...ysterious_Gaps
http://developer.mozilla.org/en/docs...is_Constructed
If you're developing for Firefox and Seamonkey, may I offer you to visit:

Mozilla Web Author FAQ
http://www.mozilla.org/docs/web-developer/faq.html

and

Using Web Standards in your Web Pages
http://developer.mozilla.org/en/docs...your_Web_Pages
updated in December 2006

Gérard
--
remove blah to email me
Jan 2 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.