Forum Moderators: not2easy
any help?
here is a piece of the design:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>ie6, ie7 problems</title>
<style type="text/css">
body {
background:#CCCCCC url(images/img01.jpg) repeat scroll left top;
color:#616161;
direction:rtl;
font-family:"Traditional Arabic",Times,serif;
font-size:16px;
margin-top:10px;
padding:0;
text-align:right;
}
#wrapper {
}
#page {
width: 90%;
margin: 0px auto;
background-repeat:repeat;
background-position:left bottom;
min-width:754px;
width: expression(document.body.clientWidth < 754? '754px');
}
#mainContent {
background: white url(images/white_pixel.jpg) repeat scroll left top;
margin:0px 0px -19px 184px;
padding:0px 0px 0px 0px;
}
#content {
border:0 solid red;
margin:8px 188px auto 9px;
text-align:justify;
}
#contentHeader {
height:1px; margin: 0 0 0 184px;
}
#contentHeaderLeft {
background: red url(images_temp/img04_1_1_1.gif) no-repeat scroll left top;
float:left;
height:30px;
width:12px;
}
#contentHeaderRight {
background: red url(images_temp/img04_1_3_1.gif) no-repeat scroll right top;
float:right;
height:30px;
width:12px;
}
#contentHeaderMid {
background: yellow url(images/img04_1_2_1.gif) repeat-x scroll 0 0;
height:30px;
margin:0 12px;
}
#contentFooter {
height:1px;
margin:auto;
padding:0;
}
#contentFooterLeft {
background:black url(images/img06_1_1.gif) no-repeat scroll left bottom;
float:left;
height:36px;
width:12px;
}
#contentFooterRight {
background:black url(images/img06_1_3.gif) no-repeat scroll right bottom;
float:right;
height:36px;
width:12px;
}
#contentFooterMid {
background:black url(images/img06_1_2.gif) repeat-x scroll 0 0;
height:36px;
margin:0 12px;
}
#indicator {
font-weight:bold;
padding:0 10px 0 0;
background-color:#00F30F;
}
.centered {
text-align:center;
}
.links {
font-weight:bold;
padding:4px 0;
text-align:right;
}
.links a {
border:medium none;
}
.links a:hover {
}
#sidebar1 {
float:right;
font-size:16px;
margin:auto -4px;
}
#sidebar2 {
float:left;
margin:0;
}
#sidebar2 li h2 {
padding:0 32px 10px 0;
}
#sidebar1 ul {
padding-bottom:20px;
}
#sidebar1 > ul > li {
margin-bottom:10px;
}
#sidebar1 li h2 {
color:#333333;
height:25px;
padding:8px 30px 0 0;
}
#sidebar1 li li a {
}
#rightMenu {
font-size:1.1em;
}
.sidebar {
float:left;
width:180px;
}
.sidebar ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
.sidebar li {
padding:0 0 20px;
}
.sidebar li ul {
}
.sidebar li li {
border-bottom:1px dashed #B5B5B5;
font-weight:bold;
line-height:1.3em;
margin:0 10px;
padding:8px 0 8px 3px;
text-align:right;
}
.sidebar li h2 {
color:#FFFFFF;
font-size:20px;
height:30px;
margin:0;
}
.sidebar a {
margin:auto 14px;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- start page -->
<div id="page">
<!-- start sidebars -->
<div id="sidebar2" class="sidebar" style="border: 1px solid blue;">
<ul>
<li>left menu <br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</li>
</ul>
</div>
<!-- end sidebars -->
<div id="contentHeader">
<div id="contentHeaderLeft"></div>
<div id="contentHeaderRight"></div>
<div id="contentHeaderMid"></div>
</div>
<div id="mainContent">
<!-- start content -->
<div id="content"> content line 1<br>
content line 2<br>
content line 3<br>
content line 4<br>
content line 5<br>
<br><br><br><br><br><br><br><br><br><br>
</div>
<!-- end content -->
<div id="contentFooter">
<div id="contentFooterLeft"></div>
<div id="contentFooterRight"></div>
<div id="contentFooterMid"></div>
</div>
</div>
<div style="clear: both;"> </div>
</div>
</div>
</body>
</html>
[edited by: swa66 at 10:13 pm (utc) on July 10, 2009]
[edit reason] removed unintentional smiley [/edit]
I haven't tested your code, but to avoid this problem I usually begin my CSS with a 'reset' (do a search for 'reset css' and you will find plenty of discussion on the subject)
Basically something like this:
html, body, div, span, object, iframe, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, fieldset, form, label, legend, table, caption
{
margin: 0;
padding: 0;
border: 0;
}
Did the CSS reset make any difference at all?
i only leaved the header.
open it in ie6 and note the space between the 3 DIVs.
/* CSS reset*/ body { #contentHeader { } <div id="contentHeader">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>ie6, ie7 problems</title>
<style type="text/css">
html, body, div, span, object, iframe, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, fieldset, form, label, legend, table, caption
{
margin: 0;
padding: 0;
border: 0;
}
background:#CCCCCC url(images/img01.jpg) repeat scroll left top;
color:#616161;
direction:rtl;
font-family:"Traditional Arabic",Times,serif;
font-size:16px;
margin-top:10px;
padding:0;
text-align:right;
}
#wrapper {
}
#page {
width: 90%;
margin: 0px auto;
background-repeat:repeat;
background-position:left bottom;
min-width:754px;
width: expression(document.body.clientWidth < 754? '754px');
}
height:1px; margin: 0 0 0 184px;
}
#contentHeaderLeft {
background: red url(images_temp/img04_1_1_1.gif) no-repeat scroll left top;
float:left;
height:30px;
width:12px;
#contentHeaderRight {
background: red url(images_temp/img04_1_3_1.gif) no-repeat scroll right top;
float:right;
height:30px;
width:12px;
}
#contentHeaderMid {
background: yellow url(images/img04_1_2_1.gif) repeat-x scroll 0 0;
height:30px;
margin:0 12px;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- start page -->
<div id="page">
<div id="contentHeaderLeft"></div>
<div id="contentHeaderRight"></div>
<div id="contentHeaderMid"><div style="width:1px;">title</div></div>
</div>
</div>
</div>
</body>
</html>
#contentHeaderMid {
background: yellow;
height:30px;
margin:0 12px;
}
you shouldn't need that left and right margin, technically it's doing nothing, elements beside/between floats naturally sit right beside them.
BUT then because IE's quirky float model has been triggered (by the height on that div), you are seeing the wonderful IE 3px Float Bug (IE6 only) - you can fix it by feeding some negative margins on the left and right floats - to IE6 and below only. I've done it using a hack below, but you can put it inside a conditional comment if you prefer
#contentHeaderMid {
background: yellow;
height:30px;
/* margin:0 12px; this is not required */
}* html #contentHeaderLeft {margin-right: -3px;}
* html #contentHeaderRight {margin-left: -3px;}
-I set its background to red just for testing purpose-
You're absolutely right: IE 6,7 and 8 all treat margins and padding differently.
IE 6 incorrectly calculates padding + width - instead of total width / height being CSS width: + padding: , it will instead simply be width: , with padding: subtracted from the inner area of the element
IE 6+7 Don't collapse top margins correctly. This is well documented
IE 8 does both of these things right, but then has some very odd margin collapse bugs.
I'd suggest getting your layout working in FF, and IE 8, then making any (should be minor tweaks) for IE 7.
For IE 6, you need to look up the html>body hack - this will be the best way to fix IE6's padding / width bugs
[edited by: swa66 at 12:48 am (utc) on Aug. 9, 2009]
[edit reason] No URLs, please see ToS and Forum Charter [/edit]
#contentHeaderMid {
background: yellow;
height:30px;
margin:0 12px;
}* html #contentHeaderMid {margin: 0;}
* html #contentHeaderLeft {margin-right: -3px;}
* html #contentHeaderRight {margin-left: -3px;}
OK try this, the bottom three rules are for IE6 only, it doesn't need the margins, even with transparent images, it wrongly starts/ends the middle float where you want it anyway, then you still need the negative margins to counteract the secondary 3px bugs.
