My question is how to I get my menu boxes to spread across the page evenly.
On chrome and firefox it looks right
On ie I have a gap on the right. You can see it because I made #menu ul background-color red.
How do I make it so that ie looks like firefox on chrome. Where do I begin.
<html>
<head>
<title>Melissa Hardaway Real Estate Expert</title>
<link rel="stylesheet" href="css/test.css" title="home" />
<style>
body {background-color:#C6BE9A;margin:0;padding:0; font-size: .75em;font-family:arial;text-align:center;}
h1,h2,h3,h4,h5,ul,li,span {margin:0;padding:0;}
h1 {width: 880px; height: 70px;margin:0 auto;background: url(../images/logo.png) no-repeat; }
h1 span {display: none;}
h2 {color: #310507; text-align: center; margin-top: 5px; font-size: 18px;}
/* _shaded
_shaded_right */
#container {background: url(../images/green_containerbk.jpg) no-repeat; width: 900px;height: 900px;
margin:0 auto;text-align:left; }
#header{height: 75px; background-color: #ffffff; width: 900px;}
#content {width: 900px; ;position:relative;}
#bar {margin-top:15px;margin-left: 50px;}
#bar ul {list-style:none; width: 300px;}
#bar li {padding: 18px; margin-top: 10px;font-size: 27px; text-transform: capitalize; color: white; text
-align: center;border: 1px solid #CCCCCC;}
#bar li.blue {background-color: #006699;}
#bar li.green {background-color: #999933;}
#bar li.yellow {background-color: #FFCC00;}
#bar li.red {background-color: #310507;}
#menu { }
#menu ul {margin-top:60px;width: 100%;background-color: red;}
#menu li {list-style:none;border-right: 1px dashed black; float:left;}
#menu li a:link,
a:visited {background-color: #393520;text-decoration: none; color: white; text-transform:capitalize;
font-size: 12px;display:block;height:140px;width: 204px;padding: 10px;}
#menu li a:hover {background-color:#1C1A0F;}
#menu li a h3 {background:url(../images/house.png) no-repeat ; height: 29px;color: #FFCC00; text-align:
right;padding-top: 10px; font-size: 13px; padding-bottom: 10px;}
/*
#menu { margin-top:60px; height: 100px;background-color: #393520;}
#menu ul {margin:0 auto;}
#menu li {list-style:none;border-right: 1px dashed black; float: left;}
#menu li a:link,
#menu li a:visited,
#menu li a:active {background-color: #393520;text-decoration: none; color: white; text-
transform:capitalize; font-size: 10px;display:block;height:140px;width: 200px;padding:10px;}
#menu li a:hover {background-color:#1C1A0F;}
#menu h3 {text-align: right;background:url(../images/house.png) no-repeat ; height: 29px;color: #FFCC00;
padding-top: 10px; font-size: 13px; padding-bottom: 10px;} */
#tabs {position: absolute;top: 231px;left: 482px; }
#tabs ul {}
#tabs li {list-style: none;}
#tabs li a:link,
#tabs li a:visited,
#tabs li a:active {text-align: center;background-color: black;width: 370px;height:
20px;display:block;color: white; text-decoration: none;text-transform: uppercase;}
#tabs li a:hover {text-decoration: underline;}
#admin {position: absolute; top: 200px;}
#admin h2 {}
#admin ul {}
#admin li {list-style: none;}
#admin li a:link,
#admin li a:visited,
#admin li a:active {height: 10px; background-color: #990000;color: black;font-size: 15px;}
#admin li a:hover {background-color: white;}
#footer {clear: both; background-color: black;height: 150px; }
#footer ul {}
#footer li {list-style: none;color: white; width: 900px; text-align: center;}
/* #footer li {list-style: none;color: white; width: 250px;text-align: center;} */
</style>
</head>
<body>
<div id="container"><!-- container start -->
<div id="header"><h1><span>test.com </span></h1></div>
<h2>One Real Estate Agent to handle all your Property Needs Buy, Sell, or Rent.</h2>
<div id="content">
<div id="bar">
<ul>
<li class="green">real estate agent</li>
<li class="blue">foreclosure expert</li>
<li class="yellow">property manager</li>
<!-- <li class="red"><a href="#">Contact MH</a></li> -->
</ul>
</div>
<div id="menu">
<ul>
<!-- <li><a href="index.php">home</a></li>
<li><a href="about_us.php">ABOUT US</a></li> -->
<li><a href="in_foreclosure.php"><h3>in foreclosure</h3>
Melissa Hardaway understands real estate and can provide the analytical detail needed to make the
right purchase</a></li>
<li><a href="property_management.php"><h3>property management</h3>
Melissa Hardaway has manage property for the past 12 years. She has to experience to manage your
properties.</a></li>
<li><a href="address_report.php"><h3>Residential inventory</h3>
Melissa Hardaways current listings..</a></li>
<li><a href="resume.php"><h3>resume</h3>
**Not sure what to do with this tab ****<br />
</a></li>
<!-- <li><a href="contact_us.php">CONTACT US</a></li> -->
</ul>
</div>
<div id="col1">
<!--<div id="tabs"><ul><li><a href="contact_us.php">contact melissa hardaway</a></li></ul></div>
--></div>
</div>
<!-- content end -->
<div id="footer"><div id="footerimage"><span>footer image</span>
<ul>
<li><h3>Melissa hardaway</h3><br>
13337 South Street,<br> Suite 214
Cerritos, CA 90703 <br>
email: melissa@test.com <br>
phone: (123) 123-1234<br>
</li>
<!--
<li><h3>Link</h3><br>
<a href="#">link 1 </a><br>
<a href="#">link 2 </a><br>
<a href="#">link 3 </a><br>
<a href="#">link 4 </a><br>
</li>
<li><h3>Change the Style</h3><br>
<img class="smallKit" alt="Home" src="images/kit_small_home.jpg" onclick="changeStyleSheet('home')" />
<img class="smallKit" alt="Away" src="images/kit_small_away.jpg"
onclick="changeStyleSheet('away')" />
<img class="smallKit" alt="Third" src="images/kit_small_third.jpg"
onclick="changeStyleSheet('third')" />
<a href="#" onclick="changeStyleSheet('home')">home </a><br>
<a href="#" onclick="changeStyleSheet('white')" >white background style</a><br>
<a href="#" onclick="changeStyleSheet('gray')">gray background style </a><br>
</li> -->
</ul>
</div></div> <!-- this is container end -->
</body>
</html>
On chrome and firefox it looks right
On ie I have a gap on the right. You can see it because I made #menu ul background-color red.
How do I make it so that ie looks like firefox on chrome. Where do I begin.
<html>
<head>
<title>Melissa Hardaway Real Estate Expert</title>
<link rel="stylesheet" href="css/test.css" title="home" />
<style>
body {background-color:#C6BE9A;margin:0;padding:0; font-size: .75em;font-family:arial;text-align:center;}
h1,h2,h3,h4,h5,ul,li,span {margin:0;padding:0;}
h1 {width: 880px; height: 70px;margin:0 auto;background: url(../images/logo.png) no-repeat; }
h1 span {display: none;}
h2 {color: #310507; text-align: center; margin-top: 5px; font-size: 18px;}
/* _shaded
_shaded_right */
#container {background: url(../images/green_containerbk.jpg) no-repeat; width: 900px;height: 900px;
margin:0 auto;text-align:left; }
#header{height: 75px; background-color: #ffffff; width: 900px;}
#content {width: 900px; ;position:relative;}
#bar {margin-top:15px;margin-left: 50px;}
#bar ul {list-style:none; width: 300px;}
#bar li {padding: 18px; margin-top: 10px;font-size: 27px; text-transform: capitalize; color: white; text
-align: center;border: 1px solid #CCCCCC;}
#bar li.blue {background-color: #006699;}
#bar li.green {background-color: #999933;}
#bar li.yellow {background-color: #FFCC00;}
#bar li.red {background-color: #310507;}
#menu { }
#menu ul {margin-top:60px;width: 100%;background-color: red;}
#menu li {list-style:none;border-right: 1px dashed black; float:left;}
#menu li a:link,
a:visited {background-color: #393520;text-decoration: none; color: white; text-transform:capitalize;
font-size: 12px;display:block;height:140px;width: 204px;padding: 10px;}
#menu li a:hover {background-color:#1C1A0F;}
#menu li a h3 {background:url(../images/house.png) no-repeat ; height: 29px;color: #FFCC00; text-align:
right;padding-top: 10px; font-size: 13px; padding-bottom: 10px;}
/*
#menu { margin-top:60px; height: 100px;background-color: #393520;}
#menu ul {margin:0 auto;}
#menu li {list-style:none;border-right: 1px dashed black; float: left;}
#menu li a:link,
#menu li a:visited,
#menu li a:active {background-color: #393520;text-decoration: none; color: white; text-
transform:capitalize; font-size: 10px;display:block;height:140px;width: 200px;padding:10px;}
#menu li a:hover {background-color:#1C1A0F;}
#menu h3 {text-align: right;background:url(../images/house.png) no-repeat ; height: 29px;color: #FFCC00;
padding-top: 10px; font-size: 13px; padding-bottom: 10px;} */
#tabs {position: absolute;top: 231px;left: 482px; }
#tabs ul {}
#tabs li {list-style: none;}
#tabs li a:link,
#tabs li a:visited,
#tabs li a:active {text-align: center;background-color: black;width: 370px;height:
20px;display:block;color: white; text-decoration: none;text-transform: uppercase;}
#tabs li a:hover {text-decoration: underline;}
#admin {position: absolute; top: 200px;}
#admin h2 {}
#admin ul {}
#admin li {list-style: none;}
#admin li a:link,
#admin li a:visited,
#admin li a:active {height: 10px; background-color: #990000;color: black;font-size: 15px;}
#admin li a:hover {background-color: white;}
#footer {clear: both; background-color: black;height: 150px; }
#footer ul {}
#footer li {list-style: none;color: white; width: 900px; text-align: center;}
/* #footer li {list-style: none;color: white; width: 250px;text-align: center;} */
</style>
</head>
<body>
<div id="container"><!-- container start -->
<div id="header"><h1><span>test.com </span></h1></div>
<h2>One Real Estate Agent to handle all your Property Needs Buy, Sell, or Rent.</h2>
<div id="content">
<div id="bar">
<ul>
<li class="green">real estate agent</li>
<li class="blue">foreclosure expert</li>
<li class="yellow">property manager</li>
<!-- <li class="red"><a href="#">Contact MH</a></li> -->
</ul>
</div>
<div id="menu">
<ul>
<!-- <li><a href="index.php">home</a></li>
<li><a href="about_us.php">ABOUT US</a></li> -->
<li><a href="in_foreclosure.php"><h3>in foreclosure</h3>
Melissa Hardaway understands real estate and can provide the analytical detail needed to make the
right purchase</a></li>
<li><a href="property_management.php"><h3>property management</h3>
Melissa Hardaway has manage property for the past 12 years. She has to experience to manage your
properties.</a></li>
<li><a href="address_report.php"><h3>Residential inventory</h3>
Melissa Hardaways current listings..</a></li>
<li><a href="resume.php"><h3>resume</h3>
**Not sure what to do with this tab ****<br />
</a></li>
<!-- <li><a href="contact_us.php">CONTACT US</a></li> -->
</ul>
</div>
<div id="col1">
<!--<div id="tabs"><ul><li><a href="contact_us.php">contact melissa hardaway</a></li></ul></div>
--></div>
</div>
<!-- content end -->
<div id="footer"><div id="footerimage"><span>footer image</span>
<ul>
<li><h3>Melissa hardaway</h3><br>
13337 South Street,<br> Suite 214
Cerritos, CA 90703 <br>
email: melissa@test.com <br>
phone: (123) 123-1234<br>
</li>
<!--
<li><h3>Link</h3><br>
<a href="#">link 1 </a><br>
<a href="#">link 2 </a><br>
<a href="#">link 3 </a><br>
<a href="#">link 4 </a><br>
</li>
<li><h3>Change the Style</h3><br>
<img class="smallKit" alt="Home" src="images/kit_small_home.jpg" onclick="changeStyleSheet('home')" />
<img class="smallKit" alt="Away" src="images/kit_small_away.jpg"
onclick="changeStyleSheet('away')" />
<img class="smallKit" alt="Third" src="images/kit_small_third.jpg"
onclick="changeStyleSheet('third')" />
<a href="#" onclick="changeStyleSheet('home')">home </a><br>
<a href="#" onclick="changeStyleSheet('white')" >white background style</a><br>
<a href="#" onclick="changeStyleSheet('gray')">gray background style </a><br>
</li> -->
</ul>
</div></div> <!-- this is container end -->
</body>
</html>
