人に聞けない痔の悩み、これでスッキリ >>

HTML+CSSでホームページを制作する際、以下のような構成

上部:メインロゴ
中部:コンテンツ(What's newなど)
下部:メニューバー

で、IE7とFireFoxで表示違いの差が発生してしまいます。
IEだと問題なく表示されるのですが、FireFoxで表示した場合、
・中部のWhat's newが表示されない
・下部メニューバーが上部メインロゴの右側に表示されてしまう
などの表示の問題が発生します。

CSSファイル内のソースが問題だというところまでは分かって
いるのですが、一般的にこういった場合、CSS内でページ全体を
構成するfloatの設定がおかしいのでしょうか?

全体のページ構成を決めるCSSタグでIEでもFireFoxでも全体を
崩さず表示を同じにするようなタグがあればご教示ください。

説明が分かりづらくてすみません・・。
(URLを具体的にお教えできれば良いのですが、、)

お分かりであればお願いいたしますm(_)m

このQ&Aに関連する最新のQ&A

A 回答 (14件中1~10件)

話は一段落ついたようですが・・・



http://www.totec-net.com/ のソースを拝見しました。

cssの問題以前に、abrilさんもおっしゃっているようにhtmlのマークアップがひどいです。

ざっと見ただけでも、

・<h2>の中に<div>がある。
 ⇒h2要素の中には、インライン要素しか含むことはできません。

・同じidがたくさんある。
 ⇒idは1つしか存在してはいけません。複数の場合はidではなくclassを使います。

・<ul>の直下に<li>ではなく<h2>がある。
 ⇒<ul>の直下に<li>を書いて、その中に<h2>を書きます。

・<h3>がないのに<h4>がある。
 ⇒普通では考えられません。もし文字サイズを考えてのことであればスタイルシートで対応します。

という感じです。

以下のサイトなどで、チェックしてみることをお勧めします。

http://www.w3.org/QA/Tools/#validators
└MarkUp Validator <http://validator.w3.org/>
└CSS Validator <http://jigsaw.w3.org/css-validator/>

http://openlab.ring.gr.jp/k16/htmllint/htmllint. …
    • good
    • 0

【回答その5】不具合の原因について&今後の為の補足


通常であれば、「どこがどの様に不適当だったから、この理由によりこの様に修正した」という感じで具体的に指摘するのですが、本件は膨大な量の差し替えが発生した為、総括的な事で終わらせて頂きます。後は、質問者様ご自身で、オリジナルのHTML/CSSと今回の修正版を見比べながら、どこに問題があったのかという事を把握して下さい。

<HTML>
■(最初に申し上げた通り)HTMLのマークアップが滅茶苦茶です。タグの意味と特性を正確に理解していない為と思われます。
・コーディングしたものを必ず文法チェッカーにかける。そうすれば、<ul>の直下に入る子要素は<li>以外は不正であること等はすぐわかります。
・論理構造を考えてマークアップする。どれを見出しとして扱い、どれをリストとして扱うか…きちんと論理構造を把握する事で、適切なマークアップが見えてくる様になり、現状の様にひたすら<div>を入れ子にするという非合理的な構造を整理できます。
※今回の修正版index.htmlも、本当はもっと<div>を少なくして<ul><dl>等で置き換えられるのですが、きりがないので最低限のマークアップ変更に留めています。
■DOCTYPEや<head>内の情報についても、理解を。DOCTYPEに準じたコーディングがなされていない箇所が目立ちます。また、XHTML1.0では「XML宣言をすることが強く求められて」いるので、本来ならばDOCTYPEの前にそれを挿入すべきなのですが、本件はそれを入れないモードで作成されており、CSSのプロパティの解釈がそれがあるとないとでは変わってきてしまいますので、そこは無視しました。それから同様にXHTML1.0では<script>~</script> 内にコメントを書くと「本当にコメントとして扱われる」事がありますので、外部にスクリプトファイルを用意して参照する様にした方が宜しいです。
このあたりもよく把握しておいて下さい。
■コメントタグのテキスト中で”--”を使用してはだめです。そこから先はコメントタグが終了したとみなされ、データとして表示されてしまいます。IEでは無視されてましたが、厳密な解釈をするFirefoxでは表示されてしまっています。間違った書き方ですので以後注意を。
■<img>のalt/width/heightは指定しましょう。

<CSS>
率直に申し上げます。本件を見た限り、CSSの理解度がかなり不足しています。CSSファイルに記述されている各プロパティの意味をあまり(かなり)理解していませんね…?
本件の原因は最初に予告した通り(ある意味想像以上に)1箇所2箇所の単純なCSSの記述ミスではなく、CSSとHTMLのそれぞれの非常に多くの要素が「正しくない」状態であった為に、相互に影響しあった結果です。

特に致命的だったのは、floatの誤用の多さ。必要のないコンテナブロックにも手当たり次第に設定している為、相互の位置関係がぐちゃぐちゃになっています。
それから、HTML側でのCSSファイルの参照順番もおかしい。共通要素→個別要素の順で、all.css→foot.css→index.cssが妥当。この順番でないと、汎用の筈のリンクのカラー等が正確に反映されません。
あと、NG/気になったことを思いついた限り箇条書きにしておきます。

・idとclassの違いを正しく理解して使い分けを。idは同一HTMLファイル内では「一度だけ」登場する要素。何でもかんでもidにしてはだめ。
・「親子関係」「継承」という基本中の基本の概念を理解していない。その為、記述が矛盾&重複だらけに。
・不正な書き方をしている箇所が見受けられる。例えばフォント・ファミリー名の一部だけコーテーションで囲んでいない、そのid/classが適用されるタグに存在し得ないプロパティを指定している、等。
・初期値をわざわざ何度も指定していたり(height: auto、page-break-~: auto、等)、特に必要のないプロパティをいたずらに設定している。
・プロパティをまとめて書いていない(border、background、paddingあたりが顕著)。それによって無駄に記述が長くなっており、しかもわかりにくい。
・大文字なら大文字、小文字なら小文字、プロパティを並べる順番等、書き方の統一を。把握と共有がしづらく、一括置換等の妨げになる。

提供されたURLを見る限り、質問者様は企業の商用サイトの制作に携わっていらっしゃる、プロの方と思われます。
引き受けた以上は責任を持って回答を…と思い、結果かなりの労力を費やして検証と修正を行った者として言わせて頂ければ、この様にHTMLもCSSも理解度がかなり不足している状態というのは、非常に問題がありますよ…必死になって勉強して下さい。

最後に不本意ながら長文の分割連続投稿となってしまった事を、皆様にお詫び申し上げます。
    • good
    • 0
この回答へのお礼

abrilさん、

回答、拝読いたしました。
ご親切にソースコードも詳細まで書いていただき、
本当にどうもありがとうございました。
ここまでして頂いて、何と御礼をしていいのやら・・、といった感じです。。
頂いた内容は早速確認してみます。

今回の件につきまして、重ねて御礼申し上げます。

お礼日時:2008/03/11 03:11

【回答その4】"index.css"


<ここから>---------------------------------------------------------
/*TOTEC Main HP style-Index*/
@charset "UTF-8";

/*Index------------------------------*/
/*mainframe------------------------------*/
#mainframe {
width: 615px;
margin: 10px 0;
}

#frame_vi {
width: 615px;
height: 200px;
}

/*frame-contents------------------------------*/
#frame-contents {
display: inline-block;
width: 100%;
margin-top: 10px;
_margin-bottom: -10px;
}
/* hack for IE7 */
*:first-child+html #frame-contents {
margin-bottom: -10px;
}
#frame-contents:after {
content: "";
display: block;
clear: both;
}

#index-comment {
width: 553px;
margin-bottom: 10px;
padding: 0 30px 10px 30px;
line-height: 16px;
text-align: left;
border-bottom: solid 1px #3366cc;
font-size: 13px;
color: #666666;
}

/*frame-l------------------------------*/
#frame-l {
width: 290px;
float: right;
line-height: 16px;
font-size: 12px;
color: #666666;
}

h2.topics-title {
margin: 0;
padding: 0;
line-height: 0;
}

ul.topics-frame {
width: 278px;
list-style: none;
margin: 0;
padding: 5px 0 5px 10px;
border: 1px solid #336699;
}
ul.topics-frame li {
margin: 0.1em 0;
padding: 0 13px 0 15px;
background-repeat: no-repeat;
background-position: 1px 1px;
}
ul.topics-frame li.topics-ao {
background-image: url(../img_all/aicon-ao.gif);
}
ul.topics-frame li.topics-or {
background-image: url(../img_all/aicon-or.gif);
}

/*navi------------------------------*/
#frame-navi {
width: 310px;
margin-bottom: 20px;
}

/*box-pb-1------------------------------*/
#box-pb-1 {
height:50px;
width: 310px;
margin-bottom: 5px;
}
#pb-1-l {
width: 150px;
height: 50px;
float: left;
}
#pb-1-r {
width: 150px;
height: 50px;
float: right;
}

/*box-pb-2------------------------------*/
#box-pb-2 {
height:50px;
width: 310px;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: solid 3px #3366cc;
}
#pb-2-l {
height:50px;
width: 150px;
float: left;
}
#pb-2-r {
height:50px;
width: 150px;
float: right;
}

/*box-pb-3------------------------------*/
#box-pb-3 {
height: 40px;
width: 310px;
}

/*box-pb-txt------------------------------*/
ul#box-pb-txt {
list-style: none;
margin: 0;
padding: 10px 0;
}
ul#box-pb-txt li {
display: inline;
margin: 0;
padding: 0;
line-height: 16px;
font-size: 12px;
color: #555555;
}

ul#box-pb-txt li a {
display: block;
padding: 4px 20px;
border-bottom: solid 1px #cccccc;
color: #555555;
}
ul#box-pb-txt li a:hover {
border-bottom: solid 1px #66cccc;
background: url(../img_all/arrow_blue.gif) 4px 6px no-repeat;
color: #555555;
}
<ここまで>---------------------------------------------------------
→【回答5(総括)に続く】
    • good
    • 0

【回答その3】"foot.css"


<ここから>---------------------------------------------------------
/*TOTEC Main HP style-Foot*/
@charset "UTF-8";

/*Foot------------------------------*/
/*footer------------------------------*/
#footer {
width: 615px;
padding-top: 10px;
}

/*lownavi-1------------------------------*/
#footer ul#lownavi-1 {
display: inline-block;
list-style: none;
margin: 0;
padding: 0 0 0 7px;
background: #000000;
}
#footer ul#lownavi-1:after {
content: "";
display: block;
clear: both;
}
#footer ul#lownavi-1 li {
display: block;
width: 100px;
float: left;
margin: 0;
padding: 0;
}
#footer ul#lownavi-1 li a {
display: block;
width: 100px;
padding: 5px 0;
text-align: center;
border-bottom: solid 5px #666666;
background: #000000;
color: #ffffff;
font-size: 10px;
}
#footer ul#lownavi-1 li a:hover {
border-bottom: solid 5px #ffffff;
background: #cccccc;
color: #666666;
}

/*lownavi-2------------------------------*/
#footer #lownavi-2 {
display: inline-block;
margin: 0;
padding: 0;
}
#footer #lownavi-2:after {
content: "";
display: block;
clear: both;
}

/*lownavi-2-1------------------------------*/
#footer ul#lownavi-2-1 {
width: 240px;
float: left;
list-style: none;
margin: 0;
padding: 8px 0 0 20px;
}
#footer ul#lownavi-2-1 li {
display: inline;
margin: 0;
padding: 0;
}

/*lownavi-2-2------------------------------*/
#footer ul#lownavi-2-2 {
width: 240px;
float: right;
list-style: none;
margin: 0 0 0 20px;
padding: 8px 0 0 0;
}
#footer ul#lownavi-2-2 li {
display: inline;
margin: 0 0 0 1px;
padding: 0;
}
#footer ul#lownavi-2-2 li img {
vertical-align: middle;
margin-right: 2px;
}

/*foot-copy------------------------------*/
#foot-copy {
margin: 10px 0 0 0;
padding: 7px 0 0 0;
text-align: center;
border-top: solid 1px #666666;
}

#foot-copy p.corp {
margin: 0;
padding: 0;
font-size: 12px;
}
#foot-copy p.copyright {
margin: 7px 0 0 10px;
padding: 0;
color: #666666;
}
<ここまで>---------------------------------------------------------
    • good
    • 0

【回答その2】"all.css"


<ここから>---------------------------------------------------------
/*TOTEC Main HP style-All*/
@charset "Shift_JIS";

body {
margin: 0;
padding: 0;
text-align: center;
background: url(../img_all/screen1.gif) #dddddd;
color: #000000;
font-family: "MS Pゴシック", "Osaka", "ヒラギノ角ゴ Pro W3";
font-size: 10px;
}

a {
text-decoration: none
}
a:link {
color: #6699ff;
}
a:visited {
color: #6699ff;
}
a:active {
color: #cc0000;
}
a:hover {
color: #ff6600;
}

img {
border: none
}

/*wrapper------------------------------*/
#wrapper {
width: 615px;
margin: 0 auto;
padding: 0 25px 20px 25px;
text-align: left;
border: solid 1px #999999;
border-top: none;
background: url(../img_all/pb-gn/head-1.jpg) no-repeat #ffffff;
}

/*header------------------------------*/
#header {
height: 115px;
margin: 0;
padding: 0;
}

#header-vi {
height: 70px;
margin: 0;
padding: 0;
line-height: 0;
}

h1#vi {
float: left;
margin: 0;
padding: 0;
line-height: 0;
}

#header-frame {
width: 190px;
height: 50px;
float: right;
}

ul#hn-link {
width: 188px;
height: 20px;
list-style: none;
margin: 5px 2px 0 0;
padding: 0;
border-bottom: solid 1px #666666;
}
ul#hn-link li {
float: left;
margin: 0 10px 0 0;
padding: 0;
}

ul#hn-link li a {
display: block;
height: 20px;
background-repeat: no-repeat;
}
ul#hn-link li#link-1 a {
width: 33px;
background-image: url(../img_all/pb-home-off.gif);
}
ul#hn-link li#link-2 a {
width: 45px;
background-image: url(../img_all/pb-sitemap-off.gif);
}
ul#hn-link li#link-3 a {
width: 63px;
background-image: url(../img_all/pb-question-off.gif);
}
ul#hn-link li#link-1 a:hover {
background-image: url(../img_all/pb-home-on.gif);
}
ul#hn-link li#link-2 a:hover {
background-image: url(../img_all/pb-sitemap-on.gif);
}
ul#hn-link li#link-3 a:hover {
background-image: url(../img_all/pb-question-on.gif);
}

ul#hn-link li em {
display: none;
}

/*pandust------------------------------*/
#frame-pandust {
color: #000000;
padding-top: 5px;
line-height: 120%;
}

#pandust-1{
display: inline;
letter-spacing: 0.1em;
font-size: 11px;
}

/*globalnavi------------------------------*/
ul#globalnavi {
height: 40px;
list-style: none;
margin: 0;
padding: 0;
line-height: 0;
border-bottom: solid 5px #3366cc;
}
ul#globalnavi li {
float: left;
margin: 0;
padding: 0;
}
<ここまで>---------------------------------------------------------
    • good
    • 0

【回答その1-5】"index.html"(5/5)


<ここから>---------------------------------------------------------
<!-- footer navi -->
<!-- #BeginLibraryItem "/lbi/main-footer.lbi" -->
<div id="footer">
<!-- lownavi-1 -->
<ul id="lownavi-1">
<li><a href="about-1.htm">会社案内</a></li>
<li><a href="http://www.totec-career.com/index.htm">キャリア採用</a></li>
<li><a href="http://www.totec-job.com/index.htm" target="_blank">新卒採用</a></li>
<li><a href="http://www.totec-career.com/job/newjob.htm" target="_blank">急募案件</a></li>
<li><a href="http://www.totec-net.com/recruit_6.htm" target="_blank">お仕事のご紹介</a></li>
<li><a href="#"></a></li>
</ul>

<!-- lownavi-2 -->
<div id="lownavi-2">
<!-- lownavi-2-1 -->
<ul id="lownavi-2-1">
<li>| <a href="index.htm">HOME</a> | </li>
<li><a href="about-1.htm">About Totec</a> | </li>
</ul>

<!-- lownavi-2-2 -->
<ul id="lownavi-2-2">
<li><a href="access.htm"><img src="img_all/arrow_blue_right.gif" alt="リンク→" width="11" height="11" id="foot_arrow1" />お問合わせ</a></li>
<li><a href="sitemap.htm"><img src="img_all/arrow_blue_right.gif" alt="リンク→" width="11" height="11" id="foot_arrow3" />サイトマップ</a></li>
<li><a href="protection.htm"><img src="img_all/arrow_blue_right.gif" alt="リンク→" width="11" height="11" id="foot_arrow2" />個人情報保護方針</a></li>
</ul>
</div>

<!-- foot-copy -->
<div id="foot-copy">
<p class="corp">株式会社トーテック</p>
<p class="copyright">Copyright&copy;2008 TOTEC.CO.LTD All Rights Reserved.</p>
</div>
</div>
<!-- #EndLibraryItem -->
<!-- footer navi / -->
</div>
<!-- wrapper / -->

<!-- <script>(省略) -->
</body>
</html>
<ここまで>---------------------------------------------------------
→【回答2に続く】
    • good
    • 0

【回答その1-4】"index.html"(4/x)


<ここから>---------------------------------------------------------
<!-- navi -->
<div id="frame-navi">
<!-- box-pb -->
<div id="box-pb-1">
<div id="pb-1-l"><a href="http://www.totec-career.com/index.htm"><img src="img/top-pb-1-l-off.jpg" alt="バナー:内容" width="150" height="50" id="Image6" onmouseover="MM_swapImage('Image6','','img/top-pb-1-l-on.jpg',1)" onmouseout="MM_swapImgRestore()" /></a> </div>
<div id="pb-1-r"><a href="intranet.htm"><img src="img/top-pb-1-r-off.jpg" alt="バナー:内容" width="150" height="50" id="Image7" onmouseover="MM_swapImage('Image7','','img/top-pb-1-r-on.jpg',1)" onmouseout="MM_swapImgRestore()" /></a> </div>
</div>

<div id="box-pb-2">
<div id="pb-2-l"><a href="http://www.jobengine.jp/machinery/management/cps … src="img/top-pb-2-l-off.jpg" alt="バナー:内容" width="150" height="50" id="Image8" onmouseover="MM_swapImage('Image8','','img/top-pb-2-l-on.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
<div id="pb-2-r"><a href="link.htm"><img src="img/top-pb-2-r-off.jpg" alt="バナー:内容" width="150" height="50" id="Image9" onmouseover="MM_swapImage('Image9','','img/top-pb-2-r-on.jpg',1)" onmouseout="MM_swapImgRestore()" /></a> </div>
</div>

<div id="box-pb-3"><a href="http://engineer-plaza.dialog.jp/blog/" target="_blank"><img src="img/top-pb-3-off.jpg" alt="バナー:内容" width="310" height="40" id="Image10" onmouseover="MM_swapImage('Image10','','img/top-pb-3-on.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
<!-- box-pb / -->

<!-- box-pb-txt -->
<ul id="box-pb-txt">
<li><a href="about-1.htm">会社案内/社長からのご挨拶~会社概要等</a></li>
<li><a href="service-1-1.htm">企業向けサービス</a></li>
<li><a href="service-2-1.htm">採用に関する問題</a></li>
<li><a href="service-3-1.htm">人材から人財へ/新しい採用のかたち</a></li>
<li><a href="succession.htm">中小企業向けサービス</a></li>
<li><a href="about-5.htm">アクセス・マップ</a></li>
</ul>
<!-- box-pb-txt / -->

<!-- LINK 保留
<div id="link-frame-title">LINK</div>
<div id="link-frame">
<div id="pb-link-1l"><a href="http://www.totec-job.com/3-3_rec_new_flow.htm">< … src="img/sumple.jpg" alt="" id="Image11" onmouseover="MM_swapImage('Image11','','img/sumple.jpg',1)" onmouseout="MM_swapImgRestore()" /></a> </div>
<div id="pb-link-1r"><a href="voiceoftec.htm"><img src="img/sumple.jpg" alt="" id="Image12" onmouseover="MM_swapImage('Image12','','img/sumple.jpg',1)" onmouseout="MM_swapImgRestore()" /></a> </div>
</div>
-->
</div>
<!-- navi / -->
</div>
<!-- frame-contents / -->
</div>
<!-- mainframe / -->
<ここまで>---------------------------------------------------------
→【回答1-5に続く】
    • good
    • 0

【回答その1-3】"index.html"(3/x)


<ここから>---------------------------------------------------------
<!-- frame-topics / jobから-->
<!-- #BeginLibraryItem "/lbi/frame-topics.lbi" -->
<div id="frame-l">
<!-- frame-What's New -->
<h2 class="topics-title"><img src="img/newtopics.gif" alt="トーテック・What's New" width="290" height="16" /></h2>

<ul class="topics-frame">
<li class="topics-or"><a href="index.htm" onclick="MM_openBrWindow('http://engineer-plaza.dialog.jp/blog/2008/02/pos …)">テキストテキストテキストテキストテキスト</a></li>
<li class="topics-or"><a href="index.htm" onclick="MM_openBrWindow('http://www.totec-career.com/interview/vot-nf-top …)">テキストテキストテキストテキストテキスト</a></li>
<li class="topics-ao"><a href="index.htm" onclick="MM_openBrWindow('http://www.totec-net.com/topics/saiyouhonbu.htm' …)">テキストテキストテキストテキストテキスト</a></li>
<li class="topics-or"><a href="index.htm" onclick="MM_openBrWindow('http://www.totec-career.com/job/m-y-08010708.htm …)">テキストテキストテキストテキストテキスト</a></li>
<li class="topics-or"><a href="index.htm" onclick="MM_openBrWindow('http://www.totec-career.com/job/e-y-08010702.htm …)">テキストテキストテキストテキストテキスト</a></li>
<li class="topics-or"><a href="index.htm" onclick="MM_openBrWindow('http://www.totec-career.com/job/e-t-07121002.htm …)">テキストテキストテキストテキストテキスト</a></li>
<li class="topics-or"><a href="index.htm" onclick="MM_openBrWindow('http://www.totec-career.com/job/e-t-07122101.htm …)">テキストテキストテキストテキストテキスト</a></li>
</ul>

<!-- frame-topics -->
<h2 class="topics-title"><img src="img/topics.gif" alt="トーテック・Topics" width="290" height="16" /></h2>

<ul class="topics-frame">
<li class="topics-ao"><a href="index.htm" onclick="MM_openBrWindow('http://engineer-plaza.dialog.jp/blog/2008/02/pos …)">テキストテキストテキストテキストテキスト</a></li>
<li class="topics-ao"><a href="http://www.totec-career.com/topics/20080202-1.ht …テキストテキストテキストテキストテキストテキストテキスト</a> </li>
<li class="topics-ao"><a href="index.htm" onclick="MM_openBrWindow('http://engineer-plaza.dialog.jp/blog/2008/02/pos …)">テキストテキストテキストテキストテキスト</a></li>
<li class="topics-ao"><a href="index.htm" onclick="MM_openBrWindow('http://engineer-plaza.dialog.jp/blog/2008/01/10. …)">テキストテキストテキストテキストテキスト</a></li>
<li class="topics-ao"><a href="index.htm" onclick="MM_openBrWindow('http://engineer-plaza.dialog.jp/blog/2007/11/pos …)">テキストテキストテキストテキストテキスト</a></li>
<li class="topics-ao"><a href="index.htm" onclick="MM_openBrWindow('http://engineer-plaza.dialog.jp/blog/2007/11/pos …)">テキストテキストテキストテキストテキスト</a></li>
</ul>
</div>
<!-- #EndLibraryItem -->
<!-- frame-topics / -->
<ここまで>---------------------------------------------------------
→【回答1-4に続く】
    • good
    • 0

【回答その1-2】"index.html"(2/x)


<ここから>---------------------------------------------------------
<!-- wrapper -->
<div id="wrapper">
<!-- header -->
<div id="header">
<!-- header-vi -->
<div id="header-vi">
<h1 id="vi"><img src="img_all/pb-gn/head-2.jpg" alt="TOTEC 株式会社トーテック 技術系に特化した人材ソリューション・カンパニー" width="415" height="70" /></h1>
<!-- header-frame -->
<div id="header-frame">
<ul id="hn-link">
<li id="link-1"><a href="index.htm"><em>HOME</em></a></li>
<li id="link-2"><a href="sitemap.htm"><em>サイトマップ</em></a></li>
<li id="link-3"><a href="access.htm"><em>お問い合わせ</em></a></li>
</ul>
<!-- pandust -->
<div id="frame-pandust">
<div id="pandust-1">HOME</div>
<!-- <div id="pandust-2">技術者のためのお仕事情報</div> -->
</div>
<!-- pandust /-->
</div>
<!-- header-frame / -->
</div>
<!-- header-vi / -->

<!-- globalnavi --><!-- #BeginLibraryItem "/lbi/main-globalnavi.lbi" -->
<ul id="globalnavi">
<li id="tn1"><a href="about-1.htm"><img src="img_all/pb-gn/pb-1-off.jpg" alt="会社案内" width="122" height="35" id="Image1" onmouseover="MM_swapImage('Image1','','img_all/pb-gn/pb-1-on.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
<li id="tn2"><a href="http://www.totec-career.com/index.htm"><img src="img_all/pb-gn/pb-2-off.jpg" alt="キャリア採用情報" width="122" height="35" id="Image2" onmouseover="MM_swapImage('Image2','','img_all/pb-gn/pb-2-on.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
<li id="tn3"><a href="http://www.totec-job.com/index.htm"><img src="img_all/pb-gn/pb-3-off.jpg" alt="新卒採用情報" width="122" height="35" id="Image3" onmouseover="MM_swapImage('Image3','','img_all/pb-gn/pb-3-on.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
<li id="tn4"><a href="service-1-1.htm"><img src="img_all/pb-gn/pb-4-off.jpg" alt="企業向けサービス" width="122" height="35" id="Image4" onmouseover="MM_swapImage('Image4','','img_all/pb-gn/pb-4-on.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
<li id="tn5"><a href="access.htm"><img src="img_all/pb-gn/pb-5-off.jpg" alt="お問い合せ" width="127" height="35" id="Image5" onmouseover="MM_swapImage('Image5','','img_all/pb-gn/pb-5-on.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
</ul>
<!-- #EndLibraryItem --><!-- globalnavi /-->
</div>
<!-- header /-->

<!-- mainframe -->
<div id="mainframe">
<div id="frame_vi">
<script type="text/JavaScript">
<!--
WrightFlashTag('img/index-img.swf','img-fla','615','200','#ffffff');
// -->
</script>
</div>

<!-- frame-contents -->
<div id="frame-contents">
<div id="index-comment">###テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト###</div>

<ここまで>---------------------------------------------------------
→【回答1-3に続く】
    • good
    • 0

とりあえず回答から。

非常に長くなる為、何回かに分けて投稿します。
また、失礼ながら苦言は山ほど出てきますので、心してお読み下さい。この検証、予想以上に手間暇がかかりましたので…

index.htmlと、参照している3種類のCSS(all.css、foot.css、index.css)を全面的に書き換えてみました。IE7/IE6/Firefox2.0.0.12/Opera9.25 on Windows XPでの表示結果がほぼ同じになる事を確認してあります。

できるだけオリジナルのid/class名やマークアップを変えずに…と思っていたのですが、実際に検証してみると、失礼ですがHTML側のコードにあり得ないマークアップ(<ul>の直下の子要素が<li>ではなく<h2>であったり、<h1>がないのに<h2>で始まっていたり、<h2>の中に<div>等のブロック要素が含まれていたり、同じidが同一ファイル内で繰り返し呼ばれていたり…)が続出して滅茶苦茶でしたので、やむを得ずHTML側を妥当なマークアップに変更したり、それに伴いidだったものをclassに置き換えてプロパティを設定し直したり、という作業が発生した為、構成がかなり変わっていますので、予めご了承下さい。
また、"index.html"に現在表示されていない(コメントタグで隠されているコード)部分に関しては検証していません。CSSの内容も現在アクティブなもののみ記述し、それ以外の部分は全て削除してありますので、それらの部分については復活される際、ご自身で調整・設定し直しをして下さい。
また、前回質問してスルーされてしまったCSSの文字コードの件は、無視してオリジナルのままにしてあります。
それから、前回の回答でお断りした通り、今回は"index.html"のみに着目している為、all.cssとfoot.cssという他カテゴリと共通するCSSに加えられた大幅な修正は、他カテゴリに確実に影響を及ぼしますので、そちらの調整はご自身でお願い致します(特に#headerと#footerの箇所はマークアップ自体が変更される為、HTML側の修正も必須となります)。

【回答その1-1】"index.html"(1/x)
※(省略)と書いたところはコードを短くする為省きましたが、それによりJavaScript関連が無効になっていますので検証される時はオリジナルのコードを入れておいて下さい。

<ここから>---------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta name="Keywords" content="派遣,紹介,紹介予定派遣,登録,人材派遣,転職,正社員,仕事,募集,求人情報,トーテック,TOTEC" />
<meta name="description" content="紹介を目的とした人材派遣会社、株式会社トーテック。電気・電子・機械・情報・IT・化学などの技術系に特化し、一人ひとりに合ったお仕事をご紹介しています。正社員紹介を目的としておりますので、その目的達成の為のプロセスとして人材派遣を位置づけております。人材派遣スタッフとして活躍している方や在職中で転職を考えていらっしゃる方まで、まずはトーテックにご相談ください。" />
<title>株式会社トーテック 会社案内</title>
<link rel="stylesheet" type="text/css" href="css/all.css" />
<link rel="stylesheet" type="text/css" href="css/foot.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/index.js" type="text/javascript"></script>
<script src="js/general.js" type="text/javascript"></script>
<script type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>

<body><!-- <body onload="(省略)"> -->

→【回答その1-2】に続く
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング