IE 7 adding extra margin, & IE6, wow

[AndrewMcLellan]

Hello guys,

I really need some help here. Trying to get this site working on different browsers. FF/Chrome etc are no probs. But as you'll see IE7 adds some extra margin under my navbar. How do I fix this?

As for IE6...it is insane, it's ruined in that. I take it IE6 doesn't support PNGs? Do I have to use GIFs? And the transparency is just the beginning. The layout is insanely messed up. I've uploaded to my own free host for you to check it out. I assume you can view HTML/CSS with FF toolbars etc, otherwise I will post code if you need?

Thanks

http://amclellan.110mb.com/site.html

[David Laakso]

All browsers get these changes:

#container { background-image:url('http://amclellan.110mb.com/images/main_bg.png')/*add*/;
}
 
#banner {height:198px/*add to close v-gap*/;}
#menubar { min-height: 27px/*add*/;}
#menu {width:345px/*add -- floats need a width*/;float:left;}
#blackbar {
 width: /*513px*/ 512px/*amend*/;
/*height:27px;delete*/
 min-height: 27px/*add*/;
}
#searchbox { width: 190px/* add--floats need width*/;
padding-top: 1px/*add*/; 
margin-left: 330px/*add*/; 
position:relative/*add*/;
height:1px/*add*/;
 /*padding-top:5px;delete*/
 /*margin-left:320px;delete*/
}
#maincontent { 
    /*height:500px delete-- let the amount of content determine height*/;
}
#left-column {
overflow:hidden/*add*/;    
/*height:500px delete-- let the amount of content determine height*/
/*overflow:auto;delete+/
}
#right-column {
\overflow:hidden/*add*/;
    /*height:400px; delete-- let the amount of content determine height*/
    float:left;
    width:220px/*add--floats need a width*/;    
}
#footer { clear:both /*add to clear the floats*/;}
 

Still with me..?
IE/6.0 and IE/7.0 get these hacks (maintain the order shown):

/* fix IE6 */
* html #blackbar {    
overflow-x:hidden;width: 506px;
 height: 27px;
}
* html #searchbox {display:inline;}
/* fix IE7 */
*+html #searchbox {margin-left:167px;}
 

IE/6 and down do not support transparent png's.
See a possible work around here:
http://www.twinhelix.com/css/iepngfix/

[drhowarddrfine]

@AndrewMcLellan
All versions of IE, including IE8 which isn't even out yet, are 11 years behind web standards or wrong in their implementation, as you've noticed.

[David Laakso]

As for IE6...it is insane

That's a given.

But the IE browsers are not the real problem here. Better coding practice up front in compliant browsers, setting primary content at default, extensive testing of your page at twice default, not using points for setting fonts on screens, and validating will get you a lot further a lot faster.

[AndrewMcLellan]

Hello David,

Thank you so much for you help. I have made the amendments.

Regarding the maincontent div.... when I take the height off it the background image does not expand down while the div does (You can check form the web link).

I appreciate your time and have learned a bit.

I'm not quite sure I'll know how to fix for IE in the future still, but I suppose in time I'll learn.

Thanks


ps. Yes I understand about IE, it's the devil...I hate it!

[David Laakso]

Regarding the maincontent div.... when I take the height off it the background image does not expand down while the div does

Set no height on #maincontent. It needs only to be opened to enclose the float contained within it. Not tested-- reset to (the border is for position only and should be deleted if all is well):

#maincontent {
border: 1px solid fuchsia;
overflow:hidden;
    background-image:url('images/main_bg.png');
    background-repeat:repeat-y;
    margin-top:2px;
}
 

I have not tested this. If it is not doing what it should in in IE/6.0, add this hack for IE/6 to the style sheet.

* html #maincontent {
border: 1px solid fuchsia;
overflow:visible;
}
 

If it is not working in any browser, write back...

Remember not to forget IE/7.0 is not much better than IE/6.0. And that the forthcoming IE/8.0 will still be at least 3 years behind compliant browsers. This dose not mean you need throw yourself through a closed window. But keeping up to date on coping with stupidity is always an advantage...

A couple of helpful links regarding dealing with IE 6/7:
http://www.satzansatz.de/cssd/onhavinglayout.html
http://www.positioniseverything.net/

Current thinking among some is doing little more than making sure IE/6 is not upside down and backward is more than enough. The days of attempting pixel perfect cross-browser perfection are long gone and just encouraged IE to do nothing about its flagrant opposition to web standards.

Trivial pursuits: You still have one or more rule sets set in font-size using points. Using em as you have done is fine. I prefer percent myself for cross-browser consistency. More important: default for em is 1em not .8em as you have on the body; default for percent is 100% not 80%. And line height is almost always set as a raw number (no unit of measure is used). It's line-height: 1.3; Not line-height: 1.3em or line-height:130%;

Good luck and best...
~d