CSS falls apart in IE for Windows

[chuckdesign]

I've built a CSS-based page that holds together beautifully in Firefox for Windows and Mac, IE for Mac, and Safari. But in IE 6 for Windows, all hell breaks loose: Too much spacing around my navigation buttons and header, and my type size is way too big. Please see:

http://home.comcast.net/~cprovancher/sia/sia-snec/hometest.html

In IE/Win, a white box also seems to obscure part of the vertical rule that seprates the yellow right-hand column. That doesn't happen in other browsers.

In the past, I've had trouble with IE for Mac, but never this much trouble with IE for Windows. Any suggestions on a hack to solve this? Tightening the buttons in the navigation bar are the biggest concern.

Thanks!
Chuck

-- Chuckdesign

 

[Vragabond]

Ok, quick and dirty fixes:

1. Your menu is like that because IE freaks out sometimes when it has block <li> items having block <a> items. I am sure you can fix this in a myriad of ways and adding [tt]display: inline;[/tt] to the #nav li declaration is just one of them which will solve the problem in IE and not break it anywhere else.

2. Your column3 is somehow covering the line. Take one pixel off its width (168px instead of 169px) and the problem is gone. Gecko complies.

3. I am not sure about type size being way too big. If you mean font, then maybe you're using something other than medium as your default font in IE, because font is the same in Gecko and IE for me. If you mean the page extending over the whole screen in IE and not in FF, it is because IE does not understand min-width or max-width.

That said, your code is simply disgusting. You have inline styles, styles in the file and external stylesheet. It will be a pain to maintain all of those. You are using an outdated, poorly performing JavaScript menu, which places disgusting (at least I think that is the menu's work) html code that does not even validate (a bunch of divs in a span). The same effect can be achieved via CSS and a small JS script for IE.

If you want immediate problems fixed, use the suggestions above. If you want to make nice and accesible CSS page, start over.

 

[chuckdesign]

Vragabond,

THANK YOU for your quick and dirty tips. The display: inline; was just what I needed to get the navigation working, and shaving that pixel off the right column fixed that problem too.

I'm still stumped as to how to take out the extra space under my header in IE/Win. Resizing the header graphic doesn't help, reducing the height of the header obscures the bottom rule in Firefox.

My revised page:

http://home.comcast.net/~cprovancher/sia/sia-snec/hometest2.html

As far as the quality of the code -- I'm still learning, and most of the CSS was taken directly from a textbook. I agree that the menus are horrible, but I read that CSS dropdown menus do not work in IE/Mac (one of my requirements), so I resorted to doing them old-school. If you can recommend a CSS dropdown menu and a small JE script for IE, I'd be most appreciative.

Thanks,
Chuck

-- Chuckdesign

 

[Vragabond]

Deleting the additional space between the image and the closing div tag in the header will rid the extra space. That is the space you're seeing:

<div id="header"><img src="hometest2_files/sia-header.gif" alt="Society for Industrial Archeology - Southern New England Chapter" height="105" width="824" /></div>

 

[chuckdesign]

That was easy. Thanks for the tip!

-- Chuckdesign