I am having a problem that occurs in IE 7 (not sure about IE 6). The below image shows a comparison of different versions of the main page I'm working on.

The whole thing I'm doing is converting an image based layout (with "rollover" images) to a text based layout with reduced image usage. Everything works fine in Firefox and actually works in IE when it isn't inserted in to the layout. View the following image: http://www.iowalum.com/Justin/Develo...em/compare.jpg

This shows what I'm talking about. When the menu code is inserted in to the main menu (it is an absolutely positioned div), there is weird white space (it is actually white space) inserted on either side of my images.

The following image shows the code for the images along with the "table layout" visually (screenshot of Dreamweaver).

http://www.iowalum.com/Justin/Develo...ble_layout.jpg

If anyone can tell me or point me in the direction of a fix, I would be appreciative.

Don't use a table for the nav, us an unordered list and you'll have fewer problems.

Originally Posted by LadynRed

Don't use a table for the nav, us an unordered list and you'll have fewer problems.

Excuse me if I'm ignorant, but this doesn't seem to be a solution to my problem. A table will still need to be used in order to break up the layout pieces in to "corner" images and "tile" background images. Putting my text links in an un-ordered list, to the best of my knowledge, will not fix that?

If you could elaborate more, maybe I can understand what you mean. I am using a table for the purpose of tiling the background images, etc..

-Justin

A table will still need to be used in order to break up the layout pieces in to "corner" images and "tile" background images

Tables are never 'necessary' for layout. You don't need tables for the corners, or the menu, or for tiling BG images. You can do it all with div's and CSS with proper HTML.

Some references that might help:
http://css.maxdesign.com.au/listutorial/index.htm

Rounded corners:
http://www.spiffybox.com/
http://www.smileycat.com/miaow/archives/000044.html

Ok I tried it with UL, and now I get a different problem:

http://www.iowalum.com/Justin/Develo...dded_space.jpg

This time, IE adds a giagantic space between <li> elements.

Not only that, but Firefox doesn't display the images. Firefox gets the spacing correct, but it doesn't display the images!

http://www.iowalum.com/Justin/Develo...ing_images.jpg

Here is the code:

 
<style type="text/css">
ul
{
 padding: 0;
 margin: 0;
 list-style-type: none;
}
li
{
 padding: 0;
 margin: 0;
}
</style>
 
 
<ul style="position: absolute; left: 9px; top: 8px; width: 655px; height: 80px; 
background-color: #000000; layer-background-color: #FFFFFF; border: 1px none 
#000000; z-index: 134;">
 <li style="display: inline; background-image: 
url('http://www.iowalum.com/images/menus/main_uiaa/top_menu/top_left_corner.jpg'
); background-repeat: no-repeat; width: 6px; height: 5px;"></li>
 <li style="display: inline; text-align: right; background-image: 
url('http://www.iowalum.com/images/menus/main_uiaa/top_menu/top_repeat.jpg'); 
background-repeat: repeat-x; width: 644px; height: 5px;"></li>
 <li style="display: inline; background-image: 
url('http://www.iowalum.com/images/menus/main_uiaa/top_menu/top_right_corner.jpg
'); background-repeat: no-repeat; width: 5px; height: 5px;"></li>
 <li style="display: inline; background-image: 
url('http://www.iowalum.com/images/menus/main_uiaa/top_menu/top_right_corner.jpg
'); background-repeat: no-repeat; width: 5px; height: 5px;"></li>
</ul>

You have the top right corner twice. That's part of your problem right there (it's also why you're getting the top right corner in the middle of your black area.)

The gigantic gap between your images in IE is likely caused by your setting of the height property in your UL tag to 80px. The images are only 5px high.

Not really sure why FF wouldn't display the images.

Originally Posted by ADAM Web Design

You have the top right corner twice. That's part of your problem right there (it's also why you're getting the top right corner in the middle of your black area.)

The gigantic gap between your images in IE is likely caused by your setting of the height property in your UL tag to 80px. The images are only 5px high.

Not really sure why FF wouldn't display the images.

I added that for illustrative purposes of having another LI. I added the 2nd right corner just to show where the next <li> element shows up inside my div.

After removing the height, the problem is still there. What is happening, if you look at the original image, is that an equal amount of space is being added above and below, almost as if there is "padding". The thing is, I removed all padding. The following image shows the space:

http://www.iowalum.com/Justin/Develo...blem/space.jpg

The problem is something in the way IE interprets spacing, like usual. And with FF, I simply have no friggin idea why the images aren't displaying.

Anyone else have an idea?

Apparently FF doesn't display the <li> element if there is no content between the opening and closing <li></li> ... won't display the element at all. You have to do something like <li>&nbsp;</li>

-Justin

Wait a minute...

There's a much smarter way to do this.

Why not just make a single div, 655px by 5px, with one long background image?

If that doesn't work for you, try what I did here;

www.libreriapandevida.com (the header graphic).