院生エンジニアのにっき

  • Change style to Blue
  • Change style to Red
  • Change style to Green
  • Change style to Pink
HOME > IEにてサイドバーの表示が崩れていた件を修正

IEにてサイドバーの表示が崩れていた件を修正   2008-02-17

先月からIE6で見た際にサイドバーの表示が崩れていたのですが、原因がやっとわかり修正しました。

Firefox2での表示は
firefox
のようにうまくいっていたのですが、IE6にて
ie
のようにくずれておりました。

原因はCSSにて

  • li要素の横幅の指定ミス
  • IEだと改行無視を指定しないとli要素がうまく改行してくれなかった

でした。

  1. #nav a {
  2.         display: block;
  3.         font-size: 10px;
  4.         font-weight: bold;
  5.         color: #999;
  6.         text-decoration: none;
  7.         margin: 0 4px auto 4px;
  8.         padding-left: 5px;
  9.         border-bottom: 1px solid #CCC;
  10.         /*height: 16px;
  11.           縦幅を指定すると改行時にデザインが重なる*/
  12.         padding-top: 7px;
  13.         }
  14.  
  15. #nav li {
  16.         width: 202px; /* ←横幅を指定する */
  17.         }       
  18.  
  19. #nav li.category { /* カテゴリ表示部 */
  20.         float: left;
  21.         width: auto;
  22.         white-space: nowrap; /* ←改行しない */
  23. }

これで現在はIE・Firefoxともにデザインが崩れずに表示されているはずです。

IE・Firefoxでの表示の両立は難しいですね。

コメントを書く