Code Does Not Work WIth 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?

Having an HTML5 doctype *and* an xhtml `` tag makes absolutely no sense whatsoever. *Especially* since you've got a `` tag that declares the content to be HTML also. Get rid of that `xmlns` attribute because it is an affont to all that is good and kitten-friendly. — Pointy, Oct 09 '14 at 05:11
You should probably just add `html, body { height: 100%; }` to your CSS — Phil, Oct 09 '14 at 05:11
What @Pointy says makes no sense; see section 9 “The XHTML syntax” in W3C HTML5 PR. — Jukka K. Korpela, Oct 09 '14 at 07:24
Why do you want to keep ` `? Its only effect is that it puts browsers to “standards mode” when rendering the page, and the page has been designed to work in “quirks mode” (for those values of “work” that apply here at all). — Jukka K. Korpela, Oct 09 '14 at 07:27
@JukkaK.Korpela it makes no sense to use XHTML stuff in a document that's declared to be an HTML document with an HTML content type. It doesn't matter what the XHTML syntax says; browsers will interpret the content as plain HTML anyway. — Pointy, Oct 09 '14 at 13:21
@Pointy I have tried everything suggested, the only thing that works is removing the DOCTYPE still.. this will mainly be used on mobile devices, will the doctype be needed? — Joe Bobby, Oct 09 '14 at 14:19
Well one problem I just noticed is that the value "hand" is invalid for the CSS "cursor" property. That should be "pointer". [Here is a jsbin with your code and a couple of minor CSS additions. That page uses an HTML doctype like yours.](http://jsbin.com/qikiyu/1) — Pointy, Oct 09 '14 at 14:35
Here's a simple and clear explanation of the DOCTYPE issue: http://stackoverflow.com/a/32215263/3597276 — Michael Benjamin, Aug 26 '15 at 02:43

score 1 · Answer 1 · answered Oct 09 '14 at 05:17

1

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

answered Oct 09 '14 at 05:17

Aneesh Mohan

1,077
8
17

Kunj · Accepted Answer · 2014-10-09T06:01:44.047

1

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>

edited Oct 09 '14 at 06:01

answered Oct 09 '14 at 05:48

Kunj

1,980
2
22
34

copied and pasted the whole code and didn't work for me, i need `hand` so i used that but still doesnt work – Joe Bobby Oct 09 '14 at 14:20
@JoeBobby the value "hand" is going to be ignored by all browsers other than IE. The value "pointer" will do the same thing. – Pointy Oct 09 '14 at 14:36

score 1 · Answer 3 · answered Oct 09 '14 at 16:09

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.

Code Does Not Work WIth at the top

3 Answers3