Bazaar behavior of css positioning. Works in jsfiddle, not in any other browser. Might be related to inline vs block

Going a little insane here.

Here is the jsfiddle: http://jsfiddle.net/mersenneprimes/CvGKK/

Note "business" is in the top right corner.

Now here is the same code I have in an html document.

This is what I get: http://screencast.com/t/plAli1D3gpx

Note "business" is not in the top right corner.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

    <STYLE TYPE="text/css">

        div {
            position:relative;
            width:400px;
            height:100px;
            border:3px solid orange;

        }

        p {
            position:absolute;
            top:0;
            right:0;
            background-color:green;
        }

    </STYLE>
</head>
<body>
    <div>
        <p>business</p> 
    </div>
</body>
</html>

BUT, if I change the

to , then I get it right.

It is correctly located in the top right.

css
jsfiddle

2012-04-05 02:08
by ehabd

check your white space and doctype - iamgopal 2012-04-05 02:10

I don't know exactly what it's doing, but if you un-tick 'normalized CSS' on JSFiddle then reload, it does the same thing as your screenshot - jimw 2012-04-05 02:12

Thank you for commenting. What doctype should I be using? Thanks - ehabd 2012-04-05 02:12

It doesn't look like the doctype to me: add to the head of your document and see what happens - it fixes it for me. Something in that CSS is your culprit - jimw 2012-04-05 02:16

The CSS normalization on JSFiddle includes:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}

which your CSS doesn't. Add

margin: 0;
padding: 0;

to your 'div' and 'p' CSS and you should get the same behaviour as in JSFiddle.

2012-04-05 02:21
by jimw

Thank you very much. Highly appreciated. But one question. Isn't margin and padding = 0 by default - ehabd 2012-04-05 02:25

In general, no - different browsers will have their own defaults, although generally they're similar. Many people reset all these things to known defaults to help with cross-browser compatibility - that's what JSFiddle mean by 'normalizing' CSS. Doing this can have unwanted side-effects though, so carefully evaluate what's best in your application - jimw 2012-04-05 02:30