CSS/Float/IE6 == HEADACHE

March 20, 2008 2:59 PM

CSS/Float/IE6 (I just scared off half of the web designers) For the rest of you, why is IE6 giving me 's' on this page? My shop now buttons... WTF is going on with them?

VM here is you need it: http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en

posted by B(oYo)BIES to computers & internet (14 comments total)

Link's not coming up for me.

If it's the same issue I had a couple weeks ago, try putting a
right after the floated block in question and see what happens.
posted by svolix at 3:16 PM on March 20, 2008

Uh, that's a [br /] tag.
posted by svolix at 3:17 PM on March 20, 2008

Make sure you are looking in IE6. This has nothing to do with [BR /] tags. I wish it was that easy. Whatever it is, I have the same problem with all three of the class="content_rectangle" boxes on the right side.

I believe whatever it is, it is also the cause of the issue with id="product_bottom_box_left" and id="product_bottom_box_left" on the following page.

They should both line up side by side, as they do in IE7 and Firefox.
posted by B(oYo)BIES at 3:31 PM on March 20, 2008

Not around my IE6 machine, so can't test, but if it's anything like the CSS/Float/IE6 problem I spent half of last week solving, add a display:inline; after the float declaration. It has to do with an IE double-padding issue, so maybe that's why you're only seeing the "s", the rest of the phrase is padded out of the container.
posted by ochenk at 3:31 PM on March 20, 2008

No go on the display:inline;

By 's', I mean SHIT!
posted by B(oYo)BIES at 3:36 PM on March 20, 2008

Screenshot

Source

CSS
posted by B(oYo)BIES at 3:47 PM on March 20, 2008

Your container's too small.

If you change the container width to 766px instead of 764px, it fixes everything. IE interprets paddings and margins slightly differently from Firefox, and it usually ends up slightly bigger in IE.
posted by theiconoclast31 at 4:03 PM on March 20, 2008

... which is why you always reset your CSS. It really takes care of a lot of small annoying layout inconsistencies.
posted by Foci for Analysis at 4:43 PM on March 20, 2008

Truly pedantic nitpick: CSS id names and class names should not have underscore characters in them. Use dashes instead. See also.

Also, your CSS keeps misspelling the word "warranty".
posted by Asparagirl at 4:56 PM on March 20, 2008

To be even more pedantic - that article is 7 years old but as it points out - underscores have been allowed in the w3 css spec since March 2001 and are supported by all modern browsers. Browsers that don't support them account for less than 0.1% of web traffic.
posted by missmagenta at 5:52 PM on March 20, 2008

I know, but guess who used to do web backend work at a huge entertainment company that mandated the inclusion of at least one of those browsers (Netscape 4.x) in its site's functional specs until fairly recently? :-)
posted by Asparagirl at 6:09 PM on March 20, 2008

IE interprets paddings and margins slightly differently from Firefox, and it usually ends up slightly bigger in IE.

Shouldn't do if you use the correct DOCTYPE.

This page is using XHTML transitional, I would suggest using a strict doctype and seeing if that fixes things.
posted by Artw at 8:30 PM on March 20, 2008 [1 favorite]

Another note: A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). (An image is an example of a replaced element; it already has an implicit width, so there's no need to assign one.)

I see quite a few floats that don't have assigned widths, and there are no hard-and-fast rules on how browsers should handle off-spec CSS, which can result in inconsistency.
posted by aqhong at 1:22 AM on March 21, 2008

theiconoclast31 wins the cookie. 2 pixels caused me a couple hours of fiddling around. This morning, I tried the Doctype suggestion and when that did not work, I added two pixels to the container div. Thank you theiconoclast31.
posted by B(oYo)BIES at 8:59 AM on March 21, 2008