css issues

[sarah31]

My website's css has issues in IE and Opera which I have been unable to figure out. While I use neither it disturbs me that my site does not parse correctly in one of the most commonly used browsers.

The issue I am having is with the site header/banner at the top. Here is the site:

Prairie Sable

and here is the CSS:

CSS

Everything looks great in Netscape, Firefox, and Safari. In Opera most of the the key layout code is not parsing at all so it looks like total crap. In IE the title banner/header parses incorrectly while the rest of the site looks mostly okay (except for minor spacing issues between the centre and left content oxes).

If anyone can help I would be greatful since I cannot figure out how to fix it in the two stubborn browsers without funking it all up in FF, Netscape and Safari.

[DJMaze]

#Header {
	color:#336600;
	font-size:28px;
	margin: 0px 0px 10px 0px;
	padding:16px 0px 0px 10px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:50px; /* 14px + 17px + 2px = 33px */
	border-style:solid;
	border-color:black;
	border-width:2px 0px; /* top and bottom borders: 2px; left and right borders: 0px */
	line-height:11px;
	background-color:#eee;
	/* background-image: url(../images/Sable1.jpg);
	background-repeat: no-repeat; */
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value is 
below. See http://glish.com/css/hacks.asp for details. */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:50px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Header {height:50px;}

[sarah31]

Thanks but after some mucking I decided to drop the header bar altogether. Some of the css still doesn't show in Opera but everything is fine with IE so I am happy enough.

[DJMaze]

Look at mine compared to yours and you see the difference in height size.
If you build fixed size areas you must properly identify height and width (sometimes also the z-index)
Yours was way to small to get the header straight, IE just ignores your settings and resizes the <div> header so that the font fits.

Instead you could use the min-height which makes it sizeable but with a minimal height.
As an example look at the header of following page of mine in all your different browsers http://dragonflycms.com/