Hi
I’m having a problem with a 1px left border appearing on an inner layout div container – predictably this happens in IE (but not FF).
The CSS is below. You will see that I have the main div (#container_main_shadow) holding an inner content div (#container_main_sub).
You can see this here:
http://www.walkertest.co.uk/condor/w01540_condor_web/test.html
The inner content div (#container_main_sub) appears to be causing the problem in IE.
My 1 idea on a fix at the moment is an issue with the width of container_main_shadow background image (1024px) and the width of the inner container (995px) – with these both centred the left/right space is 29px / 2 = 14.5 px. Which I guess may be problematical for IE.
But before playing around with this some more – does anyone have an ideas on a css IE fix?
Grateful for any help
Thanks
Dirk
p {margin: 15px 0px 0px 0px}
body {
background-image: url(graphics/bg_main.gif);
margin:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
padding:0px;
border:0px;
}
#container_main_shadow{
position:relative;
background-image: url(graphics/bg_strip_gradient.jpg);
top:auto;
left:0px;
width:1024px;
height:auto;
background-color:#FFFFFF;
padding:0px;
margin: auto;
}
#container_main_sub{
position:relative;
top:0px;
width:995px;
height:1200px;
background-color:#FFFFFF;
margin:auto;
padding:0px;
}
#container_shadow_bottom{
position:relative;
background-image: url(graphics/bg_strip_gradient_bottom.jpg);
background-repeat: bottom left no-repeat;
left:0px;
top: auto;
width:1024px;
height:25px;
margin: auto;
padding:0px;
}