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で書いたつもりです。
どなたかなぜ上記のような現象がおこるのか教えていただけますでしょうか。
