Is there a way to rid of the white space between images in a <div>?

I have a div set up for the navbar on my page:

<div id="navbar">
	
	<!--Home Page Button-->
	<a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9', '','images/navbar_10.gif',1)">
	<img src="images/navbar_01.gif" alt="Home Page" name="Image9" width="139" height="37" border="0"/></a>
	<!--End Home-->
	
	<!--Secret-->
	<a href="guides.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','images/navbar_11.gif',1)">
	<img src="images/navbar_03.gif" alt="Oooo you'll never know" name="Image10" width="137" height="37" border="0"/></a>
	<!--End Secret-->
	
</div>

Code (markup):

However the two images get default 'white'space between them due to the fact that they are on separate lines. These are only 2/5 of the images that I am going to put on the navbar. I'll probably take the notes out of the navbar since I'm not too idiotic to find where each button is.

I realize I can fix this by putting the code on one line, but I'm a person who likes readable, neat code, that I can look at and quickly fix. Is there a way to do this without completely mangling the code into an unreadable vortex?

Edit: In Total, I think I have 9 images for the navbar, 5 buttons, and 4 spacers with a width of 2px

Also

In IE when I launch the page it warns me about the script every time. This is really annoying. Is it going to happen to all of my visitors too? I'd rather they not have to hassle and click the bar every time to allow it. I'm sure that wouldn't help traffic either. Is there a way to stop this? Or is it just my computer? Or what?

 

All of that can be replaced using CSS, and it will clean up your code even more. I'm assuming that you're doing rollover images using Javascript for your navbar right?

Here's how you can do rollover using CSS:

http://www.csswoes.com/2008/04/03/css-rollover-image-links/

You'll have to scroll down past the Javascript section. I just put both ways to give others a choice.

Using CSS, you'll also be able to get rid of your spacer images and get rid of that annoying warning in IE.

 

First, a menu is a list. Get rid of the div and use a ul. Second, lose those silly DW javascript bits. Those are some of the worst examples of javascript out there.

<ul id="navbar">
  <li><a href="index.htm"><img 
        src="images/navbar_01.gif" 
        alt="Home Page" 
        name="Image9" 
        width="139" 
        height="37" 
        border="0"/></a></li><
  li><a href="guides.htm"><img 
        src="images/navbar_03.gif" 
        alt="Oooo you'll never know" 
        name="Image10" 
        width="137" 
        height="37" 
        border="0"/></a></li></ul>
==============
#navbar {
  margin: 0;
  padding: 0;
  list-style: none;
  }

#navbar li {
  display: inline;
  }

[b]or[/b]

<ul id="navbar">
  <li>
    <a href="index.htm">
      <img src="images/navbar_01.gif" 
           alt="Home Page" 
           name="Image9" 
           width="139" 
           height="37" 
           border="0" />
    </a>
  </li>

  <li>
    <a href="guides.htm">
      <img src="images/navbar_03.gif" 
           alt="Oooo you'll never know" 
           name="Image10" 
           width="137" 
           height="37" 
           border="0" />
    </a>
  </li>
</ul>
============
#navbar {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  }

#navbar li {
  float: left;
  }

Code (markup):

cheers,

gary

 

Thanks guys, but Gary:

How would I implement a rollover into that? The CSS rikun presented has me use a double image as my link, where overflow:hidden hides half of the image on mouseover, then switches to hide the other half. Should I use javascript to do this with a list?

 

There are any number of image replacement methods that will work. Some are pure css, others use javascript. My point about DW's javascript is that it is an egregious example of poor practice. Use javascript if you wish, but write or borrow code that is unobtrusive and fails gracefully.

cheers,

gary

 

Gary's being polite. The entire MM_ script rubbish is such a steaming pile of garbage it only further proves the only thing you can learn from Adobe software is how NOT to build a website.

As to why they are being added - your 'pointless comments' (and yes, those are POINTLESS) are being treated as white-space, as are your line-feeds, so browsers are going to put at least one space between each image because the images are 'inline' - as such they are treated like words are - any amount of whitespace between them is treated as a single space. Solutions: condense them to a single line, use a 'spacing' trick of putting the > from the </a> down before the <a> of the next one, or make them float. (the last is the most commonly used solution)

Not that, as others pointed out, using IMG tags is even the correct approach here. My markup for what you are doing would likely read:

<!-- 
	empty bold tags below are image sandbags, do not remove
	odd spacing of LI close tags is to prevent whitespace from
	being added via these being inline elements.
-->
<ul id="mainMenu">
	<li class="home"><a href="index.htm">Home Page<b></b></a></li>
	<li class="guides"><a href="guides.htm">Oooo you'll never know<b></b></a></li>
</ul>

Code (markup):

with the following CSS:

* {
	margin:0;
	padding:0;
}

#mainMenu {
	list-style:none;
}

#mainMenu li {
	display:inline;
}

#mainMenu li a {
	float:left;
	height:37px;
	position:relative;
	overflow:hidden;
}

#mainMenu li b {
	position:absolute;
	height:37px;
	top:0;
	left:0;
	background:url(images/mainMenu.png) no-repeat;
}

#mainMenu .home a,
#mainMenu .home a b {
	width:137px;
	background-position:0 0;
}

#mainMenu .home a:active b, 
#mainMenu .home a:hover b {
	background-position:0 -37px;
}

#mainMenu .guides a,
#mainMenu .guides a b {
	width:139px;
	background-position:-137px 0;
}

#mainMenu .guides a:active b,
#mainMenu .guides a:hover b {
	background-position:-137px -37px;
}

Code (markup):

That assumes you have a single image where your normal buttons are in a single row across the top, with their hover/active states as a single row below that.

See this rewrite I did for pixelcommander a while back:
http://battletech.hopto.org/for_others/pixelcommander/

It uses just the one image:
http://battletech.hopto.org/for_others/pixelcommander/images/navigation.jpg

No javascript, no worries about precaching, no extra handshaking making the page take longer to load, etc, etc... (remember, for each file past the first eight most browsers can take anywhere from 200 to 2000ms extra time depending on your ping time to the server)

 

This was brought home to me a couple of days ago. I needed to download about 19,000 files totaling 18.3Gb from 4 or 5 servers (both http and ftp). Using a list of files and servers, and a script to run wget against the list, it took 24 hours to GET all the files. Judging from throughput, there were 19 hours of loading and 5 hours of network latency+handshakes, etc. That's slightly less than 1 second per file on average. It adds up.

cheers,

gary