Internet Explorerで表示がおかしい

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

0   名前： いましょー ： 2005/03/31 21:18   ［URL］
こんばんわ。
ボックスの中に画像を配置すると表示がおかしくなります。
IntenetExplorerのときだけ『Topics』と書いてあってバナーが並んでいる
ところのボックスの横幅が広がってしまいます。
どなたか解決策を知っていませんか？
1   名前： カヅサツ ： 2005/04/01 02:01
pipe.png と hq.png にαチャンネルが使われているみたいですが、IEが対応していません。
img要素の alt属性を適切に付けましょう。
その他、適切な論理要素を使いましょう。スタイルシートをオフにしても、それなりに見られるはずです。

分割して投稿します。

main.html：

<?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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="content-script-type" content="Javascript" />
<title>ABSORPTION DESIGN WORX</title>
<link rel="stylesheet" type="text/css" href="style_cts.css" />
</head>

<body>
<div id="main">
<h1><img src="images/pipe.png" width="420" height="200" alt="ABSORPTION DESIGN WORX"></h1>
<img src="images/hq.png" width="105" height="105" alt="" id="hq">
<div id="topics">
2   名前： カヅサツ ： 2005/04/01 02:02
<h2>Topics!</h2>
<ul>
<li><img src="banner/mog.jpg" width="189" height="25" alt="Mographics Website"></li>
<li><img src="banner/cc.jpg" width="200" height="40" alt="Complex color"></li>
<li><img src="banner/holo.gif" width="88" height="31" alt="Holographix"></li>
<li><img src="banner/kcg.gif" width="88" height="31" alt="KC-GRAPHICS"></li>
<li><img src="banner/serg10.gif" width="88" height="31" alt="SERG10.com"></li>
</ul>
<p>リンクをちょっと増強しました。
<a href="linx.html" target="frame">Linx &gt;&gt;</a></p>
</div>

<div id="updates">
<h2>Updates</h2>
<dl>
<dt>2005.03.31</dt>
<dd>リニューアルしました</dd>
<dt>2005.03.20</dt>
<dd>公開開始</dd>
</dl>
</div>

</div>
</body>
</html>
3   名前： カヅサツ ： 2005/04/01 02:02
style_cts.css：

body{
font-size:x-small;
color:#000000;
background-color:#666610;
margin: 0px;
padding: 0px;
}
h1{
margin: 0px;
z-index: 1;
}
h2{
font-weight: normal;
padding: 4px;
background-color: #33330d;
font-size: 100%;
color:#aaaa33;
text-align: center;
margin: 0px;
}
p{
margin: 0px;
padding: 0px;
line-height: 1.5;
text-indent: 1em;
}
em{
font-style: normal;
font-size: 120%;
font-weight: bold;
}
a:link{
color:#000000
}
a:visited{
color:#000000
}
a:hover {
color:#33330d
}
a:active {
color:#33330d
}
a:link img,
a:visited img{
border-width: 0px;
}

div#main{
width: 422px;
height: 406px;
}
div#topics,
div#updates{
border-width: 1px;
border-style: solid;
border-color: #33330d;
height: 200px;
overflow: auto;
}
div#topics{
margin: 0px 0px 0px 5px;
width: 290px;
float: left;
}
div#topics ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
div#topics li{
display: inline;
}
img#hq{
position: absolute;
top: 190px;
left: 205px;
}
div#updates{
margin: 0px 5px 0px 0px;
width: 100px;
float: right;
}
div#updates dl{
margin: 5px;
}
div#updates dd{
margin: 2px 0px 10px 0px;
}
4   名前： いましょー ： 2005/04/01 14:46
今回もタグまで記述していただいてありがとうございます。
勉強させていただきます。
一覧へ戻る