How to lose the spaces

A

autopost

Guest
I have a div containing a column of images for a nav. I squeezed them horizontally so they'd stack, and tried to squeeze them vertically so there'd be no space. Didn't work. Set all margins, padding, to 0, still doesn't work, at least in IE. In gecko there's no space. Any ideas? Here's the code:

<style type="text/css">
a { color: 003300; }
a:visited { color: cc8800; }

body { background-image:url(bkgnd2.gif) }
#main{ text-align:center }
#nav{ width:100px; height:300px; margin:30px 0px 0px 0px ;padding:0;border:none }
a, img{ margin:0;padding:0;border:none }
</style>

And the HTML:

<div id="nav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"overview.html">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"DarkAboutUs.gif" onmouseover="src='LightAboutUs.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkAboutUs.gif'" border="0"></a>

<a href=http://www.webdeveloper.com/forum/archive/index.php/"profiles.html">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"DarkProfiles.gif" onmouseover="src='LightProfiles.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkProfiles.gif'"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"services.html"><img src="DarkServices.gif" onmouseover="src='LightServices.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkServices.gif'" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bttoc.html"><img src="DarkNews.gif" onmouseover="src='LightNews.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkNews.gif'" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"career.htm"><img src="DarkCareer.gif" onmouseover="src='LightCareer.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkCareer.gif'" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"legalsvcs.html"><img src="DarkLitigate.gif" onmouseover="src='LightLitigate.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkLitigate.gif'" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"Bus&HR.html"><img src="DarkAdvise.gif" onmouseover="src='LightAdvise.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkAdvise.gif'" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"wealth.html"><img src="DarkWealth.gif" onmouseover="src='LightWealth.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkWealth.gif'" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]"><img src="DarkEmail.gif" onmouseover="src='LightEmail.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkEmail.gif'" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"artindex.htm"><img src="DarkArticles.gif" onmouseover="src='LightArticles.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkArticles.gif'" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"PressRelease.html"><img src="DarkPress.gif" onmouseover="src='LightPress.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkPress.gif'" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"ads.htm"><img src="DarkAds.gif" onmouseover="src='LightAds.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkAds.gif'" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"evaluate.htm"><img src="DarkEval.gif" onmouseover="src='LightEval.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkEval.gif'" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"links.html"><img src="DarkLinks.gif" onmouseover="src='LightLinks.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkLinks.gif'" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"directions.htm"><img src="DarkDirections.gif" onmouseover="src='LightDirections.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkDirections.gif'" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"https://www.taxnotebook.com/tnstart.asp?welcome=LK7698161"><img src="DarkTax.gif" onmouseover="src='LightTax.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkTax.gif'" border="0"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"intro.html"><img src="DarkHome.gif" onmouseover="src='LightHome.gif';" onmouseout="src='http://www.webdeveloper.com/forum/archive/index.php/DarkHome.gif'" border="0"></a></div>Just an idea but if its a list of images which are links semantically you should mark it up as a list of links.Explain? I'm not sure what you mean. Anchor and img tags are both set in the css.Oh, you mean use ul with no bullets?Sorry for the lack of clarity what i meant is that there are more than one image that is acting as a link so it becomes a list of links so it should be marked up as a list as such below for an e.g.


<ul id="sidenav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="XHTML VALID"><img src="images/xhtml.png" alt="XHTML VALID"/></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="CSS VALID"><img src="images/css.png" alt="CSS VALID"/></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" title="PHP POWERED"><img src="images/php.png" alt="PHP POWERED"/></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.mozilla.org" title="GET MOZILLA"><img src="images/moz.png" alt=GET MOZILLA"/></a></li>
</ul>Well that didn't help. I thought it could be that bizarre bug in IE which actually pays attention to white space and line breaks in the source. I've encountered that one before. But I put everything on one line and removed all space, and it's the same.Yeah it might of not helped your problem but you should use semantic mark-up so it did help in a way.I removed the ul since it made no difference. As far as I can tell at this point, I have 2 options; Nested divs around each image so I can force the margin and padding of each to be zero, or putting the nav in a table, which I resist doing, however I know it will remove the spaces in IE.This is definitely another IE bug. If I give them a margin of -1, they SHOW a margin of -1. If I give them a margin of 0, they show a margin of about 10px. In Gecko they show 0pxAs wacky as this sounds, nest your A tags against your closing tags. Like such:

<a href=http://www.webdeveloper.com/forum/archive/index.php/""><img src=""></a><a href=""><img src=""></a>The solution to your first posting:
img {display:block;}
or
img {vertical-align:bottom;} /* A little odd but it works */
Also add height and width to your images, a must for validation.

As sharkey wrote, semantically it should be a list.Originally posted by Fang
The solution to your first posting:
img {display:block;}
or
img {vertical-align:bottom;} /* A little odd but it works */
The reason it works in Gecko browsers is explained here: Images, Tables, and Mysterious Gaps (<!-- m --><a class="postlink" href="http://devedge.netscape.com/viewsource/2002/img-table/">http://devedge.netscape.com/viewsource/2002/img-table/</a><!-- m -->)

Since images are inline content, they are rendered on a line. A line, or line of text, contains three zones: ascendor (top), descendor (bottom) and that middle part I always forget the name of :D.

Lower-case letters are rendered in the middle part of the line, but will extend upwards for letters like "l," "f," and so forth. Also, letters like "g" and "j" have a portion that descends down. The bottom of images are aligned to the bottom of the middle line, leaving the ascendor portion of the line blank, and thus you've got a space at the bottom of your image.

IE may react in a similar way.and that middle part I always forget the name of
x-heightOriginally posted by Fang
x-height
:D thanks
 
You must log in or register to reply here.
Back
Top