Posted by NonProfit on February 22, 2010 at 7:22pm
Hi, IE6 is breaking my Zen layout. I believe the issues relates to clearing #main, but for the life of me, can't figure out what I need to do. Any insight greatly appreciated.
http://rhill.gogrow.org/entertaining/
Thanks!
-NP
Comments
I'm at the point where, if a
I'm at the point where, if a design is severely broken in IE 6 and can't be easily fixed, I create a big red block at the top of page.tpl.php that says "Please upgrade to IE 8 or better," set it to display:none in my regular CSS files, but set it to display:block in my IE 6 CSS file. It's just not worth it anymore. (I haven't yet given up on IE 7 to the same extent.)
I don't have easy access to IE 6 at the moment and haven't checked out your design with it, but if you think it can be salvaged, I suggest you check out the Internet Explorer Developer Toolbar, if you haven't already. It's kind of like Firebug for IE - not nearly as functional, but it's just enough to tinker with a design's CSS in real time and figure out how to tease IE into making it look presentable.
The Boise Drupal Guy!
IE upgrade message
There are two or three Drupal modules that perform this customization - showing a message to upgrade. I am a fan of them even more lately.
Chris Charlton, Author & Drupal Community Leader, Enterprise Level Consultant
I teach you how to build Drupal Themes http://tinyurl.com/theme-drupal and provide add-on software at http://xtnd.us
Thank you
Garrett, thanks much for a wonderful suggestion. It's been so long since I worked in IE, I'd forgotten about that. I'm still having difficulty, but this is a huge help. -NP
Call me crazy, but I still
Call me crazy, but I still try to support IE6. I guess I've developed techniques that work most of the time, so it usually just works. This case is kinda weird though...
I'm pretty sure this is the "double margin bug".
http://www.positioniseverything.net/explorer/floatIndent.html
I was just able to fix it with the IE web developer toolbar by adding:
#content {display: inline;
}
I didn't test this in firefox, etc, so use at your own risk.
Later,
Chris.
I won't call you crazy. And
I won't call you crazy. And really, if you don't stray too far from Zen's standard layout methodology, it's not too hard to make an IE 6-compatible layout with it, because so much of the hard work is done for you already. But every now and then, one of our designers will pass off to me a mock-up which requires me to do some serious tinkering, and if somewhere along the process I cause an IE 6 freakout that can't be easily fixed… well, I've just stopped sweating it.
The Boise Drupal Guy!
double margin bug on floated sidebar?
Without digging too deep, looks like IE6 just snarfed the left margin, and pushed everything over to the right. does the display:inline trick solve anything?
I rely heavily on IEtester to check stuff in several versions of IE. a little buggy, but still very useful.
Lately I've been degrading new site designs for IE6. I still make sure its usable and doesn't look broken, but I will strip out style elements that ie6 has a hard time with. At least it makes the challenge of compatibility simpler.
good luck-
(oops, replied to wrong post…
(oops, replied to wrong post… please delete. =[ )
The Boise Drupal Guy!
Thanks a million!
mr_spark, criznach & Garrett Albright, thank you all for your help!
I've had good luck with Zen and 960 rendering well in IE6 and I don't know what I did differently this time.
I did a lot of things I don't like to do, including using relative positioning and !important tag. But here is what did the trick;
Added to ie6.css:
#content {
display: inline;
margin-left: 170px !important;
padding-left: 35px !important;
}
#content-area {
padding-left: 10px !important;
}
#navbar {
position: relative;
left: -15px !important;
}
#sidebar-left {
position: relative;
left: -15px !important;
}
I've got two pages which were rendering differently. I have no idea why, it's only IE. One sort of makes sense, as it has a unique .tpl.php, but the other comes through page.tpl.php, just like the first.
As luck would have it, the same code fixed them both:
ie6_view.css:
#navbar {left: -35px !important;
}
#sidebar-left {
left: -35px !important;
}
It's ugly.
It's embarrassing.
It's done.
Thanks!
-NP
Display: inline is the way to
Display: inline is the way to go.
What happens is, when you add margins to the left or right of a floated element, in IE6 these margins are doubled. Display: inline should be ignored (and it is by all other browsers) because a floated element automatically receives a display of "block". But in IE6, for a reason I'm not sure anybody really knows even at Misrosoft, it fixes the double margin… So it's an easier fix than specifying different margins and using !important.
So you just need to make a habit of: float + margins = add display:inline
Thanks
Thanks elv! -NP