CODEWITHSUNDEEP
csshtml
Gᴇᴏᴍᴇᴛᴇʀ
Gᴇᴏᴍᴇᴛᴇʀ

Reputation: 409

doctype html width / border radius not working

I was recently trying to build a HTML5 webpage (using the<!DOCTYPE html> tag) and I made a centered page with a border radius, which with the DOC. it was fluid, but without it was fine. I was wondering, what am I doing wrong? How can include the doctype and make it work?

Here's the code:

<html>
    <head>
        <style>
        body
        {
        background: #373;
        margin:0;
        }
        #container
        {
        background:transparent;
        padding:24;
        }
        #page
        {
        display: block;
        background:#eee;
        width: 850;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 0 auto;
        padding:5px;
        }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="page">
                Testing 1 2 3
            </div>
        </div>
    </body>
</html>

Copy and paste into this.

Upvotes: 0

Views: 788

Answers (1)

David Thomas
David Thomas

Reputation: 253338

The problem appears to be the non-zero width and padding attributes; any non-zero width needs to have a unit specified:

The format of a length value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by a unit identifier (a two-letter abbreviation). After a '0' number, the unit identifier is optional.

The following seems to work, albeit I don't necessarily know what your desired end-result is:

body
{
background: #373;
margin:0;
}
#container
{
background-color:transparent; /* amended to 'background-color' as per @Viruzzo's comment */
padding:24px; /* needed to add 'px' to this line */
}
#page
{
display: block;
background-color:#eee; /* amended to 'background-color' as per @Viruzzo's comment */
width: 850px; /* and to this one */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 0 auto;
padding:5px;
}

JS Fiddle demo.

And the 'before' version, with your own html/css for comparison.

References:

Upvotes: 4

Related Questions