Help with Client Website

[brm5017]

I'm working on a client's website, and I'm having some trouble with IE. Anyone know what i'm doing wrong with my CSS? Firefox works fine, IE isn't so pretty.

NOTE: left-sidebar has been changed to align on the right side.

presto-technologies.com (testing domain - their real domain is actually newshamswoodshop.com)

Style.css:

* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 62.5%;
	background: url(../images/blackwhirl2.jpg) repeat;
}



p {
	font: 1.2em/1.8em Georgia, serif;
	margin-bottom: 10px;
	color:#cc9966;
}

p.forms{
	font: 1.1em Georgia, serif;
	margin-bottom: 10px;
	color:#cc9966;
}

h1 {
	font: 2.0em Georgia, serif;
	color: #cc9966;
	
}

h2 {
	font: 1.5em Georgia, serif;
	color: #cc9966;
	margin-bottom: 10px;
}

ul {
	margin-left: 25px;
}

img {
	border: none;
}

#listinbody{
font: 1.2em/1.8em Georgia, serif;
color:#cc9966;
}

#page-wrap {
	
	min-width: 920px;
	max-width: 920px;
	margin: 10px auto;
	}
	#page-wrap #inside {
		margin: 10px 10px 0px 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
#main-content {
	width:800px;
	padding-left: 40px;
	padding-top: 20px;
}
	
#header {
	background-image: url(../images/icons/blackwhirl2.jpg);
	text-align: center;
}
	
#left-sidebar {
	width: 150px;
	float: right;
	padding-left: 15px;
	padding-top: 20px;
}

#footer {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #cc9966;
}

ul.option{
	list-style-image: url(../images/icons/arrow-right.png);
	  }
ul.option li {
    font: 110% georgia, times, serif;
	color: #cc9966;
	margin: .5em 0;
}

a:link {color:#cc9966} /* unvisited link */
a:visited {color:#cc9966} /* visited link */
a:hover {color:white}

 

[Jm Boyd]

presto-technologies.com viewed with IE8 looks fine...but it does go to hell when viewed in IE7. So it would seem to be an issues of IE7/8 compatibility

 

[brm5017]

hmmm, didn't know that... Thanks for the heads up.

 

[seedubya]

Sorry, don't know anything about web design and css. Viewing presto-technologies.com in IE8, FF 3.0.11 and Chrome 1.0.154.8 all seems great except that in IE8 and Chrome breakup.jpg shows up as a placeholder. Sorry I can't be of more help.

 

[Jm Boyd]

You could try correcting everything so it looks fine in IE7 and then insert this meta tag <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> to force IE8 to always use the IE7 "compatibility view" when looking at this site. That will eliminate that issue. Firefox will continue to work perfectly.

 

[brm5017]

Great tip! Thanks JM!

 

[Jm Boyd]

Very welcome. Let me know how it works out.

 

[brm5017]

I figured it out. The Main-Content and Left-Sidebar DIVs were overlapping. A little resizing and it works perfectly.

" Working with any version of IE is like trying to adjust rabbit ear antennas on top of your TV."