2009-12-23 37 views
0

在我的html文件,当我写这个,它显示正确。严格doctype和内联css

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

但是,只要我设置严格的文档类型,样式就会消失。所以在firbug中我只看到style =“”。

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

完整的HTML代码:

<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> 
+0

我们可以看到'event'类的CSS吗? –

+0

更新完整的HTML代码与css – priyank

回答

4

您没有在内联样式中指定任何单位。这将工作在怪癖模式(没有文档类型),但不是严格模式(使用文档类型)。

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

应该修复它。

+0

是的..我只是想通了。谢谢。 – priyank

0

确定我想通了这个问题。

而不是

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

应该

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

早些时候,它的工作,因为它没有使用严格的DOCTYPE。