現在HPを作成していますが、Macではきちんと表示されるのに、Winだとレイアウトが崩れてしまいます。

一つのテーブル(外枠)の中に二つ以上のテーブルを入れると、テーブルとテーブルの間にある一定の隙間があいてしまいます。ページが縦に間延びした感じになってしまいます。ソースを確認したところ、指定していないheightのピクセル数が入っていたので全部削除しました。現在、外枠も入れ子にしているテーブルにもheightは設定されていない状態なのですが問題は改善されません。

原因は入れ子にしているテーブルにあるのかな、なんて何となく思っているのですがどうしたらいいのか分かりません。何か気がつくことがありましたら教えて下さい。よろしくお願いします。

A 回答 (1件)

ソースまたはURLをおしえていただかないと、これだけの情報量ではなんとも言えません。

    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q入れ子にしたテーブルをheight100%にする

お世話になります。
以下のソースで、table2の高さを100%にしたいです。
この書き方では、firefoxではうまく表示できるのですが、
IEではだめでした。どこがいけないのでしょうか??
----------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
html {height:100%;}
body {height:100%;}
.th100 {height:100%;}
-->
</style>
</head>

<body>
<table width="600" border="1" cellpadding="0" cellspacing="0" class="th100">
<tr>
<td width="300" rowspan="2">
長いテキスト
</td>
<td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td>table1</td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100">
<tr>
<td>table2</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

お世話になります。
以下のソースで、table2の高さを100%にしたいです。
この書き方では、firefoxではうまく表示できるのですが、
IEではだめでした。どこがいけないのでしょうか??
----------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
html {height:100%;}
body {height:100%;}
.th100 {height:100%;}
-->
</style>
</head>

<body>
<table width="6...続きを読む

Aベストアンサー

こちらではうまく再現できないのですが、CSSの設定を次のようにしてみてください。

body {height:100%; margin: 0; padding: 0;}
.th100 {height:100%;}

これでも駄目なら。

table, tr, td {margin: 0; padding: 0;}

を追加してみる。

Qdiv入れ子による height100%

お世話になります。

親要素のdivは縦100%になるのですが、
入れ子のdivが縦100%にならず困っております。

検証ブラウザは、IE6、IE7、FF2、Safariです。

お分かりの方、ご教授をお願いいたします。

▼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=shift_jis" />
<title>test</title>
<style type="text/css">
<!--
html { height:100%; }
body { height:100%; margin:0; padding:0; }

#wrapper {
background: #99CC00;
width:500px;
margin-left:auto;
margin-right:auto;
min-height:100%;
}
#wrapper-inner {
background:#CCFF00;
width:450px;
margin-left:auto;
margin-right:auto;
min-height:100%;
}
#contents {
background: #FFFFCC;
width:400px;
margin-left:auto;
margin-right:auto;
min-height:100%;
}

* html #wrapper { height: 100%; }
* html #wrapper-left { height: 100%; }
* html #wrapperA { height: 100%; }

-->
</style>
</head>
<body>

<div id="wrapper">
<div id="wrapper-inner">
<div id="contents">
テスト
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</div>

</body>
</html>

お世話になります。

親要素のdivは縦100%になるのですが、
入れ子のdivが縦100%にならず困っております。

検証ブラウザは、IE6、IE7、FF2、Safariです。

お分かりの方、ご教授をお願いいたします。

▼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=shift_jis" />
<title>test</title>
<...続きを読む

Aベストアンサー

こんにちは。

勘違いだったらすみません。もしもdivを3重にしているのが背景のためなら多分下のでいけると思います。


<!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=Shift-JIS" />
<title>test</title>
<style type="text/css">
<!--
html {
height:100%;
}

body {
height:100%;
margin:0;
padding:0;
text-align:center;
background:url(イメージ名.jpg) center repeat-y;
}

#contents {
width:400px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
-->
</style>
</head>
<body>
<div id="contents">
テスト
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
テスト
</div>
</body>
</html>

これで横500px、縦1pxとかで画像を用意して、ソースのイメージ名のところをその画像名にしてやればいけるとおもいます。
(上だと拡張子がjpgになってます)

こんにちは。

勘違いだったらすみません。もしもdivを3重にしているのが背景のためなら多分下のでいけると思います。


<!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=Shift-JIS" />
<title>test</title>
<style type="text/css">
<!--
html {
height:100%;
}

body {
height:100%;
margi...続きを読む

QDivの入れ子とHeight

こんにちわ。初歩的な質問かもしれませんがお願いします。
DivのContainerの中にPosition:Absoluteの3つのDivを入れ子にしたいんですが、Containerの高さを中身のDivの高さに依存する形にしたいのですが、うまくいきません。
Containerの高さと中身のコンテンツの高さをAutoにした場合、中身のほうは内容に依存する形で高さが自動になるんですが、Containerのほうがうまくいきません。FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか?
こちらがコードです。

HTML CODE
<HTML>
<HEAD>
<link rel="stylesheet" href="hp.css" type="text/css" />
</HEAD>
<BODY>
<div class="container">
<div class="banner">
</div>
<div class="menu">
</div>
<div class="main">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>
</div>
</BODY>
</HTML>

CSS CODE
*{margin:0;padding: 0;}
div.container{border:2px solid RGB(888888);
position:absolute;
top:20px;
left:50px;
width:900px;
height:auto;}
div.banner { position:absolute;
top:20px;
left:80px;
width:700px;
height:150px;
border:2px solid RGB(888888);}
div.menu{ position:absolute;
top:190px;
left:30px;
width:150px;
height:300px;
font-weight:bold;
border:2px solid RGB(888888);}
div.main{ position:absolute;
top:190px;
left:200px;
width:600px;
height:auto;
border:2px solid RGB(888888);}

こんにちわ。初歩的な質問かもしれませんがお願いします。
DivのContainerの中にPosition:Absoluteの3つのDivを入れ子にしたいんですが、Containerの高さを中身のDivの高さに依存する形にしたいのですが、うまくいきません。
Containerの高さと中身のコンテンツの高さをAutoにした場合、中身のほうは内容に依存する形で高さが自動になるんですが、Containerのほうがうまくいきません。FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか?
こちら...続きを読む

Aベストアンサー

≫FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか?

 ありません。
 そのためのabsoluteです。

【参考サイト】
Visual formatting model details
  http://www.y-adagio.com/public/standards/tr_css2/visudet.html

Qテーブルの入れ子でテーブルがそろわない

―――――――――――――
| ――― |      |tb1
||   || ―――  |
||tb2  |||   | |
||   |||tb3  | |
| ――― ||   | |
|     | ―――  |
 ―――――――――――― 
tb1の中にtb2とtb3を入れ子で作りましたが、cellpadding="0" cellspacing="0"を試してもどうしてもtb2とtb3の行がそろいません。。どなたか助けてください。ちなみにtb2もtb3もそれぞれ複数行あります。

Aベストアンサー

#1 補足のHTMLタグの場合、揃えたいのはどの部分とどの部分ですか?

今のところ気付いたのは以下の通りです。

・cellspacing cellpadding は td には使えません。
 table タグに指定してください。
・入れ子のテーブルを親テーブル内の上部で揃える場合、
 親テーブルの td に valign="top" を指定してください。

Qテーブルとテーブルの間の隙間

以下の様なHTMLでIE6で表示した場合、●Aと●Bの間に、微妙な隙間が入ってしまいます。
どうやっても隙間が無くなりません。

●Aの部分には、画像がランダムに表示されるようなスクリプトを記述していますが、
そのスクリプトを削除したら、ちゃんと隙間が無くなるのです(^^;)

これって方法はありますか?どうにかランダムに表示させたいので、アドバイス下さい。

============================

<script language="javascript" src="../js/top.js"></script>
</HEAD>
<BODY topmargin="0">
<DIV align="center">
<TABLE border="0" cellspacing="0" cellpadding="0">
<TBODY>
●A <TR>
<TD width="800"><SCRIPT LANGUAGE="JavaScript">random_img2()</SCRIPT>
<noscript><IMG src="../img/1.jpg" alt="" width="800" height="300"></noscript></TD>
</TR>
●B <TR>
<TD width="800"><A href="../index.html">HOME</A> &gt;&gt; TEST</TD>
</TR>
</TBODY>
</TABLE>

============================
※実際のHTMLには●Aと●Bという文字は入っておりません。

以下はtop.jsで記述している内容です。
============================

function random_img1(num1,num2) {
if((num1 - num2) > 0) {
var big = num1
var small = num2
} else {
var big = num2
var small = num1
}
var range = big - small + 1
var number = Math.floor(Math.random()*range) + small
return(number)
}

function random_img2() {
var img_src = "../img/" + random_img1(1,3) + ".jpg"
document.write("<IMG SRC='" + img_src + "'>")
}

============================

以下の様なHTMLでIE6で表示した場合、●Aと●Bの間に、微妙な隙間が入ってしまいます。
どうやっても隙間が無くなりません。

●Aの部分には、画像がランダムに表示されるようなスクリプトを記述していますが、
そのスクリプトを削除したら、ちゃんと隙間が無くなるのです(^^;)

これって方法はありますか?どうにかランダムに表示させたいので、アドバイス下さい。

============================

<script language="javascript" src="../js/top.js"></script>
</HEAD>
<...続きを読む

Aベストアンサー

IE6だけなの?
IE6がないので確認できないので
推測で述べるわ。

全ての改行をなくしてみたらどお?


人気Q&Aランキング

おすすめ情報