Page layout messed up in Internet Explorer 6/7 - Css problem?

Hi all,

I have been coding from scratch my new website - a fairly big task for a newbie web designer. I have finally finished the main layout, and when I validated it at the w3 validation page, it said that I had no code errors in the XHTML. However, I think there is something wrong with my CSS code, as while the site displays correctly in Firefox, Opera, Safari, Netscape, and other Gecko-based browsers (Camino, K-Melon, and yes, I know Opera/Safari aren't Gecko-based), it is completely messed up in IE 6 and 7. The two major problems are thus (pictures below):

1. The image 'sider1.jpg', a placeholder image on the top menu, always displays in its entirety, even when the screen resolution dictates it cannot. This offsets the menu, and makes the page layout look out of sync. Also, the image below, 'sider2.jpg' is displaying next to sider1 instead of below it.

2. The main content (div #content) is displayed BELOW the left menu bar under a strange blue line - even though the float attribute is specified.

The page can be found here (http://bookworm.redirectme.net/site/), the CSS code here (http://bookworm.redirectme.net/site/bwcss.css). A picture of the site running in Firefox is here (http://bookworm.redirectme.net/site/img/sitefirefox.gif), the same page in IE 7 is here (http://bookworm.redirectme.net/site/img/siteie.gif). Sorry for picture size, and the dithering - I needed to keep the filesizes low. I can post larger versions, as well as pictures in other browsers, if needed.

Thanks in advance for the help!

Bookworm

I'm using Opera 9.22 on OS X (with a screen resolution of 1680 x 1050) and I see the same thing as your IE7 screenshot, with the exception that I don't see the blue line.

My first glance says that this is probably the culprit:

#menutop img {
width: auto;
}

I think because the width is auto, it will expand the table cell to accommodate the entire image. By the way, why do you need such a large image for sider1?

Also, you might want to use a <ul> with floated and/or inline <li>s, instead of a table; semantically, the table doesn't make sense.

Hey,

Thanks for the suggestions.

I understand what you're saying. Should I change auto to relative or just remove the width entirely?

Also, that image is large because otherwise it will not display correctly on larger resolutions, like 1680x1050. Otherwise, the image dosen't go to the end of the page. I could mess around with resizing it, but that makes it look streched and strange compared to the other menu images.

Edit: Also, I didn't think of using an inline list. However, I'd like to get the page working in at least IE before I change anything more that might upset it in another browser...

Another Edit: I tried removing the width parameter, it still dosen't display correctly. Also, the last time I tested it in Opera was quite a while ago, it's changed since then so I guess that would account for the problems.

Also, that image is large because otherwise it will not display correctly on larger resolutions, like 1680x1050. Otherwise, the image dosen't go to the end of the page. I could mess around with resizing it, but that makes it look streched and strange compared to the other menu images.
Hmm, on my 1680x1050 screen, in Firefox 2.x it does look strange compared to the other image –– the edges of the dark green look blurry when compared to the other images, which have clear, sharp boundaries between the shades of green.

You could make this long image the same size as the others, set it as the <td> background image (aligned to the right & center), and match the background color, something like this:

background: #0F6 url(sider1.jpg) no-repeat right center;

You might want to just use text for each nav item and set use the same image as the background of the <td>s. That way, if someone has images off, they'll still be able to navigate; right now they won't see anything. And if someone has CSS off, it'll degrade to a simple table (or list, if you use floated <li>s).

That's a good idea, I will try it.

However, the question still remains about the text... what can I do about it? Compared to the image menu, it's a bit more major of a problem... at least you can see the menu where it's supposed to be!