CSS・IEでボーダーを表示したい

解決済

質問者：goomod2
質問日時：2012/04/26 09:55
回答数：1件

お世話になります。
ホームページ構築(CSS)に関する質問です。
よろしくお願いします。

フリーのCSSサンプルサイトより、ソースをいただいて、
ページを作ってみたのですが。
ナビゲーションリストの部分で、
FireFoxでは、各メニューの右側に、仕切りの部分の「線」が、
表示されているのですが、なぜかIEでは表示されません。

まだ理解が足らないのですが、
「#navigation li a」の
「border-right: 1px double#fff;」あたりかなと思い、
線種を変えてみたりと、いろいろしているのですが
変化がありません。
変更すべき点をどうかご教授ください。

以下は実際のソースです。

「index.html」
---------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="common.css" type="text/css" />

<title>テストサイト</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>タイトル「テストサイト」
</h1>
</div>
<div id="navigation">
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="menu2.html">メニュー２</a></li>
<li><a href="menu3.html">メニュー３</a></li>
<li><a href="menu4.html">メニュー４</a></li>
</ul>
</div>
<div id="content">
<p>テストののページです。</p>
<p>上記メニューよりご利用ください。</p>

</div>
<div id="footer">
Copyright テスト著作権, 2012
</div>
</div>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------

common.css
---------------------------------------------------------------------------------------------------------------------------
@charset "UTF-8";

#container
{
margin: 0 auto;
width: 600px;
background:#fff;
}

#header
{
background:#ccc;
padding: 20px;
}

#header h1 { margin: 0;
font-size: 120%;}

#navigation
{
float: left;
width: 600px;
background:#333;
}

#navigation ul
{
margin: 0;
padding: 0;
}

#navigation ul li
{
list-style-type: none;
display: inline;
}

#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color:#fff;
text-decoration: none;
border-right: 1px double#fff;
}

#navigation li a:hover { background:#383; }

#content
{
clear: left;
padding: 20px;
}

#content h2
{
color:#000;
font-size: 160%;
margin: 0 0 .5em;
}

#content h3
{
font-size: 110%;
}

#footer
{
background:#ccc;
text-align: right;
padding: 20px;
height: 1%;
}

--------------------------------------------------------------------------

以上が内容になります。
どうかよろしくお願いします。