![[関西]WEBデザイン 交流会[大阪]](https://logo-imagecluster.img.mixi.jp/photo/comm/94/64/4999464_227s.gif){kind=logo}
初歩的な質問だとは思うのですが……お知恵を拝借下さいませ。
現在、以前テーブルで組んでいたサイトをcssメイン・脱テーブルな組み直し作業をしておりまして、以前、入れ子テーブルで作っていた部分を<DIV>の入れ子構造に直した処、ＩＥでは今までと同じ表示になるのですが、SafariやＮＮでは外側の<DIV>で指定したbackground-colorが反映されません。
ソースは以下の通りです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
<HTML lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE> </TITLE>
<STYLE type="text/css">
<!--
body {
background: #FFFFFF;
margin: 0px;
padding: 0px;
font-size: 12px;
color:#333333;
}
#head{
border-bottom: 3px solid #CC9900;
background: #FA1E1E url(../images/head_back.gif) repeat-x bottom;
margin: 0px;
padding: 0px;
height: 112px;
}
#title{
margin-top: 5px;
margin-left: 5px;
background: #FF0000 url(image/head_logo.gif) no-repeat left bottom;
font-size: 10px;
color: #FFFFFF;
line-height: 1.5em;
width: 750px;
}
#topnavi {
margin-top: 15px;
text-align: right;
}
#topnavi a {
color: #FFFFFF;
text-decoration: none;
}
#topnavi a:hover {
text-decoration: underline;
}
-->
</STYLE>
</HEAD>
<BODY>
<!--ヘッドタイトル -->
<DIV id="head">
<DIV id="title">
<DIV id="topnavi"><A href="../index.html">HOME</A> | <A href="../about/message.html">支配人メッセージ</A> | <A href="../about/index.html">会社概要</A> | <A href="../about/recruit.html">採用情報</A> | <A href="../policy.html">プライバシーポリシー</A> | <A href="../sitemap.html">サイトマップ</A></DIV>
</DIV>
</DIV>
<!--//ヘッドタイトル -->
</BODY>
</HTML>
ちなみに、#headでpadding:5pxを指定し、#titleをmargin:0pxにした場合は、
#headの背景色＆画像はきちんと表示できたのですが、
#titleの背景画像で指定している「ロゴ」の上部分が切れてしまいました(;.;)。
お手数ですが、宜しくお願い致します。
現在、以前テーブルで組んでいたサイトをcssメイン・脱テーブルな組み直し作業をしておりまして、以前、入れ子テーブルで作っていた部分を<DIV>の入れ子構造に直した処、ＩＥでは今までと同じ表示になるのですが、SafariやＮＮでは外側の<DIV>で指定したbackground-colorが反映されません。
ソースは以下の通りです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
<HTML lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE> </TITLE>
<STYLE type="text/css">
<!--
body {
background: #FFFFFF;
margin: 0px;
padding: 0px;
font-size: 12px;
color:#333333;
}
#head{
border-bottom: 3px solid #CC9900;
background: #FA1E1E url(../images/head_back.gif) repeat-x bottom;
margin: 0px;
padding: 0px;
height: 112px;
}
#title{
margin-top: 5px;
margin-left: 5px;
background: #FF0000 url(image/head_logo.gif) no-repeat left bottom;
font-size: 10px;
color: #FFFFFF;
line-height: 1.5em;
width: 750px;
}
#topnavi {
margin-top: 15px;
text-align: right;
}
#topnavi a {
color: #FFFFFF;
text-decoration: none;
}
#topnavi a:hover {
text-decoration: underline;
}
-->
</STYLE>
</HEAD>
<BODY>
<!--ヘッドタイトル -->
<DIV id="head">
<DIV id="title">
<DIV id="topnavi"><A href="../index.html">HOME</A> | <A href="../about/message.html">支配人メッセージ</A> | <A href="../about/index.html">会社概要</A> | <A href="../about/recruit.html">採用情報</A> | <A href="../policy.html">プライバシーポリシー</A> | <A href="../sitemap.html">サイトマップ</A></DIV>
</DIV>
</DIV>
<!--//ヘッドタイトル -->
</BODY>
</HTML>
ちなみに、#headでpadding:5pxを指定し、#titleをmargin:0pxにした場合は、
#headの背景色＆画像はきちんと表示できたのですが、
#titleの背景画像で指定している「ロゴ」の上部分が切れてしまいました(;.;)。
お手数ですが、宜しくお願い致します。
|
|
|
|
|
|
|
|
