Code Does Not Work WIth <!DOCTYPE html> at the top
Question
I have <!DOCTYPE html> at the top of my page and what the page is suppose to do is allow the user to click anywhere on the page, and then redirect to another URL.
It works when I remove <!DOCTYPE html but I would like to keep it in the page
here is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
BODY.enterPage{
cursor:hand;
}
</style>
<script>
function goto(){
location.href = "http://www.google.com"
}
</script>
</head>
<body class="enterPage" onclick="goto();">
Your Content
</body>
</html>
why does this happen?
3 answers
solution1
1 2014-10-09 05:17:31
Add height and width of the body to 100%. Most probably it might solve the issue.
solution2
1 ACCPTED 2014-10-09 05:48:29
Appreciate @Pointy comments, additionally, do the following changes in your CSS:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body.enterPage {
cursor: pointer; //Not hand!
}
html, body { //Set document width/height to 100%
width: 100%;
height: 100%;
}
</style>
<script>
function goto() {
location.href = "http://www.google.com"
}
</script>
</head>
<body class="enterPage" onclick="goto();">
Your Content
</body>
</html>
solution3
1 2014-10-09 16:09:00
The only thing you need to fix the functional issue, making the entire area clickable, is to set
html, body { height: 100%; }
However, this still leaves small areas at the edges (a few pixels of margin), so if you really want the entire viewport to be clickable, add
html, body { margin: 0; padding: 0; }
The reason is that in “standards mode”, browsers by default make the body element just as tall as needed for its content (as you can see by setting a border on it). When the doctype string is missing, browsers operate in “quirks mode ”, where strange things happen, including the imitation of old browsers in the sense of making body 100% tall by default. When you want this in “standards mode”, just say it, in CSS.
To make the pointer (badly named in CSS as cursor ) look like a hand or similar icon on all browsers, add
body { cursor: hand; cursor: pointer; }
This handles both very old IE versions (which recognize hand but not pointer ) and modern browsers, which implement cursor properly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.