Problem with CSS an IE

Martin Plotz · Aug 17, 2006

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

Adrienne Boswell · Aug 17, 2006

Gazing into my crystal ball I observed Martin Plotz

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.

Martin Plotz · Aug 17, 2006

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

Beauregard T. Shagnasty · Aug 17, 2006

Martin said:
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

Martin Plotz · Aug 17, 2006

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

Martin Plotz wrote:

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.

Beauregard T. Shagnasty · Aug 17, 2006

Martin said:
Thanks for the hints - but still no effect...

See corrections needed:

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.

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.

Martin Plotz · Aug 17, 2006

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??

Jonathan N. Little · Aug 17, 2006

Martin said:
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!

Martin Plotz · Aug 17, 2006

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?!

Beauregard T. Shagnasty · Aug 17, 2006

Martin said:
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.

Martin Plotz · Aug 17, 2006

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

Sorry, I forget to mention the new URL:
http://www.codecolony.de/martin/cssproblem3.htm

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

Desired by IE, maybe. The crosshair will be replaced in the final
application by my own cursor and will (I hope so) be clear for the user,
but that doesn't matter for the problem!

Beauregard T. Shagnasty · Aug 17, 2006

Martin said:
Sorry, I forget to mention the new URL:
http://www.codecolony.de/martin/cssproblem3.htm

Yes, that's better - but still doesn't solve the IE/crosshair problem

Desired by IE, maybe. The crosshair will be replaced in the final
application by my own cursor and will (I hope so) be clear for the
user, but that doesn't matter for the problem!

Oh, sorry. I must have missed that this wasn't an ordinary www web page.
Feel free to do what you like.

Interfering CSS	1	Feb 9, 2024
Stuck with html and css	25	Dec 14, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
Positioning CSS components	1	Nov 16, 2023
CSS Grid inside slider not working...	1	Nov 28, 2022
How to keep an a:hover effect with css like "onMouseOut()"?	2	Apr 4, 2013
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Trouble with css	4	Mar 20, 2020

Problem with CSS an IE

Martin Plotz

Adrienne Boswell

Martin Plotz

Beauregard T. Shagnasty

Martin Plotz

Beauregard T. Shagnasty

Martin Plotz

Jonathan N. Little

Martin Plotz

Beauregard T. Shagnasty

Martin Plotz

Beauregard T. Shagnasty

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads