CSS/Float/IE6 == HEADACHE
March 20, 2008 2:59 PM Subscribe
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
VM here is you need it: http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en
Response by poster: 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
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
posted by ochenk at 3:31 PM on March 20, 2008
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
Response by poster: No go on the display:inline;
By 's', I mean SHIT!
posted by B(oYo)BIES at 3:36 PM on March 20, 2008
By 's', I mean SHIT!
posted by B(oYo)BIES at 3:36 PM on March 20, 2008
Best answer: 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
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
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
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
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
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]
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
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
Response by poster: 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
posted by B(oYo)BIES at 8:59 AM on March 21, 2008
This thread is closed to new comments.
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