My page is freaking out in MSIE6. Looks fine in MSIE7 and Firefox. The right DIV “digital catalog” is pushing itself out from the right side and knocking the graphic DIV down.
http://www.dorseygraphics.com/review/vialuxe/web2010/02/brand_solutions_01.html
Here’s the CSS
http://www.dorseygraphics.com/review/vialuxe/web2010/02/css/styles.css
I’m at a loss because I don’t know or understand fully the quirks that exist in MSIE6.
Thanks
Thanks for the link - I followed a chain of articles and learned quite a bit. The subject of DOCTYPE declarations is about as complicated as it gets, but I think I have a better understanding going forward.
It’s just a bug 
The Lynda movie is for members only - sorry!
But this page sums it up nicely.
http://www.lizhargreaves.com/2010/03/05/how-to-make-internet-explorer-behave/
Internet Explorer has its own unique and dysfunctional way of interpreting the CSS box model of website layout. It is frustrating for web designers to find that a site, which looks so pretty in Firefox and Safari, has burst at the seams in IE.
One way you can minimize the pain of coding for IE is to structure the head of your HTML in a way that forces IE to run in standards mode, as opposed to quirks mode.
Quirks mode is triggered:
* when the doc type declaration is missing/incomplete
* if it’s HTML 3 or earlier, or if a system identifier is missing
* when a comment or other content appears before doc type
* when there are errors anywhere in the document
* in IE6 – when there is an XML declaration before a doc type declaration
A tutorial by Bill Weinman on lynda.com gives some sample code for the top of your HTML file that will force IE into standards mode:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< ?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"></html>
If you still trigger quirks mode, check for errors in your HTML using the w3 validator.
Now you should have an error-free, standards triggering page that will render correctly in IE.
But to eliminate any nasty surprises at launch, always check your page. If you are on a Mac, IE NetRenderer is a useful resource, though it doesn’t seem to work for all sites. If IE NetRenderer comes up blank, try browsershots. It’s slow to render, but always gives results.
But for “Internet Explorer Testing Done Right,” try Parallels, which allows you to run Windows from OS X without rebooting.
Using these tools, you can be certain that all is running well in Internet Explorer land.
Glad it worked :). You’re welcome.
@spdorsey - I don’t have a membership with lynda.com - is the video you refer to free or members-only? Could you perhaps provide a link?
@ryanreese - Sorry, guess I didn’t make myself clear. I understand, of course, that increasing the width of an element can cause a float to drop if there’s not enough horizontal space in the container to accommodate both. My question had more to do with why only IE6 stretches the parent element. From what happened here, it appears that the more standards-compliant (i.e., non-IE6) browsers do not allow the width of a child element to “stretch” the parent if the parent has a defined width, whereas IE6 does allow this.
Thank you both for taking a look at this. That was an easy fix, I think I have been staring at code for too long!
I have another question (more CSS-fundamentals and not a code fix request) - I’ll ask it in another forum post.
Thanks again,
-----------S
A doctype without a URI isn’t a full doctype and will cause quirks mode, but I’d love to see a case where a fulldoctype triggers quirks mode (it’s the actual trigger, there are ways to get quirks mode with full doctypes)
It’s an expanding box problem. I’ll try to be fast…late for work
Anyway, so since the parent is 440px, anything over that in IE6 will stretch the parents width, thus increasing the overall width of the element so it can accomodate.
Increased width=float drop. I have to leave. If you are still confused someone else can jump in
I just took a look at the lynda.com CSS training movies. I’ve been coding for years (off and on), and I’m way out of practice (last site I coded was for MSIE 5) so I watched the movies and they helped refresh my memory a lot.
They had a GREAT segment on doctypes and MSIE quirks mode. They way they explained it, it all made a LOT of sense. If I had not seen that, I think I would be in a lot more trouble than I’m in today.
According to the w3C, MSIE6 is down to about 7% share. At my old company, we would not start ignoring browsers until they hit 5%. We’re getting closer!!
Thanks
---------S
I think the problem might be in your DOCTYPE declaration. Internet Explorer has a “quirks mode” that is sometimes triggered by the DOCTYPE, and it causes the CSS box model to render differently than in other browsers. It includes padding and border in the width, instead of adding them on. This could be causing your main container to render too narrow, so that your catalog and graphic divs won’t fit side by side.
You can find more info on this by Googling “IE quirks mode”, but if you want a DOCTYPE declaration to try and see if this is the problem, here’s the one I’ve been using lately that seems to work:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/DTD/strict.dtd”>
Hope this helps!
Hi, you just forgot to compensate for some things
On “.textbox” you set the width to 440px and 30px total in margins. 470px is the total width. That matches the parent. We are good there
Now we have to remmeber that 440px is the width we have to have all our elements in (that are children of .textbox). Anything over 440px will stretch the element in IE6 and increase the width thus causing float drop
La dee da…ah I found “.list” which has 450px width already! And to top that off, 20px padding. So that’s 470px and the max we can allow is 440.
You just need to update the width to 420px (then 20px will be automaticallky added on to make it 440, which is acceptable
.list {width:420px;}
Edit-He has a doctype, and it is full. Full doctypes do not trigger quirks mode
@ryanreese - Glad you were able to spot the problem for him - I didn’t look that deep, and might not have found it anyway. I have ever found that certain DOCTYPE declarations do trigger quirks mode (though I can’t say for certain that those declarations qualified as “full”). What I really need to do is find a really good piece on DOCTYPE declarations and read it thoroughly, as it’s a subject I really don’t fully understand.
I really just tossed the DOCTYPE suggestion out there because it’s one of the only width-related quirks I know about in IE6. You stated
Now we have to remmeber that 440px is the width we have to have all our elements in (that are children of .textbox). Anything over 440px will stretch the element in IE6 and increase the width thus causing float drop
Is this another quirk of IE6? Could you clarify exactly how this bug manifests itself? I’m always looking for more information on IE6 idiosyncracies - “know thine enemy”, and all that sort of thing. (In our company we call IE6 “The Grinch” - always stealing the presents from under the Christmas tree.)