Forum Moderators: not2easy
The shadow consists of two images 8 pixels wide and 509 pixels high, (one floated left and one floated right), the lower ends of which fade into the gradient background color.
I put the left and right shadows inside a wrapper otherwise they moved to far left and right edges of the page. The wrapper is 16 pixels wider than the container so it will contain the two shaddow images. There is no padding or margins on these items so I'm not sure what's wrong. I tried increasing width of the wrapper but that didn't work either. I tried adding z-index:-1; but that didn't help so I don't think this is the cause (I'm aware that IE 6 has an z-index bug although I don't know how to fix it).
This displays correctly on all browsers on the Mac and Firefox on Win XP but not IE 6 Win XP where it forces the content below the images which are 509 pixels high.
Can anyone tell what the problem might be?
Here is the relevant code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<style type="text/css">
body {
margin: 0px;
background-color: #E5E5E5;
font-family: Tahoma;
font-weight:normal;
font-size: 12px;
color: #333333;
background-image:url(images/site-bg.gif);
background-position:top;
background-repeat:repeat-x; }
/*provides boundary for left and right shadows*/
div#wrapper {
width:778px;
margin-left:auto;
margin-right:auto; }
div#left {float:left;
width:8px;
height:509px;
z-index:-1;
background: url(images/lshad-grad.gif);
background-repeat: no-repeat; }
div#right { float:right;
width:8px;
height:509px;
z-index:-1;
background: url(images/rshad-grad.gif);
background-repeat: no-repeat; }
div#container {
width:760px;
border:1px solid #cccccc;
margin-left:auto;
margin-right:auto; }
</style>
</head>
<body>
<div id="wrapper">
<div id="left"> </div>
<div id="right"> </div>
<div id="container">
###########content goes here#######
<br>blah
<br>blah
<br>blah
<br>blah
<br>blah
<br>
</div>
</div>
</body>
</html>
div#containerTry changing
width:760pxmin-width:760px
I've been playing around with the code and changed the width of wrapper to 784 and then the page loads correctly. However then there is a blank space between the left and right shadow images and the container edge. The container has a width of 760. If you count the border on each side of the container that only goes up to 762. Which means there are 22 pixels of space messing up this layout, i.e., 11 pixels on each side of the container.
I checked the CSS file and there is nothing with a margin or padding that would affect the width of the content/container/footer.
Any one know what could be causing this?
The two above suggestions didn't work as they messed up the layout.
Any one know what could be causing this?
ie6 draws floats in a way that produces layout differences with other ua's, especially when mixing floats with non-floated elements, and setting a width on some, and not all of the elements. max/min-width worked on the provided code because it removed the specified width from non-floated div#container. On the provided code that was enough.
You might try any of the suggestions in the thread linked above in the code you are working with, however another way to is try to avoid "fixes" - and just try to avoid triggering the effect. One way to do that is to modify your html so div#right comes after after div#container in the source. Then set
float:leftclear:bothOn the provided code that resolves the reported problem on the listed browsers without any other change to the posted code.
Another option is to remove the floats and set
position:relativeposition:absolutetop:0;left:0left:8pxleft:768px
body {
margin: 0px;
background-color: #E5E5E5;
font-family: Tahoma;
font-weight:normal;
font-size: 12px;
color: #333333;
background-image:url(images/site-bg.gif);
background-position:top;
background-repeat:repeat-x; }
/*provides boundary for left and right shadows*/
div#wrapper {
width:778px;
margin-left:auto;
margin-right:auto;
background-color:#00FF00;
}
div#left {float:left;
width:8px;
height:509px;
background:#FF0000;
background-repeat: no-repeat; }
div#right { float:right;
width:8px;
height:509px;
background-repeat: no-repeat;
background-color:#FF0000;
}
div#container {
width:760px;
border:1px solid #cccccc;
float:left;
background-color:#FFFF00;
}
I think the problem was that the margin auto on both sides was pushing the 2 divs down
hope this works for you, tell me how u get
also I removed the z-index as I think this only works when you have element set with position:relative/auto/fixed etc...
