1

Why does the following code works perfectly in browsers like Chrome 41, Firefox 36 and IE 10 but doesn't work as expected in the WebBrowser control in Windows Forms?

<!DOCTYPE HTML>
<html>
<head>
  <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        body {
            display: table;
        }

        .my-block {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
  </style>
</head>
<body>
  <div class="my-block">Some text</div>
</body>
</html>

This solution is from this answer (JSFiddle).

this.webBrowser.DocumentText =
                "<!DOCTYPE HTML>" +
                "<html>" +
                "<head>" +
                    "<style type=\"text/css\">" +
                        "html, body {" +
                            "height: 100%;" +
                            "margin: 0;" +
                            "padding: 0;" +
                            "width: 100%;" +
                        "}" +

                        "body {" +
                            "display: table;" +
                        "}" +

                        ".my-block {" +
                            "text-align: center;" +
                            "display: table-cell;" +
                            "vertical-align: middle;" +
                        "}" +
                    "</style>" +
                "</head>" +
                "<body>" +
                    "<div class=\"my-block\">Some text</div>" +
                "</body>" +
                "</html>";

This code gives me the following result:

enter image description here

Why? What am I doing wrong? How can I fix it?

Thanks in advance.

Community
  • 1
  • 1
FrozenHeart
  • 19,844
  • 33
  • 126
  • 242
  • 1
    I'd chage `padding:0` to `padding:0px` and to be _safe_ also add ` ` – Adriano Repetti Mar 25 '15 at 10:27
  • @Adriano Repetti Thanks a lot, meta tag helps. But why? What it actually does? – FrozenHeart Mar 25 '15 at 10:29
  • @AdrianoRepetti: There is no need for a unit on a zero value. https://developer.mozilla.org/en-US/docs/Web/CSS/length – Guffa Mar 25 '15 at 10:38
  • @Guffa it's right but I have a _vague_ memory older IE had an issue with that (it's _vague_ and I'm too lazy to search which version and in which conditions). – Adriano Repetti Mar 25 '15 at 10:46
  • @FrozenHeart MSish stuff: http://stackoverflow.com/a/6771584/1207195 – Adriano Repetti Mar 25 '15 at 10:56
  • 1
    @AdrianoRepetti: If that was an issue then it should be quite easy to find anything about it, but I can't seem to find anything. Perhaps you rember the opposite issue; that IE allowed non-zero values without a unit, which doesn't work in other browsers? – Guffa Mar 25 '15 at 11:09
  • @Guffa it may even be! I remember there was something _about_ that but honestly I don't remember exactly what. Nice spot! – Adriano Repetti Mar 25 '15 at 11:18

0 Answers0