ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
質問者：prussianblue 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>
質問投稿日時：08/03/11 18:52
質問番号：3853730
この質問に対する回答は締め切られました。

回答

良回答20pt
回答者：abril 今IEが見れない環境なので、IEで実際どの様にご覧になっているのかわからないのですが、Safariで見た結果「マウスを乗せ」ても、「floatした段組が崩れそのリストメニューの高さまで段組の親要素が縮んで」しまうという現象は起こりません。CSSでの設定通り、マウスオーバーで起こる変化は、ボーダーのスタイル変更のみです。
ただし…多分、質問者様が意図している様な（IEで見えているだろう）レイアウトからは程遠いレイアウト崩れが最初から起きている様に思います。私が今見ている状態を簡単に説明すると：

(1)div#navigationがdiv#containerの中央に
(2)div#mainがdiv#navigationの左側の領域にセンタリング状態で配置
(3)div#navigation a を含む<li><a href="" title="">Home</a></li>の背景色がdiv#mainの中の<p>段落</p>の数の分だけ上にびょーんと伸び、次の<li><a href="" title="">abc</a></li>は<p>段落</p>が終了（＝#mainの中の要素が終了）した時点からようやく始まり、それ以後のメニューは正常

という状態になっています。

body、div#container、h1、div#navigation ul、div#navigation li 、div#navigation a、div#navigation a:hover、address#footerだけで構成したHTMLを表示させてみたところ、少なくとも(3)の症状だけは見られなくなりました。質問者様も一度、その状態でIEの表示結果を確認してみて下さい。もしそれでマウスオーバーの際の結果が問題なかった場合は、不具合の原因はfloat絡みのコンテナブロックの設定にありますね。

※もしも私が見ている状態が「それでいいんじゃ」という事でしたら、ご容赦を。
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：08/03/11 22:08
回答番号：No.1
この回答へのお礼本当は、こう（以下の修正ソース）したかったんです（汗）。
おっしゃって頂いたfloat周辺の問題でした。floatされた左右カラムの要素と、displayをblockにしていたa要素周辺のwidthの問題みたいでした。

本当に、有難う御座いました。そして、お騒がせ致しました。
safari環境は無いのですが、火狐で確認したら、今回は大丈夫みたいです（汗）。

/* 全体 */
body {
background-color: ivory;
width: 950px;
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: 707px;
padding: 10px;
float: right;
border-left: dashed 1px maroon;}

div#navigation {
width: 200px;
padding: 10px;
float: left;}

/* 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: 0px;
padding: 3px;
text-align: center;}

/* ナビゲーション */
div#navigation ul {
margin: 0px;
padding: 0px;}

div#navigation li {
list-style-type: none;}

div#navigation a {
text-decoration: none;
display: block;
width: 160px;
margin: 10px auto;
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 {
padding: 3px;
background-color: maroon;
color: #ff9999;
text-align: right;}
 
スポンサーサイト（詳細）
このページのトップへ