css that supports internet explorer
I am having a problem with my web page, Its viewing fine with any other browser other than internet explorer. I have tested with Mozilla Firefox, Opera, Safari, Torch and Internet Explorer Browsers. I know I am making a mistake with my CSS, can someone help me, here is the html and css files.
HTML:
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<title>|| My Page Tittle ||</title>
<link href='style.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id='container'>
<div id='header'>
My Header here
</div>
<div id='menu'>
<ul>
<li><a href='#'>My MENU1</a></li>
<li><a href='#'>my MENU2</a></li>
<li><a href='#'>my MENU3</a></li>
<li><a href='#'>my MENU4</a></li>
</ul>
</div>
<div id='content'>
<div id='left'>
<h3>My Header</h3>
<p>My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph
My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph
My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph</p>
</div>
<div id='right'>
<p>Some Stuff will come Here Some Stuff will come Here Some Stuff will come Here</p>
</div>
</div>
<div id='footer'>
<p>And Finally the footer</p>
</div>
</div>
</body>
</html>
CSS:
body {
background: #C89D38;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
padding: 15px;
font-size: 12px;
margin: 0px;
}
#container {
position: relative;
width: 900px;
margin: auto;
text-align: left;
}
#header {
width: 900px;
height: 100px;
background: #FFFFFF;
margin: auto;
}
#menu {
width: 900px;
margin: auto;
color: #FFFFFF;
background: #303030;
padding: 10px 0px 10px 0px;
font-size: 14px;
}
#menu ul{
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
#menu li {
display: inline;
text-align: center;
}
#menu a{
padding: 4px 30px 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
height: 30px;
}
#menu a:hover {
background-color: #C89D38;
color: #303030;
}
#content {
width: 820px;
min-height: 350px;
margin: auto;
float: left;
padding: 40px;
background: #FFFFFF;
border-top: 15px solid #C89D38;
}
#left{
float: left;
width: 590px;
min-height: 350px;
background-color: #EBE8F4;
margin: 10px 0px;
padding: 10px;
}
#right{
float: right;
width: 175px;
min-height: 350px;
background-color: #EBE8F4;
margin: 10px 0px;
padding: 10px;
}
#footer{
width: 900px;
height: 50px;
margin: auto;
padding: 0px;
background: #FFFFFF;
border-top: 15px solid #C89D38;
clear: both;
}
#footer p {
margin: 0px;
padding: 20px 0px 20px 0px;
color: #000000;
text-align:center;
}
Here is a preview of your site via JSBin http://jsbin.com/udovup/1
Now this looks fine in all but IE, because you are missing a <!DOCTYPE html> declaration at the top of your HTML. This will be throwing IE into Quirks mode.
So add this to the top of your HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<title>|| My Page Tittle ||</title>
<link href='style.css' rel='stylesheet' type='text/css' />
</head>
.
.
.
</html>