CSSとHTMLのページ。IEとFirefoxでデザインが崩れてしまいます；；

解決済

質問者：mrmon
質問日時：2009/03/25 21:02
回答数：1件

Firefoxだと、右上のフォーム部分がバナーの隣に来るのですが
IEだとなぜかフォーム部分が下に来てしまいます。原因と対処法を教えてください。

FirefoxはCSSに厳格だと聞いたのですが、IEが曖昧なためになってしまったのでしょうか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja"><head>
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<link rel=stylesheet type="text/css" href="1.css">
<link rel="shortcut icon" href="favicon.ico">
<title>aaaaa</title>
</head>
<body>
<div class="box">
<div class="top1">
<img src="aaa.jpg" width="468" height="60" alt="バナー">
</div>
<div class="top2">
ああ
<form method="get" action="あああ" style="margin-top:0em; margin-bottom:1em">
<input type="text" name="word" size=40 value=""><input type="submit" value="検索"><input type="hidden" name="line" value="10">
<input type="hidden" name="indi" value="0"><input type="hidden" name="act" value="search"></form>
</div><div class="end"></div>

<div class="bar">
<div class ="menu"><a href="./">HOME</a></div>
<div class ="menu"><a href="about.htm">ABOUT</a></div>
<div class="end"></div></div><div class="end"></div>

<div class="side">
サイド
</div>
<div class="main">
メイン
</div><div class="end"></div>
</div></body>
</html>

以下CSS
@charset "utf-8";
/* ------------------------------
基礎設定
------------------------------ */
body {font-size:0.875em; margin:0; padding:0; line-height:1.4; color:#c0c0c0; background:#000000; background-image: url("back.jpg"); background-repeat: no

-repeat; background-position: 99% 95%; background-attachment:fixed; text-align:center; margin:0 auto 0 auto;}
img {border:0;}
address {font-style:normal;}

/* ------------------------------
ページ枠組み設定
------------------------------ */
.box {width:800; margin:0 auto 0 auto; text-align:left;}
.main {width:80%; float:left; text-align:left; font-size:0.875em;}
.side {width:20%; float:left; text-align:left; font-size:0.875em;}
.top1 {width:50%; float:left; text-align:left; font-size:0.875em;}
.top2 {width:50%; float:left; text-align:right; font-size:0.875em;}
.bar {width:100%; height:41; text-align:center;}

/* ------------------------------
クリアの設定
------------------------------ */
.end {clear:both;}
.end hr {display:none;}

/* ------------------------------
メニューの設定
------------------------------ */
.menu a{display:block; width:96px; color:#c0c0c0; background:url(menu-img/menu1.jpg) no-repeat; height:41px; line-height:43px; text-decoration:none; text-

align:center; font-size:0.9em; font-weight: bold; float:left; font-family:verdana,arial,sans-serif;}

.menu a:hover{color:#e9e9e9; background:url(menu-img/menu2.jpg) no-repeat;}