All geek questions in one place

IE8 error with CSS

I am sure that this must have been considered earlier, because I am sure that I am not the first to do this, but I can not find the answer. I create a shadow effect for <div>using repeating background images. In the bottom two corners, I use small 9x5 pixel images. I float them left and right, and in Firefox and Safari they look perfect. In IE8 (and possibly in other IEs) they float too far left and right by about 3 pixels.

You can see this problem on here. This is an ebay template for my wife.

So far, I have been trying to customize the display: inline, which was a fix for similar IE6 problems. I also tried setting the image margins and padding to 0px with no luck.

Any ideas?

Thanks Carraig

+3
source share
2 answers

While I was browsing your page, I found that it works by default in quirks mode, which is a likely problem, because if I force it to Strict, it seems to fix your floating problem in all IE cases.

read the ppk article here: http://www.quirksmode.org/css/quirksmode.html

he explains why this is happening and how to fix it :)

Hope this helps!

+4
source

I think this has something to do with float elements extending beyond the borders of the div, try pasting this before closing the parent div:

<div style="clear: both; font-size: 1px; line-height: 0px;"> &nbsp;</div>
+3
source

Source: https://habr.com/ru/post/1717339/

More articles:


All Articles