This is not a new bug in ie, it is just the way that ie is handling your css.
ie is very unpredictable with how it reacts to certain things. one of them is using percentages in css.
for instance, if you have the width of the blog set to 1000px, and the sidebars width at 50% and the posts width at 50%, ie will behave as you described. this is because for some reason, it doesn’t like things adding up to 100%!
in this situation you would need to set sidebar o 48% and post to 48% for ie to like it.
my advice is don’t work with percentages, and never let the width of your content total up to be exactly the width of the container.
hope that helps you fix it.
-jackosh
Thanks for responding jackosh! I am not using percentages though! Mainly from lack of CSS experience.. I haven’t put a single percentage figure in there as far as I can recall.
(I started out from another theme, and the guy who wrote that used a few percentages. But not in relation to any of the elements that are behaving strangely.)
I am not sure it could be percentages that cause this actually…. Any other idea, or did I get it wrong?
Jo
could be the same problem, but with exact widths. for example, if you set the container width to 1000px, the sidebar width to 500px, and the post width to 500px., then had the post float left, and the sidebar float right, both within the container.. you would be better off with the sidebar width set to 490px and the post width to 490 just to be safe..
does that help??
ok, here is one problem in your css:
.page {
max-width:1020px;
min-width:980px;
position:relative;
text-align:left;
}
--------------------------------
.header1 { /*The top part of the header*/
background: url(images/header1.jpg);
top:-2em;
height:41px;
width:1150px;
background-position:top left;
background-repeat: no-repeat;
position:relative;
}
The width of header1 is 1150px and the max-width of page is 1020px. header1 is an element of page, and therefore its width cannot exceede the width of page!
Hi! Yes, that’s closer to the mark. I just realised that the problem is related to whether position:relative; is used. (that triggers it)
So the best solution would probably be not to use position:relative; (I want to though! )
Am trying to make some sense of all the IE bug reports and suggested fixes at “positioniseverything.net, but it is getting a bit late here in England.
Is there anyway I can simply hide the position:relative; from IE6?
Jo
I am getting a bit tired and
sure, throw in
* html .header1{ position:inherit;}
AFTER .header1{}
or, to get rid of position all together,
* html .header1{ position:;}
may work, but probably won’t validate..
but you seriously need to change the width of .header1{}
..it really can’t be bigger than .page{} because it’s in .page{}
Hi Jackosh! I didn’t see this post until now. Thanks for the tip! Very userful The page is beginning to look quite nice, but I suspect the code would look pretty bad to someone with experience.
Thanks!
Jo
