Discussion:
relative/absolute position display block links not clickable
(too old to reply)
daneastwell
2009-06-17 14:59:18 UTC
Permalink
The link in the following test case should be clickable:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>IE8 Test page</title>
<style type="text/css">
a{
width: 190px;
height: 103px;
display:block;
position:relative;
z-index:100;
}
img{
z-index:30;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div>
<a href="#">
Text
</a>
<img
src="Loading Image..."
alt="" width="190" height="103" />
</div>
</body>
</html>



----------------
This post is a suggestion for Microsoft, and Microsoft responds to the
suggestions with the most votes. To vote for this suggestion, click the "I
Agree" button in the message pane. If you do not see the button, follow this
link to open the suggestion in the Microsoft Web-based Newsreader and then
click "I Agree" in the message pane.

http://www.microsoft.com/communities/newsgroups/list/en-us/default.aspx?mid=3c7cfc55-3225-47ab-8be3-f26ee33fdfce&dg=microsoft.public.internetexplorer.beta
rob^_^
2009-06-18 20:14:41 UTC
Permalink
Hi,

Works fine for me on Vista x86 SP1 with "Enable visual styles on buttons and
controls in webpages" enabled (default), "Use Windows Colors" enabled
(default).

What settings do you have for your link colors on the Internet Settings
Colors dialog. If you have "Use Windows Colors" unchecked IE will use those
colors specified for link colors.

Regards.
Post by daneastwell
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>IE8 Test page</title>
<style type="text/css">
a{
width: 190px;
height: 103px;
display:block;
position:relative;
z-index:100;
}
img{
z-index:30;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div>
<a href="#">
Text
</a>
<img
src="http://www.channel4.com/assets/programmes/images/plus-one/series-1/episode-2/plus-one-s1e2-20090115170149-0_200x113.jpg"
alt="" width="190" height="103" />
</div>
</body>
</html>
----------------
This post is a suggestion for Microsoft, and Microsoft responds to the
suggestions with the most votes. To vote for this suggestion, click the "I
Agree" button in the message pane. If you do not see the button, follow this
link to open the suggestion in the Microsoft Web-based Newsreader and then
click "I Agree" in the message pane.
http://www.microsoft.com/communities/newsgroups/list/en-us/default.aspx?mid=3c7cfc55-3225-47ab-8be3-f26ee33fdfce&dg=microsoft.public.internetexplorer.beta
daneastwell
2009-06-19 08:14:01 UTC
Permalink
Sorry, my mistake I should have been more clear:

EXPECTED: The full width and height of the link as specified by the CSS
should be clickable
ACTUAL: Only the area of the text within the link is clickable.

Apologies, hopefully that makes it a bit clearer.

Thanks,

Dan.
Post by rob^_^
Hi,
Works fine for me on Vista x86 SP1 with "Enable visual styles on buttons and
controls in webpages" enabled (default), "Use Windows Colors" enabled
(default).
What settings do you have for your link colors on the Internet Settings
Colors dialog. If you have "Use Windows Colors" unchecked IE will use those
colors specified for link colors.
Regards.
Post by daneastwell
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>IE8 Test page</title>
<style type="text/css">
a{
width: 190px;
height: 103px;
display:block;
position:relative;
z-index:100;
}
img{
z-index:30;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div>
<a href="#">
Text
</a>
<img
src="http://www.channel4.com/assets/programmes/images/plus-one/series-1/episode-2/plus-one-s1e2-20090115170149-0_200x113.jpg"
alt="" width="190" height="103" />
</div>
</body>
</html>
----------------
This post is a suggestion for Microsoft, and Microsoft responds to the
suggestions with the most votes. To vote for this suggestion, click the "I
Agree" button in the message pane. If you do not see the button, follow this
link to open the suggestion in the Microsoft Web-based Newsreader and then
click "I Agree" in the message pane.
http://www.microsoft.com/communities/newsgroups/list/en-us/default.aspx?mid=3c7cfc55-3225-47ab-8be3-f26ee33fdfce&dg=microsoft.public.internetexplorer.beta
Kelly Towle
2009-11-06 15:49:01 UTC
Permalink
Having this same issue in IE8 in compatibility mode. IE Developer Tools'
"Select Element By Click" also does not recognize the link but instead
selects the link's container element. If I find the link in the DOM tree the
border of the area shows, however it remains un-clickable. Only the area
occupied by text is clickable, and if it is "off-lefted" with the CSS
text-indent property, the link will not function at all.
Post by daneastwell
EXPECTED: The full width and height of the link as specified by the CSS
should be clickable
ACTUAL: Only the area of the text within the link is clickable.
Apologies, hopefully that makes it a bit clearer.
Thanks,
Dan.
Post by rob^_^
Hi,
Works fine for me on Vista x86 SP1 with "Enable visual styles on buttons and
controls in webpages" enabled (default), "Use Windows Colors" enabled
(default).
What settings do you have for your link colors on the Internet Settings
Colors dialog. If you have "Use Windows Colors" unchecked IE will use those
colors specified for link colors.
Regards.
Post by daneastwell
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>IE8 Test page</title>
<style type="text/css">
a{
width: 190px;
height: 103px;
display:block;
position:relative;
z-index:100;
}
img{
z-index:30;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div>
<a href="#">
Text
</a>
<img
src="http://www.channel4.com/assets/programmes/images/plus-one/series-1/episode-2/plus-one-s1e2-20090115170149-0_200x113.jpg"
alt="" width="190" height="103" />
</div>
</body>
</html>
----------------
This post is a suggestion for Microsoft, and Microsoft responds to the
suggestions with the most votes. To vote for this suggestion, click the "I
Agree" button in the message pane. If you do not see the button, follow this
link to open the suggestion in the Microsoft Web-based Newsreader and then
click "I Agree" in the message pane.
http://www.microsoft.com/communities/newsgroups/list/en-us/default.aspx?mid=3c7cfc55-3225-47ab-8be3-f26ee33fdfce&dg=microsoft.public.internetexplorer.beta
Loading...