tags:

views:

125

answers:

2

Hi

In my html file, when I write this, it is displayed correct.

<div class="event" style="top: 30px; left: 10px; width: 584px; height: 80px;">

But as soon as I set strict doctype, the styling goes away. So in firbug I see only style="".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; 
<html>.....<body>
<div class="event" style=""></div></body></html>

Complete html code:

<html>
<head>
<title>calendar</title>
<style type="text/css">
 * {
 margin:0;
 padding:0;
 }

 body {
 font-family:arial;
 margin:10px;
 }
 #canvas {
 width:600px;
 height:720px;
 padding:0 10px;
 background:#ececec;
 margin-left:75px;
 position:relative;
 }

 .event {
 padding:5px;
 border:solid #d5d5d5;
 border-left:solid #aaa;
 border-width:1px 1px 1px 5px;
 position:absolute;
 max-width:600px;
 background:#fff;
 overflow:hidden;
 }
 div.event .title {
 font-size:1em;
 colo:#4B6EA9;
 }
 div.event .desc {
 font-size:0.8em;
 color:#7a7a7a;
 }
 #time {
 float:left;
 text-align:right;
 }
 div#time .timeline {
 height:60px;
 font-weight:bold;
 font-size:14px;
 color:#7a7a7a;
 }
 div#time div.timeline span {
 font-weight:normal;
 margin-left:7px;
 font-size:10px;
 color:#aaa;
 }
 div#time div.timeline .last{margin-top:35px;}
</style>

</head>
<body>

<div id="time">
<div class="timeline">9:00<span>AM</span></div>
<div class="timeline">10:00<span>AM</span></div>
<div class="timeline">11:00<span>AM</span></div>
<div class="timeline">12:00<span>PM</span></div>
<div class="timeline">1:00<span>PM</span></div>
<div class="timeline">2:00<span>PM</span></div>
<div class="timeline">3:00<span>PM</span></div>
<div class="timeline">4:00<span>PM</span></div>
<div class="timeline">5:00<span>PM</span></div>
<div class="timeline">6:00<span>PM</span></div>
<div class="timeline">7:00<span>PM</span></div>
<div class="timeline">8:00<span>PM</span><div class="last">9:00<span>PM</span></div></div>
</div>
<div id="canvas">
<div class="event" style="top: 30; left: 10; width: 584; height: 80;">test</div><div class="event" style="top: 610; left: 10; width: 284; height: 50;">test</div></div> </body></html>
A: 

ok i figured out the problem.

Instead of

style="top: 30; left: 10; width: 584; height: 80;"

it should be

style="top: 30px; left: 10px; width: 584px; height: 80px;"

Earlier it worked because it was not using strict doctype.

priyank
+4  A: 

You aren't specifying any units in your inline styles. This will work in quirks mode (no doctype) but not in strict mode (with doctype).

<div class="event" style="top: 30px; left: 10px; width: 584px; height: 80px;">

should fix it.

NickFitz
yeah.. i just figured that out. Thanks.
priyank