If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

I played around with the code for a few hours (how ironic that I didn't have to work today) and couldn't quite figure out what was causing your problem. Though I do suspect it has something to do with your positioning of the elements. I couldn't quite put my finger on it, so I re-wrote it from the ground up. This one works, though keep in mind the background color, color and margins on the header ID are for demonstration purposes, since I don't have the actual images you were planning on using for the site. Same with the menu (the images). I don't know if the link images were purely images (text embedded and all) or if you had planned on using text for the actual link text and then images for the background, so I went with an all text option.

The page I developed is below (100% valid XHTML 1.0 Transitional--though I could have just as easily used Strict instead--and CSS). Tested on Internet Explorer, Gecko (FireFox) and Opera.

I don't want to be the bearer of bad news since you've spent hours on it, but the menu still doesn't work in IE6. You did resolve the list overlapping problem though. Also, if I maximize my IE browser, the menu stays fixed to the left edge while the top & right borders shift with the main content and header.

None of the coding seems to be working on my IE browser. It sucks that I can't verify my own work in the most pervasive browser.

I got it to work in my copy of Internet Explorer 6. Did you turn off scripting in your browser and forget about it?

As for the menu mucking up, placing the entire page content into a container <div> and giving that a width of 750px and a height of 800px should solve the problem. Currently those values are assigned to the <body> tag, which I believe is causing the problem.

Also, using images without text is a major accessability problem. If the images are turned off (or dont load in the first place) how are your visitors going to even find their way around the site?

Not only that, but they also increase the download time of the page as well.

You can, however, create a CSS rollover of a background image that uses regular text to inform the user of what page the link goes to. Even if images are turned off, and/or CSS has been disabled or is not supported, the user can still use the link with no difficulty.

Simply assign an ID to each list item (or <div>, or whatever container you use) which contains a link you want to apply an image to. The above example assumes you are using a unique image for each link (let's say it's for a link banner). You can achieve the same effect (let's say you have one default and one rollover image for all the links) with two images. All you have to do is remove the ID attribute and reference the link through the stylesheet.