Ok, since I got such great response before on my CSS question I thought I would give the board another shot. My page looks fine in Mac+Safari and PC+Firefox but doesnt quite look the same in PC+IE. Damn IE! Here is my page: http://www.savannahnow.com/shop/shop.shtml Here is my sheet: http://www.savannahnow.com/shop/shop_styles.css From viewing the page in Firefox and then in IE you can see that my module headers are seperated and my grey divider line isnt repeating down the cell, which was my hope when using "background-repeat: repeat-y;". In fact I even have height values in there that I wish I didn't have to use. I am not sure how to fix this IE problem with the dividers and module headers not quite cooperating like they do in Firefox. Any CSS experts have any ideas? P.S. I am rather new to using style sheets, so go easy!
To get rid of the extra whit space replace <TD VALIGN="TOP"><div class="grey_seperator"> </DIV></TD> with <TD VALIGN="TOP"><div class="grey_seperator"><img src="images/cccccc.gif" width="1" height="1"></DIV></TD> When IE displays the space it's taking more room than FireFox. I don't see what you mean about the grey bars extending though, they look the same in IE 5 and FireFox to me.
So, even though I call the cccccc.gif image from my sheet (.grey_seperator), I still have to put it on the page in my div tag?
Not really, I just put it in there so it wouldn't be an empty div tag. When I tried it empty it still worked ok, but there may be browsers that ignore the div tag if it's empty. Putting a 1x1 image in it makes sure it will show up, then use CSS for the height.
Ok, I made the change you suggested. I put in a clear pixel (spacer.gif) inside that div tag. Originally I just had an HTML space but clearly that didnt work. The spacer.gif you suggested to go inside the DIV works great in terms of getting my "header" areas lined up nice and tight. Thanks a bunch for that! In the future I will make sure not to leave DIV tags empty. The only problem I have left is that there should be vertical grey lines (div class="grey_seperator") seperating each module. This is visible in Firefox but not in IE. I was hoping that "background-repeat: repeat-y;" would make this work but it doesnt seem to be working in IE. Does that property not work with IE?
Oh crap, I forgot to include the px on those values! I think I remember reading that IE doesnt recognize the values unless they are declared like that. DrLudicrous, Thanks so much for the help!
I recommend this puppy and its big dog friend: bookpool has saved me much money... give it a try and give me a reference if you decide to buy. Start from the beginning of the CSS Guide. It saved me much trouble I recommend it. Also, I noticed that on your page displays the "flyout nav" links behind the "Find a Job" space. Weird on IE 6.0.2900 (XP). Is that what you intended?
