I ran into a bug using the Zeke template for WordPress . Zeke is a very nice 3 column theme by Michael D. Pollock.
There isn’t an easy way to implement 3 columns in CSS and Zeke does it as two, two column groups.
#wrap , 960px wide
|
#rightcontentfloat rightwithin #wrap |
The theme was working just fine with FireFox and Internet Explorer 7, but Internet Explorer 6 was not. The middle column, #midcontent, was sliding to left, just enough to cause the Post (s) to slide down below the entire middle column.
There is a well know bug in Internet Explorer 6 in the way it renders content that floats, when it’s contained within floating content. According to this link, IE6 doubles the margins. The Zeke WordPress theme doesn’t use much in the way of margins and the “display: inline;” fix mentioned in the article didn’t work.
I noticed that Zeke does use quite a bit of “padding” and discovered that IE6 was indeed getting the padding wrong.
According to this website (and others) it is possible to have CSS tags that IE6 processes and other browsers ignore, just by placing a _ in front of the tags. I was able to copy the “padding” line for #midcontent and create a new line that only IE6 would process, without the padding on the right.
Edited to add: You need both padding: and the _padding: lines in your #midcontent section.
See the code below:
#wrap {
padding: 0 5px;
clear: both;
width: 960px;
margin: 0 auto;
#contentleft {
width: 680px;
float:left;
padding: 0;
margin: 0;
}
#content {
width: 499px;
float: left;
margin: 0 1px 0 0;
padding: 0;
}
#midcontent {
width: 160px;
float: right;
margin: 0;
padding: 10px 10px 15px 0;
_padding: 10px 0px 15px 0; /* this did the trick. Only IE6 should process this line */
}
#contentright {
width: 250px;
float: left;
padding: 15px 0 15px 15px;
margin: 0;
}
Now, everything is working great!
Twitter
Delicious
LinkedIn
Flickr
on Jan 21st, 2008 at 9:37 am
I did what you wrote by putting an underscore in the padding but still it is not working in IE6! I really love this theme and prepared to customized it once the layout all looks normal!
on Jan 21st, 2008 at 10:47 am
Grace:
You actually need BOTH the padding: line and the _padding: line right under it in the #midcontent section. The first is fro IE7 and FireFox and the second tricks IE6 into behaving.
Also, I looked at your blog, and as Michael Pollock of SoloStream told me, the template only supports photos up to 469 pixels across. Some of your photos are larger than this. If you crop or reduce them, the template will work without my modification.
-Eric
on Mar 28th, 2008 at 10:58 am
Hi Eric, I am pretty familiar with CSS but never copped that the _property was what ie6 looked for even though i have seen it so many times.
That tip has been so helpful, 35% of users are still on ie6 in 2008 unfortunately so we need to accommodate.. majority rules!
on Mar 28th, 2008 at 11:50 am
Thanks for the comment. I was double checking an it appears that _property isn’t something that looks for, rather it should be invalid, but IE6 is too lame to notice.
Maybe IE8 will be standard enough that we will no longer have to be concerned what browser our readers are using.
-Eric
on Jun 3rd, 2008 at 4:03 pm
This hack worked perfectly for me. I have a couple projects that have(had) a problem with the third column dropping down due to extra padding added by IE6. This did the trick to fix it easily.
Thanks
on Jul 7th, 2008 at 2:07 pm
You just ended a four hour stand off between me IE6. I wasn’t nearly close to giving in but it sure was frustrating.
Once again, THANK YOU!!
I think I would have shaved off 3-1/2 hours if I searched Google using better search terms. My bad.
on Jul 23rd, 2008 at 8:02 am
Thanks!!! You just saved my day.
For some reason IE6 also insists that divs be at least 16 pixels high. Don’t know why???
on Aug 3rd, 2008 at 3:17 pm
dennis I think it’s using either line height, font size, font height or all of those. for super thin divs change those properties and i think it will work.
on Aug 19th, 2008 at 2:12 am
Hi – I can do with a bit of advise for ie6 and older versions – on how to “center” a page restricted to a set width.
(see the relevant css extracted code below)
The pages on the listed website above positions fine (centered) in ie7, firefox and opera. But the page sits up-along the lefthand side in ie6 and older microsoft browsers. View the website in the browsers mentioned to see what I mean.
I can realy do with advise or a “fix” if anyone can help. (css to center page below)
/** BODY **/
body {margin:10px; height:100%; background-color:#fafafa;}
/* CONTAINER : centered */
#container {margin:0 auto; width:754px;}
You have a nice and interesting website
Kind Regards
Stephane
on Aug 19th, 2008 at 11:03 am
Thanks for the reply cos! I will give it a try.
on Aug 23rd, 2008 at 5:58 pm
Stephane:
I don’t know specifically what to fix, but there is a site here that lists the IE6 bugs that are fixed in IE7. Maybe something there will help.
http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx
Remember that you can have a line for normal browser line followed by a line that starts with a _ for IE6. If you wanted to reduce the body margin to 5px for IE6, you could have:
body {margin:10px; height:100%; background-color:#fafafa;}
_body {margin:5px; height:100%; background-color:#fafafa;}
-Eric
on Aug 26th, 2008 at 3:54 pm
Hi there…found your site in some google searching. Thanks for posting this helpful information. I’m not sure if my problem is related, but I have a page that works everywhere except in IE6. IE6 does not account for the padding in the CSS for the bottom two elements of the page. Works great in Safari, Firefox and IE7. Any thoughts?
Thanks!
-Stefan
on Aug 28th, 2008 at 7:32 am
Stefan:
This website: http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml has some great tips on CSS bugs in IE6. The first tip looks at CSS padding and may give you some insight.
I especially like the html>body hack that lets you put in commands for all browsers _except_ IE. It’s the inverse of the _ hack above.
-Eric
on Aug 28th, 2008 at 7:36 am
Stephane:
See the website I mentioned to Stefan, http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
The last tip #6, looks at centering in IE6.
It looks like you’d add:
text-align: center
to the body. If you want left aligned text, list add
text-align: left
to the #container.
-Eric
on Sep 5th, 2008 at 3:26 pm
Hi, I have a question about IE6 and random padding that I was wondering if you guys could help me with. I was working on an HTML template, hence the use of tables and terrible inline CSS and the tag, and I am was trying to use the code as is to put the newsletter on a clients website. http://www.seilevel.com/landing/Q3Newsletter.htm For some reason in IE 6 the banner in the upper corner just will not line up and I cannot figure out why. Hopefully this is on topic, and I appreciate your help in advance!
on Sep 9th, 2008 at 2:13 pm
Amanda:
I looked at your page and it is very straight forward. I believe that if you look at the page I mentioned to Stephane and Stefan, items #2. They say that IE will treat the width as a minimum width and may expand the boxes to fit. Maybe that will help. It looks like your box and table are the same size, so IE may be calculating that it needs more space. Perhaps if the table was larger than cell, which was larger than the header. Then center everything.
on Sep 11th, 2008 at 2:50 pm
great ie6 – my stuff works on everything from google, safari, ie, 6 & 7 EXCEPT ie 6 it had a photo quirk that required a negative margin on a photo of -3px. your incredible ie 6 fixed really improved the user experience. Great work, tip! kudos!
on Sep 17th, 2008 at 10:48 am
Thanks for posting this – I’m tearing my hair out trying to get a site to work in IE6 as well as in real browsers – this stuff is helpful!
on Feb 9th, 2009 at 1:33 pm
O – K!
Looking forward to trying out this fix. Been annoyed about this idiotical error in IE6 for a while, cant wait to try it on my server…
Also annoyed by IE7, it reads CSS slightly wrong compared to opera and the others. Meaning; IE7 is not to be trusted either! You can make bad css that looks good in IE7, bur in reality, it’s crap. So use Firefox or Opera for debugging.
” If I can make it there, I’ll make it anywhere”
Thanks for posting this thread..
on Feb 20th, 2009 at 3:33 pm
Thanks for this. Idiotic IE6 is the bane of my existence and stuff like this happens especially at deadline time
on Feb 25th, 2009 at 5:54 pm
thanks a lot, solved my ie6 problem in a jiffy.
on Mar 4th, 2009 at 6:22 am
Thanks – the _padding trick just solved my problem! I hadn’t come across this fix before so thank you.
on Apr 16th, 2009 at 6:42 pm
waoowww.I think how I fix this issue about 3 hours and found here.Thank you so much, you save my day.it’s so simple
on May 9th, 2009 at 7:08 pm
Hi peeps.
Looking for a solution for a bug i’m getting on my hp.
I have a set of rollover buttons for navigating the site, and in between these pic’s IE will set totally random spaces, which really messes the apperance up. I’m only getting the bug in IE, orther browsers (FF, Opera etc.) looks fine.
I’m really no expert on html, css, java or any other computing-language, so I’m here fishing for a solution to sort of “fall out of the sky”.
Even a hint as to where I should be looking for a polution, or partial solution will be greatly appriciated!
HP: http://hardwareblog.dk
Peace & love
)
on May 11th, 2009 at 9:06 pm
Your site looks fine in IE8 in both compatibility mode and standard. Can you point me to a specific occurrence?
on Jun 28th, 2009 at 8:16 pm
This is a great workaround. Thanks for sharing your knowledge with everyone. This will definitely be handy for future use.
on Jul 21st, 2009 at 5:14 am
Hi
The trick worked on IE6 (with a margin, not padding), but now it displays the _margin instead of the margin on IE7, without doubling the margins, so that’s another problem…
on Jul 21st, 2009 at 2:33 pm
I’ve used it with IE7 and it appears to working. These guys had a lively discussion about this subject:
http://forums.whirlpool.net.au/forum-replies-archive.cfm/825689.html
It appears that either you want to change the DOC TYPE to Transitional OR try the conditional comment:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose. dtd”>
OR
<!–[if lt IE 7]>
<style … >
</style>
<![endif]–>
on Jul 28th, 2009 at 12:12 am
I’m trying to build a website and learn how to use CSS at the same time. Therefore, I took a template layout and worked it out. However, both my 2 columns and 3 columns break in IE6. I tried display:inline and _padding commands but they don’t work. I’m still learning css. so I was wondering if you could take a look at this in ie6 and give me some kind of direction on how to fix this problem. Thanks
http://www.evhmc.com/versionwhite
on Jul 30th, 2009 at 9:11 am
Looking over the files, I’m a little confused, because in the main document, you have conditional code for IE6, but the IE6 specific main-msie.css file looks like it’s only overrides, compared to main.css, which will not get called for IE6.
Also, in the main.css file, you have some _padding, which you should be able to use correct the padding mistakes of IE6, but they are the same and the normal padding.
Try changing the _padding to 0px then use something else to fix positioning. maybe use _margin (after margin) to fix positioning…
I’d be interested in what works
-Eric
on Jul 30th, 2009 at 3:04 pm
Thanks for responding. Like I said, I am new to css and decided to learn by using a template. However, I am really frustrated about the IE6 bug issue. I honestly don’t now what to do now.
I guess I tried insert _margin:0 into the code but it didn’t help with how its rendered in IE6.
any other advice?
on Jul 31st, 2009 at 7:21 am
I’d start by NOT using the main-ie6.css and only use the main.css.
Then, remove the _margin:0, we don’t know if you need it yet, and change the _padding: to _padding: 0px; and see what that looks like.
If it’s still off, use _margin OR _padding to adjust for IE6.
on Aug 13th, 2009 at 9:12 pm
Hi Eric,
thanks for the trick, it’s really useful.
only one problem using it is when validate the css code at W3C CSS Validator.
is there anyway to get the same results and but valid code as well?
thanks again.
on Aug 13th, 2009 at 9:32 pm
Edit/Update:
I used what in the site that you mentioned above http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml in the the first tip and it works.
but if there are other tips for this issue, please let us know.
on Aug 15th, 2009 at 10:15 am
XO39:
Unfortunately, it will be flagged as invalid CSS, because it is.
You could look at my comment#28 here:
http://www.ericsprojects.com/?p=207#comment-32209
It appears that there is a different approach, where you could specify different CSS files, based on the browser version. Be sure to click on the link and read the forum discussion.
on Aug 17th, 2009 at 8:20 pm
Thanks dude. That underscore trick for IE worked. Some other sites had much more complicated solutions, but yours is simple and effective.
Matt
on Aug 18th, 2009 at 8:50 am
Thank you. Glad it worked for you.
on Aug 23rd, 2009 at 4:45 pm
Excellent – much appreciated.
Somehow a div was being pushed 75px out of line in IE6.
Padding and margins both 0. Using floated div inside another.
The underscore trick worked perfectly:
_margin-left: 75px;
Still displayed perfectly in IE7, Opera, Firefox – the correction is only visible in IE6.
Regards,
Andrew.
on Aug 24th, 2009 at 7:19 am
You are welcome!
on Sep 10th, 2009 at 4:49 pm
Great job!!!
I’ve been searching for a fix for so long and tried so many things.. this is brilliant!!!
on Sep 24th, 2009 at 4:40 am
Hi Eric,
thanks a lot for the trick with the underscore! In order to keep the CSS valid, I used this solution:
My container (#rightcolumn) should have a width of 200px with padding-left 5px and padding-right 5px.
1. Using the underscore trick:
#rightcolumn {
width: 190px;
_width: 200px; /* for IE6 only, which works fine */
padding-left: 5px;
padding-right: 5px;
}
2. In order to get valid CSS and without needing any browser hack, I added a second container (#rightcontent within #rightcolumn):
CSS:
#rightcolumn {
width: 200px;
}
#rightcontent {
padding-left: 5px;
padding-right: 5px;
}
As far as I found out yet, the different padding-interpretation occurs only in combination with a fixed width or height. So I splitted width and padding in two separate containers.
on Jan 21st, 2010 at 9:08 pm
Oh man, reading your ie6 padding issue workaround has saved me erm, like, lots of hours of my life and also saved me from having a less that optimal site. So thankyou!!
I was on the verge of a rewrite, because of the stupid ie6 issues, adding that extra line with the “_” in it just saved the day. Cheers
on Jan 22nd, 2010 at 11:24 am
Glad it helped. I have so many people still using IE6, including my wife and people at work. I just can’t get them to upgrade past Windows 2000.
on Feb 3rd, 2010 at 5:30 am
Thanks for sharing, Dreamweaver shows that hack as invalid but IT WORKS!!
on Mar 13th, 2010 at 5:58 pm
You don’t need the underscore hack to make ie6 work. What you can do is something like this:
padding: 5px !important /*all other browsers including ie 7 and 8
padding:2px /*ie 6 only */
The important hack can be a very useful method when applying hacks to ie6 alone while affecting other browsers differently
on Mar 15th, 2010 at 3:59 pm
Thanks Neil. !important is clear and easy to read. I’ll think about using it if I have IE6 problems again.