IE + CSS = @#$%&*!!! Help!
So I'm working on a project for work, using a variant of the "horizontal sliding panel" code I mentioned below. Everything works perfectly everywhere ... except, of course, in IE, which seems uninterested in recognizing my overflow: hidden property. Here's the lowdown:
The HTML:
[HTML]
<div id="wrapper">
<div id="shifter">
<div class="module">Blah blah blah content</div>
<div class="module">Blah blah blah content</div>
<div class="module">Blah blah blah content</div>
</div>
</div>
[/HTML]
The CSS:
It's an online quiz. Each .module contains a question and a set of possible responses. You're only supposed to see one .module at a time, and when you find the right answer, you get a link that slides #shifter over to reveal the next question. The #wrapper div is only supposed to show one 700-pixel-wide .module at a time, and hide the rest.
IE, hateful beast that it is, insists on ignoring that overflow: hidden and showing every single .module.
Before you ask, I've tried changing the overflow:hidden on #wrapper to overflow-x: hidden, to no avail. I've also tried changing overflow: hidden to overflow: auto and overflow: scroll. No change.
The sites I've found for similar problems say that applying a specific width to #wrapper should fix the problem, but since #wrapper's had a specific width from the start, this does not exactly help.
O mighty brains of the Internet, hear my humble plea for help! Aside from storming Redmond with pitchforks and torches, what can I do here?
UPDATE: Removing the "position: relative" from #shifter correctly hides the overflow content in IE6 ... but breaks the jQuery for some reason. The animation no longer works.
As Charlie Brown would say, oh, good grief.
UPDATE TO THE UPDATE: The people responsible for the sacking have been sacked. No, wait, that's the credits to Monty Python and the Holy Grail. In short? I fixed the damnable thing, and it now runs like it should in every browser I can find to test it on.
Turns out that the one instance in which IE6 will display "overflow: hidden" and "position: relative" properly is in its "Quirks mode," which you can trigger by leaving off a DOCTYPE declaration at the top of the HTML file.
That unfortunately kills "margin: auto," because IE is nothing if not disagreeable. But you can work around that, too, by applying "text-align: center" to your body element, and "text-align: left" to your #wrapper div. And there was much rejoicing.
In conclusion ... Dear Microsoft IE6 programmers: Please hit yourselves in the face, repeatedly, with something large and unpleasant and preferably pointy.
-- Nato
The HTML:
[HTML]
<div id="wrapper">
<div id="shifter">
<div class="module">Blah blah blah content</div>
<div class="module">Blah blah blah content</div>
<div class="module">Blah blah blah content</div>
</div>
</div>
[/HTML]
The CSS:
#wrapper { width: 700px; margin-left: auto; margin-right: auto; padding: 0; overflow: hidden; }
#shifter { position: relative; width: 2100px; margin: 0; }
.module { width: 700px; float: left; display: inline; padding: 0; margin: 0; }
It's an online quiz. Each .module contains a question and a set of possible responses. You're only supposed to see one .module at a time, and when you find the right answer, you get a link that slides #shifter over to reveal the next question. The #wrapper div is only supposed to show one 700-pixel-wide .module at a time, and hide the rest.
IE, hateful beast that it is, insists on ignoring that overflow: hidden and showing every single .module.
Before you ask, I've tried changing the overflow:hidden on #wrapper to overflow-x: hidden, to no avail. I've also tried changing overflow: hidden to overflow: auto and overflow: scroll. No change.
The sites I've found for similar problems say that applying a specific width to #wrapper should fix the problem, but since #wrapper's had a specific width from the start, this does not exactly help.
O mighty brains of the Internet, hear my humble plea for help! Aside from storming Redmond with pitchforks and torches, what can I do here?
UPDATE: Removing the "position: relative" from #shifter correctly hides the overflow content in IE6 ... but breaks the jQuery for some reason. The animation no longer works.
As Charlie Brown would say, oh, good grief.
UPDATE TO THE UPDATE: The people responsible for the sacking have been sacked. No, wait, that's the credits to Monty Python and the Holy Grail. In short? I fixed the damnable thing, and it now runs like it should in every browser I can find to test it on.
Turns out that the one instance in which IE6 will display "overflow: hidden" and "position: relative" properly is in its "Quirks mode," which you can trigger by leaving off a DOCTYPE declaration at the top of the HTML file.
That unfortunately kills "margin: auto," because IE is nothing if not disagreeable. But you can work around that, too, by applying "text-align: center" to your body element, and "text-align: left" to your #wrapper div. And there was much rejoicing.
In conclusion ... Dear Microsoft IE6 programmers: Please hit yourselves in the face, repeatedly, with something large and unpleasant and preferably pointy.
-- Nato
Comments
(http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts/ was the link I told you I'd e-mail but didn't, not that it helps much at this point. And yes, there are big-time known bugs with regard to position: relative; in IE6.)
Also, two of the best articles on CSS hackery that I've come across are Ten CSS tricks you may not know and Ten more CSS tricks you may not know. These plus the DOCTYPE dealy-o should have you set. I know, I know, too little too late.
Also, if you didn't see: jQuery's up to 1.1.4 as of this week. Supposedly fixes some bugs.
Gotta love the excess code needed to make IE work. text-align: center 'cuz the margin don't work? Brilliant
Ive passed all my cross checks etc although with work as it is this has taken a considerable length of time - 7 months to do 9 rides.
Anyways, whilst moving I lost my test request form. Any advice on how I can book my test online?
Ive checked, but I thought Id ask here - much easier
Cheers, L