Problem with CSS an IE

Dear Group,
I am in trouble with CSS and Internet Explorer. I have a div-element
which contains an image, and another div which is "above" the image.

This is my code (in "reality" I create this with javascript and there is
much more around, but this simple extract has the same behavior):

<div style="position: absolute; left: 0px; top: 0px;
width:200px;height:120px; background-color:Blue;">
<img src="myimage.jpg" height="112" width="200" style="z-index:1;">
<div style="border: 1px solid rgb(204, 204, 204); position: absolute;
cursor: crosshair; left: 58px; top: 23px; width: 66px; height: 41px;
z-index:2"> </div>
</div>

Note the "cursor:crosshair". This is what I want to achieve. In Firefox
it works, in IE I do not get the cursor as crosshair. As soon as I
remove the <img>-Tag, it works in IE too!!

I tried several things but I didn't get it working! What might be wrong?

(A bit more in detail: The crosshair-cursor is not the biggest problem.
It is the same with onmousedown-events. I do not receive them in IE when
the img is "behind" the inner div - and that is a real problem for my
application!)

Any help appreciated!

Martin

Martin Plotz

Gazing into my crystal ball I observed Martin Plotz
<> writing in
news:ec1368$31p$01$:

> I am in trouble with CSS and Internet Explorer. I have a div-element
> which contains an image, and another div which is "above" the image.
>
> This is my code (in "reality" I create this with javascript and there
> is much more around, but this simple extract has the same behavior):
>
>

1. Validate the markup <http://validator.w3.org>
2. Fix any errors the validator comes up with
3. Validate the CSS <http://jigsaw.w3.org/css-validator/>
4. Fix any errors the validator comes up with
5. Provide a URL - the problem might be somewhere other than in the
snippet you provide.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Thanks for your reply!
>
> 1. Validate the markup <http://validator.w3.org>
> 2. Fix any errors the validator comes up with
> 3. Validate the CSS <http://jigsaw.w3.org/css-validator/>
> 4. Fix any errors the validator comes up with

I did these steps - no changes.

> 5. Provide a URL - the problem might be somewhere other than in the
> snippet you provide.
>

I uploaded the file to
http://www.codecolony.de/martin/cssproblem.htm

(the code looks a bit different from the snippet before because I
transferred the style="" attributes to a <style>-section and defined the
classes for the html elements)

Thanks for any help!

Martin

Martin Plotz wrote:

> I uploaded the file to
> http://www.codecolony.de/martin/cssproblem.htm

Perhaps it is the XML prolog that screws up IE. Known problem if the
doctype is not first. Remove that line and see what happens.

<?xml version="1.0" encoding="ISO-8859-1" ?>

And, new documents should be Strict, not Transitional. You are not
transitioning from anything, are you?
http://www.w3.org/QA/2002/04/valid-dtd-list.html

--
-bts
-Warning: I brake for lawn deer

Thanks for the hints - but still no effect...

Beauregard T. Shagnasty schrieb:
> Martin Plotz wrote:
>
>
>>I uploaded the file to
>>http://www.codecolony.de/martin/cssproblem.htm
>
>
> Perhaps it is the XML prolog that screws up IE. Known problem if the
> doctype is not first. Remove that line and see what happens.
>
> <?xml version="1.0" encoding="ISO-8859-1" ?>
I had included it because the W3C-Validator didn't find the encoding
without it...
I have removed it under www.codecolony.de/martin/cssproblem2.htm.


>
> And, new documents should be Strict, not Transitional. You are not
> transitioning from anything, are you?
> http://www.w3.org/QA/2002/04/valid-dtd-list.html

ok, I fixed it.

Martin Plotz wrote:

> Thanks for the hints - but still no effect...

See corrections needed:

> Beauregard T. Shagnasty schrieb:
>> Martin Plotz wrote:
>>
>>>I uploaded the file to
>>>http://www.codecolony.de/martin/cssproblem.htm
>>
>> Perhaps it is the XML prolog that screws up IE. Known problem if the
>> doctype is not first. Remove that line and see what happens.
>>
>> <?xml version="1.0" encoding="ISO-8859-1" ?>
> I had included it because the W3C-Validator didn't find the encoding
> without it...

You could add the following in the <head> section, though the best way
is to make sure your server uses the proper content header.

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"
/>

See: http://www.w3.org/International/O-charset

> I have removed it under www.codecolony.de/martin/cssproblem2.htm.

>> And, new documents should be Strict, not Transitional. You are not
>> transitioning from anything, are you?
>> http://www.w3.org/QA/2002/04/valid-dtd-list.html
>
> ok, I fixed it.

Sort of... Now your doctype is incorrect:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

You want to use the complete Strict link as shown on the W3C page I gave
you.

--
-bts
-Warning: I brake for lawn deer

>
>
> Sort of... Now your doctype is incorrect:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
>
> You want to use the complete Strict link as shown on the W3C page I gave
> you.
>

ok, now it can be validated again.

If you move the mouse onto the border, the crosshair gets visible. Can
this just be a "desired" behavior??

Martin Plotz wrote:
>>
>> Sort of... Now your doctype is incorrect:
>>
>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
>> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
>>
>> You want to use the complete Strict link as shown on the W3C page I gave
>> you.
>>
>
> ok, now it can be validated again.
>
> If you move the mouse onto the border, the crosshair gets visible. Can
> this just be a "desired" behavior??

You're going to love this! Put some content in the DIV and you will see
what IE's behavior is!

<div class="rectangle"> ABC </div>

IE will only display the '+' cursor when over the content DIV not just
the DIV area itself! IE strikes again!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

>
> IE will only display the '+' cursor when over the content DIV not just
> the DIV area itself! IE strikes again!
>
yeah, right.
The strange thing about this is that it works when the image is not there!
I am already considering to place a completely transparent gif in the
background of the rectangle - but isn't that ugly?!

Martin Plotz wrote:

>> Sort of... Now your doctype is incorrect:
>>
>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
>> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
>>
>> You want to use the complete Strict link as shown on the W3C page I gave
>> you.
>
> ok, now it can be validated again.

Now you've downgraded to Transitional. New documents should be Strict.
And the XML prolog that screws up IE is still in the file.

<?xml version="1.0" encoding="ISO-8859-1" ?> <--- remove this line
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

> If you move the mouse onto the border, the crosshair gets visible. Can
> this just be a "desired" behavior??

Desired by whom? My take is that visitors will just be confused by the
crosshair.

--
-bts
-Warning: I brake for lawn deer