CODEWITHSUNDEEP
javascripthtml
Joe Bobby
Joe Bobby

Reputation: 2811

Code Does Not Work WIth <!DOCTYPE html> at the top

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?

Upvotes: 0

Views: 195

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

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.

Upvotes: 1

Kunj
Kunj

Reputation: 2018

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>

Upvotes: 1

Aneesh Mohan
Aneesh Mohan

Reputation: 1087

Add height and width of the body to 100%. Most probably it might solve the issue.

Upvotes: 1

Related Questions