New Topic/Question
Reply
I am having trouble with IE9. When I preview the site I am designing in FireFox, it looks great, but when I preview it in IE9, it shows a double margin on my 2 float elements. I have a Header div, and inside is logo which has a float left, and another div called coldwell that has a float right. I tried adding the display:inline but I still seem to have the extra margin on the left and right side of the header. I have attached 2 images. One is in FF that shows the logo on the left closer to the edge, which is where I want it. The IE image, shows the logo on the left pushed more towards the right, which I do not want. Any ideas? Here is my code.
<body>
<div id="page-wrap">
<div id="left"></div>
<div id="right"></div>
<div id="container">
<div id="header">
<div id="logo">
</div><!-- end logo-->
<div id="coldwell">
</div>
<div id="links">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../index.html"> home</a></li>
<li><a href="../about.html">about me</a> </li>
<li><a href="../coldwell.html">coldwell banker</a></li>
<li><a href="../listings.html">listings</a></li>
<li><a href="../buying.php">buying</a></li>
<li><a href="../selling.html">selling</a></li>
<li><a href="../blog.html">video blogs</a></li>
<li><a href="../contact.php">contact me</a> </li>
</ul>
</div><!-- end links-->
</div><!-- end header-->
<div id="main_image">
<div class="slideshow">
<img src="../images/header.png" width="900" height="360" alt="" />
</div>
</div><!-- end main_image-->
<div id="top_bar"></div>
<div id="mid_bar"></div><!-- end mid_bar-->
<div id="bottom"></div><!-- end bottom_bar-->
</div><!-- end container-->
<div id="bottom_bar"><div id="card"></div></div>
</div><!-- end page wrap-->
</body>
@charset "UTF-8";
/*
Author:
Created On:
Revised On:
CSS Version: 2.1
Purpose:
Related Files:
*/
/* Clear default styling from block level elements */
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form,
fieldset, blockquote, float {
margin: 0;
padding: 0;
border: 0;
}
* {
overflow: visible !important;
}
.clear {
clear:both;
}
html, body {
background-color: #fff;
height: 100%;
overflow: scroll;
}
a:link{
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
text-decoration:none;
}
a:visited{
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
text-decoration: none;
}
a:hover{
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
text-decoration: underline;
}
a:active{ /*currently selected tab*/
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
text-decoration: none;
}
#page-wrap {
background-color: #443b7e;
width: 100%;
}
div#left {
float: left;
width: 338px;
background-image: url(../images/bgleft.jpg);
height: 620px;
display: inline;
}
div#right {
float: right;
width: 338px;
height: 620px;
background-image: url(../images/bgright.jpg);
display: inline;
}
#container {
width: 900px;
margin-right: auto;
margin-left: auto;
overflow: scroll;
position: relative;
}
#header {
width: 900px;
height: 170px;
background-color: #CCC;
margin-left: 0;
margin-right: 0;
}
#logo {
background-image: url(../images/logo.png);
height: 110px;
width: 414px;
float: left;
background-repeat: no-repeat;
margin-top: 15px;
display: inline;
}
#coldwell {
height: 90px;
width: 350px;
background-image:url(../images/ColdwellBanker-3dLogo.png);
background-repeat:no-repeat;
float: right;
margin-top: 28px;
margin-right: 60px;
display: inline;
}
#youtube {
background-image: url(../images/youtwit.png);
height: 45px;
width: 208px;
float: left;
margin-top: 45px;
margin-left: 60px;
}
#links {
float: right;
width: 800px;
padding-top: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
z-index: 998;
display: inline;
}
#links #MenuBar1 li a {
border-top-width: 2px;
border-right-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-left-color: #FFF;
background-color: #264480;
}
#main_image {
width: 900px;
height: 360px;
}
#mid_bar {
width: 864px;
background-image: url(../images/mid.png);
overflow: auto;
padding-left: 18px;
padding-right: 18px;
position: relative;
}
#top_bar {
width: 900px;
background-image: url(../images/top.png);
height: 15px;
}
#bottom {
height: 24px;
width: 900px;
background-image: url(../images/bottom.png);
}
#bottom_bar {
height: 300px;
width: 100%;
margin: auto;
background-color: #1F1F1F;
margin-top: 40px;
background-image: url(../images/bottom_bg.jpg);
background-repeat: repeat-x;
}
#bottom_bar #card {
background-image: url(../images/bottom_card.jpg);
background-repeat: no-repeat;
height: 262px;
width: 900px;
margin-right: auto;
margin-left: auto;
}
MultiQuote
| 