ブラウザによるレイアウトの崩れ

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： ＠驚く ： 2005/10/08 23:42  ［URL］
私のホームページですが、IEで見ると普通に見えるのですがOperaで見ると僅かですが、上のフレーム（メニュー）と下のフレームに僅かですが隙間が出来て左右も揃っていません。
IEでもOperaでも同じように表示する方法ってありませんか？
どなたか知っている方かいましたら教えて下さい。
1   名前： カヅサツ ： 2005/10/08 23:42  ［URL］
●index.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>無料でFLASH作成！--＠驚くのPowerbullet!!--</title>
</head>
<frameset rows="59,*" framespacing="0">
<frame name="ue" src="menu.html" title="メニュー" scrolling="auto" frameborder="0">
<frame name="sita" src="sita.html" title="このサイトについて／サイトマップ" frameborder="0">
<noframes>
<body>
<h1>無料でFLASH作成！--＠驚くのPowerbullet!!--</h1>
<p>＠驚くのPowerbulletは、無料フラッシュ作成ソフトPowerbulletの紹介、解説、作品公開をしています。</p>
<p>ウェブページのメニューをFLASH化したり様々な応用が出来ます。</p>
<ul>
<li><a href="menu.html">メニュー</a></li>
<li><a href="http://usj.to/attopb/k/">携帯端末向けページ</a></li>
</ul>
</body>
</noframes>
</frameset>
</html>
2   名前： カヅサツ ： 2005/10/08 23:42  ［URL］
●menu.html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<link rel="stylesheet" href="./style.css">
<title></title>
<style type="text/css">
body{
font-size: small;
}
table{
margin: 4px auto 1px auto;
}
td.ridge{
width: 20px;
}
td.ridge,
td.notice{
height: 20px;
}

td.notice,
td.menu{
background-color: #3399FF;
text-align: center;
}
td.notice{
width: 660px;
}
td.menu{
width: 700px;
height: 35px;
}
img,object,embed{
vertical-align: bottom;
}
#powerbullet,
#powerbullet embed{
width: 699px;
height: 35px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="ridge"><img src="Q1C3399FF.gif" alt=""></td>
<td class="notice">メニューが表示されないときは <a href="">FLASHPLAYER</a> をダウンロードして下さい。
◇◆<a href="">Up loader</a> / <a href="">Link</a>◆◇</td>
<td><img src="Q2C3399FF.gif" alt=""></th>
</tr>
<tr>
<td class="menu" colspan="3"><object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="powerbullet"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">
<param name="movie" value="menu.swf">
<param name="menu" value="true">
<param name="quality" value="best">
<param name="scale" value="exactfit">
<param name="wmode" value="transparent">
<embed name="powerbullet" src="menu.swf"
menu="false" quality="best" scale="exactfit" wmode="transparent"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
<noembed>
<a href="sita.html">Home</a>
<a href="what.html">What?"</a>
(略)
</noembed></th>
</tr>
</object>

</body>
</html>
3   名前： カヅサツ ： 2005/10/08 23:42  ［URL］
●sita.html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<link rel="stylesheet" href="./style.css">
<title></title>
<style type="text/css">
div#main{
width: 700px;
margin: 0px auto;
}
div#contents{
border-width: 1px;
border-style: solid;
border-color: #3399FF;
text-align: center;
height: 1000px;
}
address{
border-width: 1px;
border-style: solid;
border-color: #3399FF;
margin: 2px 0px;
padding: 1em 1em;
font-style: normal;
font-weight: bold;
text-align: center;

}
</style>
</head>
<body>
<div id="main">
<div id="contents">
<h1>無料でFLASH作成！</h1>
</div>
<address>Copyright &copy; 2004-2005 ＠驚く since 2004/9/29</address>
</div>
</body>
</html>
4   名前： カヅサツ ： 2005/10/08 23:42  ［URL］
●style.css：
/* style.css */

html{
/* scrollbar-face-color:#dfefff;
scrollbar-track-color:#dfefff;
scrollbar-arrow-color:#dfefff;
scrollbar-highlight-color:#dfefff;
scrollbar-shadow-color:#dfefff;
scrollbar-3dlight-color:#dfefff;
scrollbar-darkshadow-color:#dfefff;
*/
overflow-y: scroll; /* IEバグ対策 */
}
body{
background-color: #dfefff;
margin: 0px;
padding: 0px;
}
table{
border-collapse: collapse;
}
td,th{
padding: 0px;
}
5   名前： ＠驚く ： 2005/10/08 23:42  ［URL］
ありがとうございました。うまくいきました。
もう一つお尋ねしたいことがあります。
http://usj.to/attopb/support.html
のようにOperaだとborderが周りだけになってしまいます。
これはどうすれば治るのでしょうか？
IEなら普通に表示されるのですが。
6   名前： カヅサツ ： 2005/10/08 23:42  ［URL］
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title></title>
<style type="text/css">
table{
border-collapse: collapse;
}
th{
font-weight: normal;
text-align: left;
}
th,td{
padding: 2px;
}
table,
th,
td{
border-width: 1px;
border-style: outset;
border-color: #000080;
}
tr.line1 th,
tr.line1 td{
background-color: #ffbfdf;
}
tr.line2 th,
tr.line2 td{
background-color: #ffffff;
}

</style>
</head>
<body>
<table>
<tr class="line1">
<th>ダウンロードしよう！</th>
<td>初めての方に、ダウンロード・インストールの方法を載せています。</td>
</tr>
<tr class="line2">
<th>Powerbulletの使い方</th>
<td>Powerbulletの基本的な使い方を私なりにまとめています。</td>
</tr>
<tr class="line1">
<th>FLASHを作ってみよう！</th>
<td>Powerbulletの長所は誰でも簡単に作れるということ。</td>
</tr>
</tr>
</table>
</body>
</html>
7   名前： ＠驚く ： 2005/10/08 23:42  ［URL］
ありがとうございました。
今回、かなり勉強になりました。
ご丁寧に教えていただきありがとうございました。
一覧へ戻る