ボックスがFirefoxで隠れる

[新着] Webテンプレートを仮オープンしました

0   名前： すー ： 2006/06/15（木） 09:25  ID:WnVtfAWr
はじめまして。

【何をしたいのか】
Firefoxでボックスの後ろに隠れなく表示したいです。
IEでは正常に表示されるのですが、Firefoxでは正常に表示されません。

【現在の状況】
ボックスが後ろに隠れるという症状が現れました。
メニューを表示しているボックスがあり、その横にボックスを作ると、後ろに横に作ったボックスが隠れます。

【何をしてみたのか】
float:left;をしたらその症状自体は改善されるのですが、それでは色々と他に不都合があるのでできませんでした。

言葉ではわかりにくいと思うので、ソースをはらせていただきます。
<body>
<div id="id_main">

<!--タイトル画像 -->
  <p id="id_title">
    <a href="../index.html"><img src="../img/title.gif" alt="タイトル画像" width="180" height="70" style="border:0px;" title="タイトル画像 /></a>
  </p>
  
<!--広告 -->
	<p id="id_koukoku">
	<img src="../img/bana.jpg" alt="広告" width="512" height="70" style="border:0px;" />	
	</p>
<!--サイト紹介 -->
	<div id="id_syoukai">
	<strong>
	紹介文
	</strong>
	</div>
<!--パンクズ型ナビゲーション -->
	<div id="id_pannavi">
<!-- TemplateBeginEditable name="パンクズ型ナビゲーション" -->
	ナビゲーション
<!-- TemplateEndEditable -->
	</div>
<!--メニュー -->
	<div id="id_menu">
	<div class="favorite"><img src="../img/favorite.gif" alt="お気に入りに追加" width="160" height="26" class="favorite" /></div>
	<p class="menubig">▼トップページ</p>
	トップページ
	<p class="menubig">▼はじめに</p>
	このサイトについて<br />
	リンクについて<br />
	<p class="menubig">▼コミュニティ</p>
	雑談掲示板<br />
	<p class="menubig">▼その他</p>
	リンク<br />
	メール
  </div>
<!--内容 -->
<div id="id_content">
内容
</div>
	<br style="clear:both;" />
</div>
</body>
</html>

余分なソースは省いていますが、これでも表示できるはず・・・です。
足りない情報があれば教えてください。
よろしくお願いいたします。
1   名前： すー ： 2006/06/15（木） 09:25  ID:WnVtfAWr
文字数が足りないので、もう一度投稿させていただきます。
#id_main{
	background: #FFFFFF;
	width:702px;
	border:solid 1px #999;
	padding:4px;
	margin-left:auto;
	margin-right:auto;
	height:100%;
	min-height: 100%;
}
#id_title{
	margin:0px;
	width:181px;
	text-align:left;
	border:dashed 1px #FFFFFF;
	border-right-color:#FFFFFF;
	background: #FFFFFF;
	position: relative;
	float:left;
}
#id_koukoku{
	margin:0px;
	width:512px;
	text-align:left;
	border:dashed 1px #FFFFFF;
	background: #FFFFFF;
	float:left;
		}
#id_syoukai{
	text-align:center;
	border:none 1px #999;
	border-top-color:#FFFFFF;
	background:#336699;
	color:#FFFFFF;
	clear:left;
	width:100%;
		}
#id_menu{
	width:181px;
	text-align:left;
	border:solid 1px #999;
	margin-top:5px;
	padding:3px;
	line-height:130%;
	margin-bottom:5px;
	background:#FFFFFF;
	float:left;
		}
.red{
color:#C60000;
}
body{
	font-size: 15px;
	text-align : center;
	background-image:url(../img/background.gif);
	height:100%;
	}
html{
    height:100%;
}
body > #id_main {
    height: auto;
}
*{
    margin:0;
    padding:0;
}
.menubig{
	width:170px;
	height:100%;
	text-align:left;
	padding:5px;
	line-height:130%;
	background:#ccccff;
}

div.favorite {
width: 96%;
margin:0;
padding:0;
border-bottom:solid 3px #FFFFFF;
text-align: center; /* IE6 以前用処理 */
}

div.favorite img {
text-align: left; /* IE6 以前用処理の後始末 */
margin: auto; /* IE7 と IE 以外のブラウザ用処理 */
}
#id_content
{
	text-align:left;
	border:solid 3px #FFFFFF;
	background:#FFFFFF;
	line-height:130%;
}
#id_pannavi
{
	font-size:13px;
	text-align:left;
	background:#ccccff;
}
.kugiri{
	width:100%;
	color:#336699;
	padding-left:3px;
	margin-bottom:3px;
	border-bottom:solid 1px #336699;
	border-left:solid 7px #336699;
	background:#FFFFFF;
	font-size:18px;
	font-weight:bold;
		}
.title{
margin:4px;
margin-bottom:15px;
color:#336699;
}
.naiyou{
margin-left:5px;
padding-left:5px;
line-height:130%;
}
A:link { color: none;}
A:visited { color:none;
	}
A:active { color: note; }
A:hover { color:#FF0000;
			text-decoration: underline;}


[source]
2   名前： 匿名 ： 2006/06/15（木） 09:25  ID:QRdpODaQ
コピーペーストしてからIE6とFirefoxで見てみましたがどちらでも「内容」という文字がメニューの横に表示されていましたが。


>余分なソースは省いていますが、これでも表示できるはず・・・です。

…と、ありますが、上記ソースのみコピペでもすーさんの環境では省く前と同じように問題点が表示されますか？



><!--タイトル画像 -->
><p id="id_title">
><a href="../index.html">
><img src="../img/title.gif" alt="タイトル画像" width="180" height="70" style="border:0px;" title="タイトル画像 />
></a>
></p>

↑imgの中のtitleに、「""」一個足りません。
3   名前： すー ： 2006/06/15（木） 09:25  ID:WnVtfAWr
匿名さん初めまして。
回答ありがとうございます。
失礼いたしました。おっしゃるとおり、全く違う表示になってしまいました。
スタイルシートを読み込むタグまで省いていました。
以下に修正したタグを載せます。
<?xml version="1.0" encoding="shift_jis"?>
<!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"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
	<meta http-equiv="content-style-type" content="text/css" />
	<link href="メール" rev="made" />
	<link href="インデックス" rel="index" />
	<!-- InstanceBeginEditable name="doctitle" -->
	<title>タイトル</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>

これをbodyの上に付け足していただいたらバグるのが分かると思います。
CSSは同じフォルダのstyle.cssというファイルに保存しています。
>↑imgの中のtitleに、「""」一個足りません。
失礼いたしました。"を消していたようです。
ご指摘ありがとうございます。
4   名前： 匿名 ： 2006/06/15（木） 09:25  ID:QRdpODaQ
3>>
ソース付けたししても相変わらず「内容」は「メニュー」の右にきちんと表示されていて、どのボックスが重なっているか不明です。
float効いてるからだと思いますけれど…

このfloatで出来る見た目にfloatを使わないでしたいということだったら
positionで指定する方法しか思いつきません。
http://www.tagindex.com/stylesheet/box/position.html

表示がきちんと出来てしまっている物だけでは、さすがにどこをどう直すべきか助言できないので…。

positionやfloatで頑張ってみるか、他の方の助言待ってみてください。
一覧へ戻る