リストタグとリンクと改行について

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

0   名前： ふみお ： 2007/07/10（火） 01:16  ID:.47glzR7 sub-sG
　リスト要素にリンクを張ると、ＩＥで意図しない改行が表示されました。
　この改行が発生しない様にしたいのですが、原因が特定出来ません。
　ご教授お願いします。

【サンプルの提示】

　ページのソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



<html lang=ja>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="menu.js"></script>
<title>のーと</title>
</head>

<body>
<div id="background">
<div id="head">
</div>
<div id="menu">
<a href="home.html" onMouseOver="On('home')" onMouseOut="Off('home')"><img src="img/home_off.png" style="border:0; position:absolute; left:0px;" name="home" alt="案内"></a>
<a href="image.html" onMouseOver="On('image')" onMouseOut="Off('image')"><img src="img/image_off.png" style="border:0; position:absolute; left:160px;" name="image" alt="画像"></a>
<a href="text.html" onMouseOver="On('text')" onMouseOut="Off('text')"><img src="img/text_off.png" style="border:0; position:absolute; left:320px;" name="text" alt="文章"></a>
<a href="bbs.html" onMouseOver="On('bbs')" onMouseOut="Off('bbs')"><img src="img/bbs_off.png" style="border:0; position:absolute; left:480px;" name="bbs" alt="掲示板"></a>
<img src="img/link_on.png" style="border:0; position:absolute; left:640px;" name="link" alt="出口">

</div>
<div id="body">
<div id="left">
<div class="menu">
<ul>
<li><a href="link_interactive.html" target="main">　相互</a></li>
<li><a href="link_one_way.html" target="main">　片道</a></li>
<li><a href="link_other.html" target="main">　その他</a></li>

</ul>
</div>
</div>
<div id="right">
<div class="main">
<iframe frameborder="0" class="iframe" src="link_top.html" title="main" name="main"></iframe>
</div>
</div>

</div>
</div>
</body>

</html>



　スタイルシート

/* style_sheet 22:33 2007/07/07 */

body {
text-align : left;
margin : 0px;
padding : 0px;
color : #000000;
font-family : "ＭＳ Ｐ明朝";
line-height : 150%;
background-color : #ffffff;
overflow : auto;
}

img {
border : 0;
}

a {
text-decoration : none;
color : #000000;
}

a:link {
color : #888888;
}

a:visited {
color : #444444;
}

a:hover {
background-color : #cccccc;
color : #000000;
}

a:active {
background-color : #cccccc;
color : #000000;
}

font {
margin : 0px;
padding : 0px;
font-size : 12px;
}

h1 {
margin : 0px;
margin-left : 20px;
padding : 0px;
font-size : 14px;
font-weight : bold;
}

h2 {
margin : 0px;
margin-left : 20px;
padding : 0px;
font-size : 12px;
font-weight : bold;
}

hr {
width : 580px;
}

ul {
margin : 0px;
margin-left : 10px;
padding : 0px;
font-size : 12px;
list-style-type : none;
}

ol {
margin : 0px;
margin-left : 40px;
padding : 0px;
font-size : 12px;
list-style-type : cjk-ideographic;
}

li {
margin : 0px;
padding : 0px;
font-size : 12px;
}

p {
margin : 0px;
padding : 0px;
font-size : 12px;
}

div#background {
width : 800px;
height : 575px;
margin : 0px auto;
background-color : #000000;
}

div#head {
width : 800px;
height : 80px;
position : relative;
top : 0px;
left : 0px;
border-width : 1px 1px 0px;
border-color : #000000;
border-style : solid;
background-color : #ffffff;
background-image : url(img/top.png);
background-repeat : no-repeat;
background-position : 0px 0px;
overflow : hidden;
}

div#menu {
width : 800px;
height : 20px;
position : relative;
top : 0px;
left : 0px;
border-width : 0px 1px 0px;
border-color : #000000;
border-style : solid;
background-color : #ffffff;
overflow : hidden;
}

div#body {
width : 800px;
height : 475px;
position : relative;
top : 0px;
left : 0px;
border-width : 0px 1px 1px;
border-color : #000000;
border-style : solid;
background-color : #ffffff;
background-image : url(img/body.png);
background-repeat : no-repeat;
background-position : 0px -5px;
overflow : hidden;
}

div#left {
width : 180px;
height : 475px;
position : relative;
top : 0px;
left : 0px;
overflow : hidden;
}

div#right {
width : 620px;
height : 475px;
position : relative;
top : -475px;
left : 180px;
overflow : hidden;
}

div#bottom {
width : 100%;
height : 100px;
position : absolute;
bottom :0px;
left : 0px;
overflow : hidden;
}

div.menu {
width : 160px;
margin-top : 10px;
margin-left : auto;
margin-right : auto;
border-width : 1px;
border-color : #000000;
border-style : solid;
overflow : hidden;
}

div.menu ul {
margin : 0px;
padding : 0px;
font-size : 12px;
}

div.menu ol {
margin : 0px;
padding : 0px;
font-size : 12px;
}

div.menu li {
margin : 0px;
padding : 0px;
font-size : 12px;
}

div.menu a {
display : block;
}

div.menu a:link {
color : #000000;
}

div.menu a:visited {
color : #000000;
}

div.menu a:hover {
background-color : #eeeeee;
color : #000000;
}

div.menu a:active {
color : #000000;
background-color : #eeeeee;
}

div.main {
width : 600px;
height : 450px;
margin-top : 10px;
margin-left : 5px;
border-width : 1px;
border-color : #000000;
border-style : solid;
overflow : hidden;
}

div.link_box {
width : 580px;
margin : 10px auto;
overflow :hidden;
}

div.link_box img {
margin : 3px 10px;
border : 0;
float : left;
vertical-align : middle;
}

div.word {
width : 580px;
height : 250px;
margin-top : 10px;
margin-left : 10px;
border-width : 1px;
border-color : #000000;
border-style : solid;
overflow : hidden;
}

.iframe {
width : 100%;
height : 100%;
overflow : auto;
}

.clear {
clear : both;
}

【何をしてみたのか】
　</li>の省略。
　リストのスタイルにhidden属性を与える。

【検索用語】
　リスト　リンク　改行
　ieでリストに改行が入るバグ

【備考】
　<a~></a>を取り除くと、意図しない改行は発生しません。
1   名前： sonic-boom ： 2007/07/10（火） 01:16  ID:WI7wypVr sub-tS
ここでも読んで勉強して。
http://cssbug.at.infoseek.co.jp/detail/winie/b071.html
あとは自力で頑張ってみて下さい。
2   名前： ふみお ： 2007/07/10（火） 01:16  ID:.47glzR7 sub-sG
＞sonic-boomさん
　有難う御座います。
　原因が解かり、ボーダーを入れ解決する事が出来ました。
　ブロック要素やインライン要素については理解が浅かった為、考えが及びませんでした。この機会にＨＴＭＬの基礎の部分をもう一度勉強し直そうと思います。
　本当に有難う御座いました。
一覧へ戻る