float+IE8で形が崩れる原因と解決法
- float+IE8で形が崩れる原因と解決法について解説します。
- float+IE8で形が崩れる原因は、IE8のブラウザがCSSのfloatプロパティを正しく解釈できないことです。
- 解決法としては、IE8に対応したCSS hackや別のレイアウト手法を使うことが考えられます。
- ベストアンサー
float+IE8で形が崩れます。
float+IE8で形が崩れます。 Webクリエイターの模試をやっていたら以下のHTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="base.css"> <title>模擬</title> </head> <body> <div class="menu"> <h1>番号</h1> <ul> <li>トップ</li> <li><a href="spring.html">１</a></li> <li><a href="summer.html">２</a></li> <li><a href="autumn.html">３</a></li> <li><a href="winter.html">４</a></li> </ul> </div> <div class="season"> <p>ああああああああああああああああああああああああああああああああああああああああああああ</p> </div> </body> </html> を以下のcssと関連付けるものがあったのですが、 @charset "Shift_JIS"; body{ border:solid 1px #993366; width:800px; } h1{ color:#ffffff; background-color:#993366; font-size:140%; } h2 { font-size:120%; } ul{ line-height:200%; list-style:square; } .menu{ border-right:solid 1px #993366; width:150px; float:left } .season{ padding:10px; width:620px; } IE8で見るとまったく形が崩れてしまいます。 何故でしょうか？ これをIE6などで見るときちんとした形になると思うのですが、同じように表示するにはどうしたらよいのでしょうか？ なかなかうまくいきません。 よろしくお願いいたします。
- makiko3300
- お礼率4% (2/48)
- HTML
- 回答数1
- ありがとう数8
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
IE8だけじゃなく、Chrome, Fx3.6, Operaでも崩れるはず。(Chrome4.1は確認しました) IE8の動作が正しく、IE6が間違っています。 > 何故でしょうか？ floatされた要素は高さが0になるからです。 対処法はfloatを解除すれば、きちんと高さを計算してくれます。 clearプロパティは適当なブロックレベル要素に割り当てればいいんですが、もしこの下に要素がなければclearfixという手法を使います。 (全角空白は半角空白にしてください) --------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #Contents{ width:800px; border: solid 1px #993366; /zoom : 1; /* IE6,7のclearfix代替 */ } /* clearfix */ #Contents:after{ content : ''; display : block; clear : both; } h1{ color:#ffffff; background-color:#993366; font-size:140%; } h2 { font-size:120%; } ul{ line-height:200%; list-style:square; } .menu{ border-right:solid 1px #993366; width:150px; float:left } .season{ padding:10px; width:620px; } </style> <title>模擬</title> </head> <body> <div id="Contents"> <div class="menu"> <h1>番号</h1> <ul> <li>トップ</li> <li><a href="spring.html">１</a></li> <li><a href="summer.html">２</a></li> <li><a href="autumn.html">３</a></li> <li><a href="winter.html">４</a></li> </ul> </div> <div class="season"> <p>ああああああああああああああああああああああああああああああああああああああああああああ</p> </div> </div> </body> </html> --------- いまどき ? いまさら ? clear fix のコード | ヨモツネット http://www.yomotsu.net/wp/?p=561
関連するQ&A
- float の clearfixで謎の空間が出現
現在、図のように表示されています。 本来であれば右側の「フロートテスト」という横並びのブロックがすぐ下に並んで表示させたいのです。 しかし、2つめが左側のサイドバーの終わりから表示されています。 サイドバーにも「フロートテスト」にもfloatとclearfixを使用しています。 clearfixを削除すると、wrapperが高さを持たないボックスになりますが、目的通りの縦に並んだ状態になります。 フロートが悪いのか、clearfixの設定or使い方が悪いのか。 原因が不明で悩んでおります。 よろしくお願いします。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="ja" lang="ja"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>test</title> </head> <body style="background: #ffe6e6;"> <div id="wrapper" style="width:800px;background:#ffffff;border:1px solid red;" class="clearfix"> <div id="sidebar" style="width:200px;float: left;"> <div> <div> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> </div> </div> <div> <div style="border:1px solid #ccc;"> <p style="FONT-WEIGHT: bold; TEXT-ALIGN: center">サイドメニュー</p> </div> <div> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> </div> </div> </div> <!-- /sidebar --> <!-- contents --> <div id="contents" style="margin-left: 200px;" class="clearfix"> <div class="clearfix"> <div style="float:left;width:50%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> <div style="float:right;width:49%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> </div> <div class="clearfix"> <div style="float:left;width:50%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> <div style="float:right;width:49%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> </div> </div><!-- /contents --> </div><!-- /wrapper --> </body> </html> common.cssで読み込んでいるclearfix の部分 .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; /* Hides from IEmac \*/ } .clearfix { display: block; }
- ベストアンサー
- CSS
- IE6,IE7だとメニューが写真の裏に表示される
こんばんは。コーディング作業をしており、ヘッダーにドロップメニュー(多階層のメニューバー)を設置し、その下に写真を置いたのですが、メニューをマウスオーバーし、2階層目のカテゴリが出てきた時に、IE6.IE7だと写真の裏に隠れてしまいます。 ※ＩＥ8、ＦＦ、Ｍａｃだと写真の前にちゃんと表示されます。 ソースを添付しますので、どこがいけないかご指摘していただけないでしょうか。 よろしくお願いいたします。 [HTMLソース] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.5.2.js"></script> <script type="text/javascript" src="superfish.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('ul#nav').superfish(); }); </script> </head> <body> <div id="container"> <div id="header" class="clearfix"> <div id="menuBottom" class="clear"> <ul id="nav" class="clearfix"> <li><a href="#"><img src="" alt="" width="88" height="29" /></a> <ul> <li><a href="#aa">menu item that is quite long</a></li> <li class="current"><a href="#ab">menu item</a> <ul> <li><a href="#">menu item</a> <ul> <li><a href="#">short</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> </ul> </li> </ul> </div><!--#menuBottom END--> </div> </div><!--#header END--> <br /><br /><br /><br /> <div id="contents"> <div id="slide" class="fltL"> <div id="slide_body"> <ul> <li style="margin-left:300px;"><img src="" width="622" height="461" alt="" /></li> </ul> </div><!--#slide_body END--> </div> <!--#slide END--> </div><!--#container END--> </body> </html> [上のhtmlに読み込まれているＣＳＳ（style.css）] #header { width:950px; margin:0 auto; padding-top:19px; z-index:100; } #menuBottom { float:right; z-index:0; } #container { width:100%; text-align: left; } /*** ドロップメニュのＣＳＳ ***/ ul li { margin:0; padding:0; } #nav ul { position:absolute; top:-999em; width:10em; /* left offset of submenus need to match (see below) */ } #nav ul li { width:100%; height:100%; } #nav li:hover { visibility:inherit; /* fixes IE7 'sticky bug' */ } #nav li { float:left; position:relative; } #nav li:hover ul, #nav li.sfHover ul { left:0; top:2.5em; /* match top ul list item height */ z-index:99; _z-index:0; } ul#nav li:hover li ul, ul#nav li.sfHover li ul { top:-999em; } ul#nav li li:hover ul, ul#nav li li.sfHover ul { left:10em; /* match ul width */ top:0; } ul#nav li li:hover li ul, ul#nav li li.sfHover li ul { top:-999em; } ul#nav li li li:hover ul, ul#nav li li li.sfHover ul { left:10em; /* match ul width */ top:0; } /*** DEMO SKIN ***/ #nav { float:left; } #nav ul li a { display:block; position:relative; padding:0.75em 1em; border-left:1px solid #fff; border-top: 1px solid #CFDEFF; text-decoration:none; height: 100%; z-index:15; } #nav a, #nav a:visited { /* visited pseudo selector so IE6 applies text colour*/ color:#13a; } #nav li li{ background:#AABDE6; } /*** 画像部分のＣＳＳ ***/ #slide { width:624px; position:relative; } #slide_header { position:absolute; top:0px; left:0px; width:624px; height:7px; z-index:2; background: url(slide_header.png) no-repeat; } #slide_body { background: url(slide_body.gif) repeat-y 0px 0px; width:624px; margin:auto; } #slide_body img { margin:auto; }
- 締切済み
- HTML
- html+cssでfloatに関して
このやり方に問題があるかどうかを教えてほしいのと、 もっといいやり方があれば教えて頂きたいです。 まずやりたいことは3列並びで何段も下に続いて行くようなレイアウトにしたいのです。 で、1つのブロックのwidthが250pxです。そしてブロックとブロックの間が50pxです。 さらに、それを格納するボックスの幅が850pxです。普通にfloatさせてるようにすると3列に並ばず2列になってしまうので、ulのwidthを900pxにして解決したのですが、これは問題あるのでしょうか。 ソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"><!-- body{margin:0;padding:0;background:#fc0;} div{width:850px;background:#fff;margin:0 auto;} ul{width:900px;margin:0;padding:0;} li{width:250px;height:300px;float:left;display:inline;margin-right:50px;margin-bottom:50px;background:#0fc;} img{border:0;} --></style> </head> <body> <div> <ul> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> </ul> <br clear="all"> </div> </body> </html>
- ベストアンサー
- HTML
- リストタグを用いた段組みメニューの不具合（IE6）
数日間大変悩んだのですが解決しなかったため、どなたかご回答頂けると嬉しいです。 リストタグを横に二列並べて段組みにするようなレイアウトを作っているのですが、 IE6で確認した際にdisplay:inlineを使用しているにも関わらずリストが縦に並んでしまいます。 他のブラウザで見る際には問題が無いので、どうしたものかなと途方にくれています。 以下がhtmlとcssです。 【html】 <div class="test"> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="search_clear"></div> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> </div> 【css】 div.test { width: 500px; height: 370px; margin: 15px 0 10px 0; } div.test h3 { width: 220px; font-size: 16px; margin: 10px 10px 0 20px; } div.test ul { width: 220px; margin: 0 10px 15px 10px; list-style:none; } div.test ul li { width: 220px; display:inline; } div.test ul li a { color: #666; } div.test ul li a:hover { color: #999; } .test_clear { clear:both; } .test_left { float: left; width: 240px; } .test_right { float: right; width: 240px; } 仮にこの部分に問題が無いとすると、この要素を囲む他のcssやhtmlに問題あるのかもしれませんが、 何卒宜しくお願い致します。
- ベストアンサー
- HTML
- IE6でli間に出来る隙間を無くす方法について
下記のソースをIE6で閲覧すると「リンクあり２」と「リンクあり３」の間に隙間ができてしまい、この隙間を除きたいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 なお、Firefox等では隙間は出来ませんでした。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; } ul, li { margin:0; padding:0; } li { list-style: none; } #mainlinkbox { width:100px; } #mainlinkbox li.nolink, #mainlinkbox li.link a { width:97px; border-bottom: 1px dotted blue; padding-bottom: 3px; padding-left: 3px; padding-top: 4px; background-color:red; } #mainlinkbox li.link { position:relative; } #mainlinkbox li.link a { display:block; } #mainlinkbox li.link a:hover { background-color: #c2f4a3; } #mainlinkbox li.link .submainlinkbox { left: 100px; position: absolute; width: 100px; background: yellow; } --> </style> </head> <body> <ul id="mainlinkbox"> <li class="link"><a href="#">リンクあり１</a></li> <li class="nolink">リンクなし</li> <li class="link"><a href="#">リンクあり２</a><div class="submainlinkbox">サブ項目</div></li> <li class="link"><a href="#">リンクあり３</a></li> </ul> </body> </html>
- ベストアンサー
- CSS
- リストタグ, float:left; operaで
下記のようにリストタグで [リンク][ 説明 ] というデザインにしたいと思っています。 リンク部分はマウスを当てると浮き出るようにしています。 これがIEとfirefoxではうまく表示されますがoperaではうまく表示されません。 [説明]の部分の<li>が[リンク]部分の<li>を無視して表示されてしまいます。 marginで場所あわせをするとリンクボタンを押したときに全体が動くようになってしまいます。 テーブルタグを使うと、IEで見た場合リンクのボタンがうまく動かないのでテーブルタグはだめっぽいです。 なにか解決案はございますでしょうか？よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> <!-- a.link-a{ display:block; width:150px; height:30px; text-align:center; line-height:30px; background-color:#ccddff; } a.link-a:hover{ margin:-2px 0 0 -2px; border:solid #492E07; border-width:0 2px 2px 0; } a.link-a:active{ border-width:2px 0 0 2px; } ul.link{ margin:3px 0; ist-style-type:none; clear:both; } li.float-1{ float:left; width:150px; height:30px; line-height:30px; border:solid #6A5D50; border-width:0px 0px 1px 0px; } li.float-2{ width:530px; line-height:30px; padding:0 0 0 20px; height:30px; background-color:#ebebeb; border:solid #6A5D50; border-width:0px 1px 1px 0px; } li.margin-1{ width:150px; height:30px; line-height:30px; border:solid #6A5D50; border-width:0px 0px 1px 0px; } li.margin-2{ margin:-31px 0px 0px 150px; width:530px; line-height:30px; padding:0 0 0 20px; height:30px; background-color:#ebebeb; border:solid #6A5D50; border-width:0px 1px 1px 0px; } --> </style> </head> <body> <ul CLASS="link"> <li CLASS="float-1"><a class="link-a" HREF="http://okwave.jp/">OKWAVE</a></li> <li CLASS="float-2">日本初、最大級のＱ＆Ａサイト ＯＫＷＡＶＥ</li> </ul> <ul CLASS="link"> <li CLASS="margin-1"><a class="link-a" HREF="http://okwave.jp/">OKWAVE</a></li> <li CLASS="margin-2">日本初、最大級のＱ＆Ａサイト ＯＫＷＡＶＥ</li> </ul> </body> </html>
- ベストアンサー
- HTML
- 画像の貼り方教えてほしいです
CSSの画像の貼り方がわかりません body{ background-color: #f2f2f2; padding: 0; margin: 0; } div#container { width: 700px; padding: 0; margin-left: 150px; background-color: white} div#header { background-color: blue; badkground-image: url(画像.jpg); width: 640px; height: 233px ｝ 画像の部分のCSSはこんな感じです。 htmlは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="roll.css" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">web</a></li> <li><a href="#">title1</a></li> <li><a href="#">title2</a></li> <li><a href="#">css</a></li> <li><a href="#">seo</a></li> </ul> </div> <div style="clear:both; "></div> </div> </body> </html> こうなってます。 ここまで何が間違っているかわかりません。 初心者ですがどなたかわかる方よろしくお願いします。
- 締切済み
- HTML
- CSS・IEでボーダーを表示したい
お世話になります。 ホームページ構築(CSS)に関する質問です。 よろしくお願いします。 フリーのCSSサンプルサイトより、ソースをいただいて、 ページを作ってみたのですが。 ナビゲーションリストの部分で、 FireFoxでは、各メニューの右側に、仕切りの部分の「線」が、 表示されているのですが、なぜかIEでは表示されません。 まだ理解が足らないのですが、 「#navigation li a」の 「border-right: 1px double#fff;」あたりかなと思い、 線種を変えてみたりと、いろいろしているのですが 変化がありません。 変更すべき点をどうかご教授ください。 以下は実際のソースです。 「index.html」 --------------------------------------------------------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>テストサイト</title> </head> <body> <div id="container"> <div id="header"> <h1>タイトル「テストサイト」 </h1> </div> <div id="navigation"> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="menu2.html">メニュー２</a></li> <li><a href="menu3.html">メニュー３</a></li> <li><a href="menu4.html">メニュー４</a></li> </ul> </div> <div id="content"> <p>テストののページです。</p> <p>上記メニューよりご利用ください。</p> </div> <div id="footer"> Copyright テスト著作権, 2012 </div> </div> </body> </html> --------------------------------------------------------------------------------------------------------------------------- common.css --------------------------------------------------------------------------------------------------------------------------- @charset "UTF-8"; #container { margin: 0 auto; width: 600px; background:#fff; } #header { background:#ccc; padding: 20px; } #header h1 { margin: 0; font-size: 120%;} #navigation { float: left; width: 600px; background:#333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color:#fff; text-decoration: none; border-right: 1px double#fff; } #navigation li a:hover { background:#383; } #content { clear: left; padding: 20px; } #content h2 { color:#000; font-size: 160%; margin: 0 0 .5em; } #content h3 { font-size: 110%; } #footer { background:#ccc; text-align: right; padding: 20px; height: 1%; } -------------------------------------------------------------------------- 以上が内容になります。 どうかよろしくお願いします。
- ベストアンサー
- HTML
- <li>メニューの背景画像、IEだけ出ない
どうぞよろしくお願いします。 あれこれやったのですが、なぜかwin IE7でだけ（IE6は未確認） メニューの背景画像（グラデーションを使ったもの）が表示できません。 モダンブラウザとmacでは確認しました。 今日一日悩んでるのですが、どうしても分かりません。 【HTML】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="../css/01.css" rel="stylesheet" type="text/css"> </head> <body><div class="right">【ダミーテキスト】</div> <div id="menuarea"> <!--メニューエリア--> <ul id="menu"> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">あいうえお</a></li> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">かきくけこ</a></li> <li><img src="../common/arrow.gif" width="13" height="11" /><a href="#">たちつてと</a></li> </ul> <ul id="bnr"> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> <li><a href="#"><img src="../common/test.jpg" width="150" height="50" border="0"/ class="blockbnr" /></a></li> </ul> </div> <!--/メニューエリアここまで--> </body> </html> 【CSS】 .right { width:300px; float:right; border:1px solid red; } #menuarea { font-size:80%; width:168px; height:100%; } ul#menu { width:168px; margin-left:0px; padding-left:1em; padding-top:1em; padding-bottom:100px;/*メニュー下の余白*/ background:url(../common/menu-up.jpg)no-repeat;/*メニュー画像上部*/ } ul#bnr { width:168px; background:url(../common/menu-btm.jpg)no-repeat;/*メニュー画像下部*/ margin-left:0px; padding-left:0.7em; padding-bottom:10px; background-position:0 100%; }
- ベストアンサー
- HTML
- hover擬似要素をかけるとfloatでの段組が崩れる
宜しくお願い致します。 以下の様なHTMLとCSSで、hover擬似要素でボタン押下を表現したリストのリンクが、IE6（他ブラウザは現在確認出来ていません）でマウスを乗せると、floatした段組が崩れそのリストメニューの高さまで段組の親要素が縮んでしまいます。 原因にお気付きの方は、どうかご指摘頂けます様、お願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift-JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- /* 全体 -------------------------------------------------- */ body { background-color: ivory; width: 800px; margin: auto; font-size: small;} /* コンテナ -------------------------------------------------- */ div#container { width: 948px; border-left: 1px solid maroon; border-right: 1px solid maroon; background-color: white;} /* 段組 -------------------------------------------------- */ div#main { width: 700px; padding: 10px; float: right; border-left: dashed 1px maroon;} div#navigation { padding: 10px;} /* clearfix */ div#contents:after { content: "."; display: block; clear: both; height: 0px; font-size: 0px; visibility: hidden;} div#contents { display: inline-block; min-height: 1%;} /* Mac版IE用ハック開始 \*/ * html div#contents {height: 1%;} div#contents {display: block;} /* Mac版IE用ハック終了 */ /* 見出し -------------------------------------------------- */ h1 { background-color: maroon; font-size: xx-large; color: #ff9999; margin: -10px -10px 0px -10px; padding: 13px 13px 3px 13px; text-align: center;} /* ナビゲーション -------------------------------------------------- */ div#navigation ul { margin: 0px 0px 0px -10px;} div#navigation li { list-style-type: none; margin: 10px auto; width: 160px;} div#navigation a { text-decoration: none; display: block; width: 100%; font-weight: bold; color: #ff9999; padding: 3px; text-align: center; background-color: maroon; border: outset 3px maroon;} div#navigation a:hover { border: inset 3px maroon;} /* フッター -------------------------------------------------- */ address#footer { margin: 0px -10px -10px -10px; padding: 3px 13px 13px 13px; background-color: maroon; color: #ff9999; text-align: right;} --> </style> </head> <body> <div id="container"> <h1>ページタイトル</h1> <div id="contents"> <div id="main"> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> </div> <div id="navigation"> <ul> <li><a href="" title="">Home</a></li> <li><a href="" title="">abc</a></li> <li><a href="" title="">def</a></li> <li><a href="" title="">ghi</a></li> <li><a href="" title="">jkl</a></li> <li><a href="" title="">mno</a></li> <li><a href="" title="">pqr</a></li> </ul> </div> </div> <address id="footer">フッター</address> </div> </body> </html>
- ベストアンサー
- CSS
