Forum Moderators: not2easy
I just have a header, a sidebar and mainContent div. The sidebar is floated to the left with a certain width and the mainContent is not floated it just has a margin big enough to leave a space of 1 pixel between the sidebar and itself. But IE6 is giving some problems with this, the mainContent content(which is an image) its being pushed down as it didnt fit in the mainContent divission. All of them, the sidebar, the header and the main Content have an image inside temporary cause here Im supposed to embed a swf after i finish the layout.
Other problem is that im also getting a 4px gap under the header in IE7 and 6, this is always happening and i can fix it if a float the header, but isnt there a way i can solve this without doing this?
So here is the code for reference.
CSS
--------------------------------------
* {
padding: 0px;
margin: 0px;
border: none;
}
body {
font: 100% Arial, Verdana, Helvetica, sans-serif;
background: #333333;
margin: 0;
padding: 0;
text-align: center;
color: #CCCCCC;
background-image: url(../images/background.jpg);
}
.common #container {
width: 780px;
background: #666666;
margin: 0 auto;
border: 1px solid #999999;
text-align: left;
padding: 10px;
background-image: url(../images/bgdesign.jpg);
background-position: 20% 20%;
margin-top: 20px;
border-bottom: none;
}
.common #header {
background: #000000;
}
.common #sidebar1 {
float: left;
width: 154px;
padding-right: 1px;
}
.common #mainContent {
margin: 0 0 0 155px;
_margin-left: 156px
}
---------------------------------------
XHTML
---------------------------------------
<body class="common">
<div id="container">
<div id="header">
<img src="images/001 Banner.jpg" alt="XMMA" />
</div>
<div id="sidebar1">
<img src="images/menubar.jpg" alt="menubar" />
</div>
<div id="mainContent">
<img src="images/movie.jpg" alt="movie" width="625" height="350" />
</div>
</div>
</body>
-------------------------------------------
additional notes:
I have this code in the top of my page
<!--[if IE]>
<style type="text/css">
.common #mainContent { zoom: 1;}
</style>
<![endif]-->
and it doesnt fix it either.
thanks in advance.
Modify your style
.common #mainContent {
margin: 0;
float: left;
}
and Add following div in your code
<div id="mainContent">
<img src="images/movie.jpg" alt="movie" width="625" height="350" />
</div>
<div style="clear:both"></div> <!-- this div will clear your div floating -->
I have tested this code in ie6 and its working fine..if you have any query please feel free to reply.
so enjoy
Cheers!
