CODEWITHSUNDEEP
htmlcss
Will
Will

Reputation: 1345

div in html 5 won't display from css3 file

I'm creating a web page using html 5 and an external css3 stylesheet.

I've created a div to display a rounded corner box. It displays fine when the css div code is in the html document. But as soon as I transfer it to the css3 stylesheet the box disappears. I've been searching for an answer for a couple of hours now and cannot work out whats wrong.

Here is my html code...

<style type="text/css"> 
div
{
    border:8px solid #000000;
    padding:10px 10px; 
    background:#ffffff;
    width:500px;
    margin: auto;
    border-radius:25px;
    -moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>

</head>
<body>

<div><h1>WELCOME TO THE WEBSITE</h1></div>

But as soon as I move this portion 

div
{
    border:8px solid #000000;
    padding:10px 10px; 
    background:#ffffff;
    width:500px;
    margin: auto;
    border-radius:25px;
    -moz-border-radius:25px; /* Firefox 3.6 and earlier */
}

over to my css file, and remove from the html file.

The div box disappears. All other elements defined in the css file are displaying properly so I know the file is linked. I just don't know why this div won't display.

thanks for the reply. The full css code is

body
{
background-image:url(roses.png);
background-repeat:repeat top;
background-colour:#ffffff;
background-attachment:scroll;
}

h1
{
text-shadow: 2px 2px 2px #efefef;
}

div
{
border:8px solid #000000;
padding:10px 10px; 
background:#ffffff;
width:500px;
margin: auto;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}

#para1
{
text-align:center;
color:red;
}

Upvotes: 2

Views: 264

Answers (3)

Will
Will

Reputation: 1345

Ive given the divs separate names and now everything seems to be working ok from within the css file. Happy days :)

Upvotes: 0

Ben
Ben

Reputation: 7597

Without seeing your full code I can't be sure, but one thing I'd change in your CSS is the order of the two lines relating to your rounded border.

You should always have the border-radius directive after any vendor-specific ones. In other words, the -moz-border-radius:25px line needs to come first.

Why this works in one scenario and not in another I'm not entirely sure, but there are quirks out there… What browser are you previewing in?

Upvotes: 0

Spudley
Spudley

Reputation: 168695

Given everything you've said in the question, it sounds to me as if the browser is caching an older version of the stylesheet.

Check in Firebug to see what it thinks is in the stylesheet.

Try loading the stylesheet's URL directly into its own browser window, refresh it if necessary, and check that the new code is in place.

The only other possibility I can think of is that there's some sort of error at the end of your stylesheet code which is preventing the browser from parsing the styles after it.

This is possible, but I can't verify it without seeing the whole of your CSS code.

Upvotes: 1

Related Questions