I have a mysterious gap between 2 images on this page:

http://www.outer-edge.com.au/develop...ite/index.html

It only appears in IE 6

probably not mysterious


You will have white space between the closing tag of the previous element (or image) and the opening tag of the image

didn't look at the source, got bored at 50 seconds waiting for the page to fully load, I'm on 2M broadband heaven help anybody on dialup.

try with styling your images

<img src="your_image.extension" style="display: block;" />

That didnt work :-(

My top and middle sections images are part of my css:

#top.home {
background-image: url(images/top_bg.gif);
background-repeat: no-repeat;
width: 800px;
height: 103px;
}
#menu {
width: 400px;
padding-top: 80px;
padding-left: 330px;
}
#content.home {
background: url(images/home_main.jpg);
height: 371px;
width: 800px;
}

Where as the menu images are part of the html body:

<div id="top" class="home">
<div id="menu">
<img src="images/menu_home.gif" height="19" width="75" alt="Outer Edge Home" />
<img src="images/menu_news.gif" height="19" width="72" alt="News" />
<img src="images/menu_mag.gif" height="19" width="66" alt="The Magazine" />
<img src="images/menu_links.gif" height="19" width="70" alt="Outer Edge Links" />
<img src="images/menu_contact.gif" height="19" width="70" alt="Contact" />
</div></div>

You have other problems in Firefox too. In FF your menu images are stacked vertically rather than horizontally.

You should style your menu as an unordered list rather than a bunch of inaccessible images. It would also solve your image spacing problems. You can always put the image in as a background of the <li> or the <a> tag.
Then you set the <li> to display: inline for a horizontal menu.

Change the padding-top on #menu to 78 or 79 and your space disappears.

Thanks LadynRed! That #menu pixel change fixed it.

I would like to use a ul for the menu images in my css, however I want to be able to use rollover images for the menu images...how would this work?