CSSファイル内のバグの原因

質問

あるサイトのリニューアル中リンクバナーに指定したレイアウト用のCSSが急に機能しなくなり、原因がわかりません。同じCSSファイルを使用したページで共通したバグがj生じるのでCSSファイルが原因と思いチェックしたのですが、自分では原因を突き止められずにいます。サイトは、 ​http://www.vesta.dti.ne.jp​ にアップロードしています。問題のCSSファイルの対象と思われるソースをコピーしました。宜しくお願いいたします。バグの原因になる要素でご存知のものがあれば教えて下さい。
body{font-family: Arial,sans-serif;color: #333333;line-height: 1.166;margin: 0px;padding: 0px;background: #cccccc;background-color: #cccccc;}
a:link, a:visited{color: #005FA9;text-decoration: none;}
a:hover{text-decoration: underline;}
h1{ font: bold 120% Arial,sans-serif;color: #334d55;margin: 0px;
padding: 0px;}
h2{font: bold 120% Arial,sans-serif;color: #006699;margin: 0px;
padding: 0px;}
h3{font: bold 100% Arial,sans-serif;color: #334d55;margin: 0px;padding: 0px;}
h4{ font: 100% Arial,sans-serif;color: #333333;margin: 0px;padding: 0px;}
h5{font: 100% Arial,sans-serif; color: #334d55;margin: 0px;padding: 0px;}
form {margin: 0;padding: 0;}label{ font: bold 1em Arial,sans-serif;color: #334d55;}input{font-family: Arial,sans-serif;}
#pagecell1{position:absolute;top: 112px;left: 2%;right:2%;width:85.6%;background-color: #ffffff;}
#tl {position:absolute;top: -1px;left: -1px;margin: 0px;padding: 0px;z-index: 100;}
#tr {position:absolute;top: -1px;right: -1px;margin: 0px;padding: 0px;z-index: 100;}
#masthead{position: absolute;top: 0px;left: 2%;right: 2%;width:85.6%;}
#pageNav{float: right;width:190px;padding: 0px;background-color: #f5f7f7;border-left: 1px solid #cccccc;border-bottom: 1px solid #cccccc;font: small Verdana,sans-serif;}
#content{padding: 0px 10px 0px 0px;margin:0px 190px 0px 0px;
border-right: 1px solid #ccd2d2;}
#siteName{margin: 0px;padding: 16px 0px 8px 0px;color: #ffffff;font-weight: normal;}
#utility{font: 75% Verdana,sans-serif;position: absolute;top: 16px;right: 0px;color: #919999;}
#utility a{color: #ffffff;}
#utility a:hover{text-decoration: underline;}
#pageName{padding: 0px 0px 14px 10px;margin: 0px;border-bottom:1px solid #ccd2d2;}
#pageName h2{font: bold 165% "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";color: #336633;margin:0px;padding: 0px;}
#pageName img{position: absolute;top: 0px;right: 6px;padding: 0px;margin: 0px;}
#globalNav{position: relative;width: 100%;min-width: 640px;height: 32px;color: #cccccc;padding: 0px;margin: 0px;background-image:url(../commonimg/glbnav_background.gif);}
#globalNav img{margin-bottom: -4px;}
#gnl {position: absolute;top: 0px;left:0px;}
#gnr {position: absolute;top: 0px;right:0px;}
#globalLink{position: absolute;top: 6px;height: 22px;min-width: 640px;padding: 0px;margin: 0px;left: 10px;z-index: 100;}
a.glink, a.glink:visited{font-size: small;color: #666666;font-weight: bold;margin: 0px;padding: 2px 5px 4px 5px;border-right: 1px solid #8FB8BC;}
a.glink:hover{background-image:url(../commonimg/glblnav_selected.gif);text-decoration: none;}
.skipLinks {display: none;}
.subglobalNav{position: absolute;top: 84px;left: 0px;/*width: 100%;*/min-width: 640px;height: 20px;padding: 0px 0px 0px 10px;visibility: hidden;color: #ffffff;}
.subglobalNav a:link, .subglobalNav a:visited{ font-size: 80%;color: #ffffcc;}
.subglobalNav a:hover{color: #ffffcc;}
#search{position: absolute;top: 5px;right: 10px;z-index: 101;}
#search input{font-size: 70%;margin: 0px 0px 0px 10px; }
#search a:link, #search a:visited {font-size: 80%;font-weight: bold;}
#search a:hover{margin: 0px;}

回答No.4

outbrave · ベストアンサー

.relatedLinks a:link,a:visited{
display: block;
color:#336666;
}

上の部分ですが、２つに分けて試していただけますか。

.relatedLinks a:link {
display: block;
color:#336666;
}

.relatedLinks a:visited {
display: block;
color:#336666;
}

お礼

outbraveさん！！（@_@!)*********!有り難うございます！！懸案のバグが、ご指摘のとおりソースを２つに分けてみたところ、解消されました！！ここ２週間の苦労が一気にふきとんだかんじです。本当に助かりました。うかれ過ぎてついついワインを開けてしまいました！！ところでこのソースは本来はまとめて記述してはいけないものだったのでしょうか？今回テンプレートを使用して作ったサイトで、ソースを編集している何かのひょうしにこの部分のソースに手が加わってしまったのかもしれません…。
なにはともあれ解決しました。これからまだまだ完成までがんばっていきます。有り難うございました。m(__)m

回答No.5

outbrave

まとめて記述するなら
.relatedLinks a:link, .relatedLinks a:visited {
こうですかね

リンク色をどうされるかわかりませんが、正解は
.relatedLinks a {
display: block;
color:#336666;
}
このような気がします。

お礼

outbraveさん、アドバイスありがとうございました。いろいろと勉強に
なりことが多々あります…。返事遅れてしまい申し訳ありませんでした。サイトもようやく終わりが見えてまいりました。今度は私も質問に回答できるくらいまで精進せねば!!では。

回答No.3

outbrave

メニューが縦に並ぶ原因は

.relatedLinks a:link,a:visited{
display: block;
color: #21536A;
}

display: block; が入っているからではないでしょうか。

お礼

outbraveさん、回答ありがとうございます。.relatedLinks に、display: block; が入っているのは、この部分がインライン要素のテキストで、これをブロック要素にするために必要なのです。問題の文字が縦に崩れてしまうところはCSSのソースだと、#globalNav{position: relative;width: 100%;min-width: 640px;height: 32px;color: #cccccc;padding: 0px;margin: 0px;background-image:url(../commonimg/glbnav_background.gif);}
#globalNav img{margin-bottom: -4px;}
で、『glovalNav』の部分ですが、もしかしてこちらにも.relatedLinks で指定したタグが適用されてしまうことがあるのでしょうか？

回答No.2

yosoho

>（パン教室のページ等）でページ上部のリンクバーの表示

ページが表示できなかったのですが、
CSSで「.subglobalNav」の中に、コメント『/*width: 100%;*/』が適用されてるのですが、
これは影響してないでしょうか？

お礼

yosohoさん、早速のお返事ありがとうございます。私も『/*width: 100%;*/』が原因だとも思ったのですが、違う様です…。削除しても表示が同じだったのです。HPが表示できないとのことでしたが、すみませんURLがまちがっておおりました。『http://www.piccolno.vesta.dti.ne.jp/~piccolno』です。
まだリニューアル途上なのでいろいろ探ってみます。
一人で格闘しているよりもずっと前向きに考える事ができました。ありがとうございました。

回答No.1

outbrave

どこがバグで、どんな表示を期待されているのか、わかりませんが...?

問題と思われる CSS ファイルの必要なさそうな部分から、少しずつ削除していき確認されてはいかがでしょうか。

補足

お返事ありがとうございます。説明不足でした。トップページの表示は問題ないのですが、使用CSSファイルが「emx_nav_right.css」のページ（パン教室のページ等）でページ上部のリンクバーの表示が縦にくずれてしまします。この部分トップページと同じソースの記述にしていますが、トップページは他のCSSファイル「index.css」を使用しています。このファイルをリンクしたページは表示のバグがないのです。宜しくお願いいたします。