※ ChatGPTを利用し、要約された質問です（原文：IEの「カラム落ち」に悩まされています）
IEの「カラム落ち」に悩まされています
このQ&Aのポイント
IEの「カラム落ち」に悩まされています。MacOS X 10.5.6 にVirtual PC-XP SP3 を載せた環境で、Virtual PC-XP SP3 の IE6 ではカラムが落ちる問題が発生しています。
IEの「カラム落ち」について、MacサファリやIE6/IE7には発生せず、Virtual PC-XP SP3 の IE6 でのみ問題が発生しています。IE6/IE7 のXP/VISTAでの動作も確認したいと考えています。
IEの「カラム落ち」の問題について、Virtual PC ではない XP/VISTA のIE6/IE7 で確認してもらえますか？また、問題が発生する要素の修正方法も教えてください。
この2日間、IEの「カラム落ち」に悩まされています。
色々検索すると、Margin とpadding/border を一緒に使わないこと、らしいので、そのように設定したつもりなのですが......
私の環境は、MacOS X 10.5.6 にVirtual PC-XP SP3 を載せています。
Mac safari(3.2.1)、safari-[開発]-IE6/IE7 ではカラム落ちしていないのですが、Virtual PC-XP SP3 の IE6 では見事に落ちています。
この設定を Virtual PC ではない XP/VISTA のIE6/IE7 で見たとき落ちているかどうか、教えていただけないでしょうか。
また、どこを直せば落ちないようにできるかも教えてください。
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis" />
<META name="robots" content="noindex,nofollow">
<META name="description" content="Gallery">
<title>Gallery</title>
<style type="text/css">
<!--
body {
margin:0;
padding:0;
font-family:Arial,MS UI Gothic;
font-size:13px;
background-color:#FFFFFF;
}
#wapper {
margin:0 auto;
padding:0;
width:952px;
min-height:500px;
height:auto;
text-align:center;
background-image:url(hoge.png);
background-repeat:no-repeat;
backgroud-position:relative;
}
#header {
margin:0;
width:950px;
text-align:right;
}
#header h1{
margin-top:-15px;
padding-right:30px;
color:#708090;
}
#header h2{
padding-top:30px;
padding-right:10px;
color:#708090;
}
#menu{
margin:0 0 20px 500px;
}
#menu a{
padding-right:5px;
padding-left:5px;
width:90px;
display:inline;
text-decoration:none;
}
#menu a:hover{
color:#FFFFFF;
background-color:#FF7F50;
}
#left{
margin:320px 15px 20px 30px;
width:310px;
height:auto;
text-align:left;
line-height:150%;
float:left;
}
#left h2 {
padding-left:25px;
background-color:#FFFFFF;
}
.under_l {
margin-top:-45px;
margin-right:531px;
background-color:#FF7F50;
}
#right{
margin:0px 15px 20px 30px;
width:549px;
text-align:left;
line-height:150%;
min-height:400px;
float:left;
}
#right h2 {
padding-left:25px;
padding-bottom:10px;
background-color:#FFFFFF;
}
.under_r {
margin-top:-35px;
margin-right:292px;
background-color:#FF7F50;
}
#right ul {
list-sytle-type:disk;
list-sytle-position:inside;
color:#708090;
}
#right li {
width:251px;
float:left;
}
a {
text-decoration:none;
}
a:hover {
background-color:#FFEBCD;
}
#footer {
margin:25px 20px;
font-size:x-small;
text-align:center;
clear:both;
}
strong {
color:red;
font-weight:bold;
}
-->
</style>
</head>
<body>
<div id="wapper">
<div id="header">
<h2>pagetitle</font></h2>
<h1>pagetitle</h1>
</div><!--end header-->
<div id="menu">
<hr>
<a href="#">Index</a>
<a href="#">Top</a>
<a href="#">Gallery</a>
<hr>
</div><!--end menu-->
<div id="left">
<h2>Gallery</h2>
<div class="under_r"> </div>
<p>
左カラム<br />
</p>
</div><!--end left-->
<div id="right">
<h2>右カラム</h2>
<div class="under_l"> </div>
</div><!--end right-->
<div id="footer">
<hr>
Copyright (c) All Rights Reserved
</div>
</div><!--end wapper-->
</body>
</html>
お礼
お試しいただいて、ありがとうございます。 左上には画像が来るため、左カラムは右カラムに比べて200px弱下げる必要があり、前の設定だと左カラムの下に右カラムが来てしまって困っていたのです。 無事解決しましたが、それにしてもIEには悩まされます、ハァ～...