Drop shadow effect doesn't work right in IE

Paulo Jan

Hi all:

I've got the following example page:
http://www.arrakis.es/~paulj/test.html, where I try to simulate a drop
shadow effect in the upper and lower <DIV>s. It works perfectly in
Mozilla, but in IE 6, the image that forms the lower "drop shadow"
doesn't stick to the bottom <DIV>; instead, there's some space between
it and the <DIV>.
Can anybody shed some light on why this happens? I'm new to
stylesheets, so maybe it's some completely obvious bug that I have
just missed (the stylesheet for this page is embedded in the same HTML
page).

Paulo.

Jul 20 '05 #1

Stanimir Stamenkov

/Paulo Jan/:

I've got the following example page:
http://www.arrakis.es/~paulj/test.html, where I try to simulate a drop
shadow effect in the upper and lower <DIV>s. It works perfectly in
Mozilla, but in IE 6, the image that forms the lower "drop shadow"
doesn't stick to the bottom <DIV>; instead, there's some space between
it and the <DIV>.
Can anybody shed some light on why this happens? I'm new to
stylesheets, so maybe it's some completely obvious bug that I have
just missed (the stylesheet for this page is embedded in the same HTML
page).

Add 'line-height' declaration to the '#drop1' and '#drop2' rules:

#drop1 {
...
height: 11px;
line-height: 11px;
...
}
#drop2 {
...
height: 11px;
line-height: 11px;
...
}

--
Stanimir

Jul 20 '05 #2