Hi, I. Hate. IE6. (Don't we all?! ) I need help to fix a nasty bug. My website (link in signature) is fine in most browser, but with IE6, there is a margin below the header, right before the navbar. The navigation bar is also misaligned. I believe this is due to IE6 doubling margin (could be wrong!) but I can't seem to fix that with the display: inline, as advised to do so by most tutorials. Keep in mind I'm not a coder, just a blogger trying to learn Can you help?
Thank you... will try this way. If you have more detailed instructions, it would be very helpful, since I'm not a coder!
Stop developing for ie6. and Microsoft will have to stop supporting it, and the internet can then move forward.
I agree with you... in principle. My small margin problem doesn't bother me too much because I ditch IE long time ago and apparently, do did 80% of my readers. Yet, I'd like to solve the problem for the other 20%.
I hear ya, IE6 is terrible. When my clients tell me there site isn't working right in IE6, i tell them to upgrade and stop using out of date software. It doesn't happen often though, i think only like 15% still use it.
Sounds about right, between 15-20% of my readers use IE6. I also noticed some countries tend to use it more than others, I wonder if this is due to outdated computer equipment.
You are right about 12% according to some stats are still using IE6, and I personally believe it's 1-2 years before it fades out. Mostly a lot of schools, organisations, libraries etc tend to use IE6, because they have their old computers and don't really upgrade or update for that matter, why I don't know, (Browsers are free) but we have to put up with it. As for your problem, not too sure on first glance what is causing it. Although you do have your main header image inside an id called logo, and this logo is given 350px width, when the header is clearly wider than this. In fact the head seems a little more complicate than it should be, for example you could just use: <a href="http://correresmidestino.com/"><img src="http://correresmidestino.com/wp-content/themes/arthemia/images/HeaderCorrer.jpg" width="960px" height="253px" alt="" /></a> Code (markup): instead of <div class="clearfloat"> <div id="logo" class="left"> <a href="http://correresmidestino.com/"><img src="http://correresmidestino.com/wp-content/themes/arthemia/images/HeaderCorrer.jpg" width="960px" height="253px" alt="" /></a> </div> </div> Code (markup): There is no need at all for the 2 div's around them.
Hi, Thanks for the tip! It made sense to me, but when I tried, it messed up the navigation bar...(moved it to the left) I customized the Arthemia theme and I guess I have to re-write some CSS to avoid that. I thought it would be that simple... for a second! ;-)
Hey, When developing for different IE's use IETester - you can open it up in 5.5,6,7,8 all on your local machine (there's even a mac edition). Just search google for ietester. Also -just a tip- with most IE's when you add padding make sure you take the value off the width. So say a width of 50px which fits nicely - add 5px padding all round - messes up - take 5px off left and right so width becomes 40px - fits nicely again.
Trust me you can get rid of that DIV you still have around your header image.. In fact i've just realised this is part of the problem. You are applying class "clearfloat" to everything and anything, then I looked to find out what clearfloat does and it applys a style of inline-block. There's no need to do this, and possibly the reason why things are screwing up in IE 7/6/5 with the alignment of the header. So remove that DIV around the header image. and remove the cleafloat class from the head, and the navbar. If it changes things a bit don't worry just repost here and we can move from there.
Sorry for the late reply - busy week in real life! You were right. I got rid or one div (I believe anyway ) and it's already much better. There is still a very small space between the header and the nav bar of 1 px or so. I can live with it and so can IE6 users (I mean, they see ugly things because of their browser everyday, don't they?!). I may have a look at that tomorrow. I really appreciated you help and your patience!
Actually, that's true for everyone. Padding adds to the size of a box, and it also goes for the height too. Old IE (5.5 and below) and IE6 or 7 when in Quirks Mode use an incorrect Box Model and they don't expand the size of the box.