HTMLについて
javascriptの勉強をしております。
そこでわからないことがあり、質問させていただきます。
コードは
<article id="main">
<section id="photogaray">
<a href="#" id="prev"><img src="prev-arrow.png" alt="左矢印" /></a>
<a href="#" id="next"><img src="next-arrow.png" alt="右矢印" /></a>
<div id="photocontents">
<h2 id="phototitle">題名</h2>
<p id="photodate">日付を入力する箇所</p>
<p id="sw">画像が入る部分</p>
<p id="more"><a href="#" id="morelink">more</p>
</div>
<section id="thumbnailbox">
<ul id="thumbnail">
<li><a href="no1_big.png"><img src="no1.png" alt="2009-07-01" /></a></li>
<li><a href="no2_big.png"><img src="no2.png" alt="2009-07-02" /></a></li>
<li><a href="no3_big.png"><img src="no3.png" alt="2009-07-03" /></a></li>
<li><a href="no4_big.png"><img src="no4.png" alt="2009-07-04" /></a></li>
<li><a href="no5_big.png"><img src="no5.png" alt="2009-07-05" /></a></li>
<li><a href="no6_big.png"><img src="no6.png" alt="2009-07-06" /></a></li>
<li><a href="no7_big.png"><img src="no7.png" alt="2009-07-07" /></a></li>
</ul>
</section>
</section>
</article>
</body>
で
cssは
@charset "utf-8";
/* CSS Document */
h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,object {
margin: 0;
padding: 0;
}
html,body {
margin: 0;
padding: 0;
height: 100%;
}
body { font-size: 16px; }
* html body {font-size: 100%;}
*:first-child+html body {font-size: 100%;}
/* block elements */
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal;
}
li { list-style-type: none; }
hr { display: none; }
address { font-style: normal; }
/* table */
table {
border: 0;
border-collapse: collapse;
border-spacing: 0;
}
th,td {
padding: 0;
font-weight: normal;
text-align: left;
vertical-align: top;
}
/* form */
textarea { font-size: 100%; }
/* inline-elements*/
img {
border: 0;
vertical-align: bottom;
}
object { vertical-align: bottom; }
em { font-style: normal; }
a:link,
a:visited {}
a:hover,
a:focus,
a:active {}
#header {
height:80px;
background-color:#000000;
}
#header h1{
font-size:300%;
color:#FFF;
text-align:center;
padding:10px;
}
section#photogaray{
width:800px;
margin:0 auto;
}
a#prev{
float:left;
margin:200px 0 0 20px;
}
a#next{
float:right;
margin:200px 20px 0 0
}
div#photocontents{
width:585px;
float:left;
}
h2#title{
font-size:300%;
font-weight:bold;
}
#photodate {
float:right;
}
p#date{
float:right;
}
#sw {
text-align:center;
margin:20px;
}
#photogray{
clear:both;
margin: 10px 0;
text-align: center;
width:585px;
}
section#thumbnailbox{
clear:both;
width:800px;
margin:0 auto;
margin-top 10px;
}
ul#thumbnail{
display:block;
text-align:center;
}
ul#thumbnail li{
float:left;
margin-left:10px;
}
ul#thumbnail li a.on {
display:block;
border: 2px solid #000000;
}
#title_ul{
clear:both;
}
です。
これで何がわからないかというと
Firebugというデバックツールで確認しながらやってるのですが、
<ul id="thumbnail">の中に<li><a id="morelink" href="#">more </a></li>
が二つ入っています。
javascriptのせいかもと思い、javascriptを全部消して実行してみたところ
やはり<ul id="thumbnail">の中に<li><a id="morelink" href="#">more </a></li>
がはいっていました。
ブラウザはfirefox9.0.1
HTML5で書いたつもりです。
どなたかなぜ上記のような現象がおこるのか教えていただけますでしょうか。
お礼
ありがとうがざいます。VSコードを使ってます。改めて見直したら、body{の「{」部分が赤表示になっていました。最後に「}」を追加すると 消えます。今後注意して作成していきます。