スポンサーサイト
一定期間更新がないため広告を表示しています
- 2012.07.15 Sunday
- -
- -
- -
- -
- -
- by スポンサードリンク
「IE7の型崩れ」では、私自身が過去にやらかしたIE7で型崩れをしたパターンを不定期的に(笑)書いていく予定です。私自身の覚え書きでもありますが、Webデザイナーの卵さんの参考になれば幸いです。なお、スマホやモバイルでは正しく表示されない恐れがあります。
さて、今回のネタは、Webサイトを制作する人であれば誰でも作ったことがある横長の「グローバルナビゲーション」です。
IE7を使っている方でも綺麗に並んでいると思います。
サンプルソースはこちら
***************************
html
***************************
<ul id = "navi"> <li class = "navi_btn"><a href = "#">ホーム</a></li> <li class = "navi_btn"><a href = "#">ショップ</a></li> <li class = "navi_btn"><a href = "#">会社概要</a></li> <li class = "navi_btn"><a href = "#">リンク集</a></li> <li class = "navi_btn"><a href = "#">お問い合わせ</a></li> </ul>
***************************
css
***************************
ul#navi{
margin:0 auto;
padding:0;
border:#900 1px solid;
width:600px;
height:50px;
overflow:hidden;
list-style:none inside;
}
li.navi_btn{
border:0;
margin:0;
padding:0;
list-style-type:none;
float:left;
}
li.navi_btn a,
li.navi_btn a:link{
display:block;
width:120px;
line-height:50px;
background-color:#900;
color:#fff;
text-align:center;
text-decoration:none;
}
li.navi_btn a:hover,
li.navi_btn a:active{
background-color:#fff;
color:#900;
}
.attention{
color:#f00;
}
問題はこちらのグローバルナビゲーション。
IE8以降や、firefox,safari,chrome等を使っている方には先ほどと同じように見えてると思いますが、IE7では、
このように型崩れしていると思います。
サンプルソースはこちら
***************************
html
***************************
<ul id = "navi"> <li class = "navi_btn"><a href = "#">ホーム</a></li> <li class = "navi_btn"><a href = "#">ショップ</a></li> <li class = "navi_btn"><a href = "#">会社概要</a></li> <li class = "navi_btn"><a href = "#">リンク集</a></li> <li class = "navi_btn"><a href = "#">お問い合わせ</a></li> </ul>
***************************
css
***************************
ul#navi{
margin:0 auto;
padding:0;
border:#900 1px solid;
width:600px;
height:50px;
overflow:hidden;
list-style:none inside;
}
li.navi_btn{
border:0;
margin:0;
padding:0;
list-style-type:none;
}
li.navi_btn a,
li.navi_btn a:link{
display:block;
width:120px;
line-height:50px;
background-color:#900;
color:#fff;
text-align:center;
text-decoration:none;
float:left;
}
li.navi_btn a:hover,
li.navi_btn a:active{
background-color:#fff;
color:#900;
}
.attention{
color:#f00;
}
違いはcssで、float:left;が、<a>タグに指定されているか、<li>タグに指定されているかです。
考えてみると崩れて当たり前のことのように思えるとても初歩的なことなのですが、癖がついているのか今でもたまにやらかします。
自分自身の覚え書きとしてブログに残しておきます。