CSSで、リンクに触れると一部ボックスが消えてしまう

質問

http://www.stylish-style.com/gallery/base-temp/2-center-head/index.html
上記のサイトのようなページを作りました。
このページでいうところのIDがrightの部分に、ボックスを入れてあります。
ヘッダーの部分にさらに

<div id="headerBox">
<!-- 名前　始まり -->
<span id="nameBox">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td class="nameTD"><img src="face.jpg" alt="" class="nameImg" /></td>
<td class="nameTD"><font class="nameBoxText">●●<br /></font></td>
</tr>
</tbody>
</table>
</span>
<!-- 名前　終わり -->
<!-- メニュー -->
<span id="mainMenu">
<ul id="menu">
<li id="toppage"><a href="top.html">ホーム</a></li>
</ul>
</span>
<!-- メニュー 　終わり-->
</div>

というボックスを下に入れたとき、既にヘッダーに入れてあった
<a href="top.html"><img src="img/logo.gif" /></a>
というリンク部分にマウスが触れたときだけ（まるでオンマウスで指定したかのように）、leftとrightの下部分がごっそり消えてしまいます。
リンクの指定は、外部からまとめて呼び出しているため、上記のリンクだけ別に指定はしていません。リンク画像に触れたときだけ、leftとrightの下一部だけ消えます。フッターは表示されていて、繰り上げて表示されます。

タグはすごく長いので、すべては表示できませんが、原因にお心あたりのあるかた、よろしくおねがいいたします。

回答No.2

NTJ · ベストアンサー

ん～、class指定とid指定が混在しているからじゃないですか？
とりあえずid指定を廃して、全部class指定にすると良好になるかもしれません。

idで指定した場合には、INPUT等のnameもidになったりしますので、だいたい、とんでもない挙動になっちゃいます。
一箇所しか使わない場合でもclass指定だけに押えたほうが、結果、混乱が減るかと思います。

・・・けど・・・
たぶん、参考にしたサイトの質が悪かったのではないかと思います。
例題のような矩形構造なら、素直にTABLEエレメントを使ったほうが、遥かに綺麗で解りやすいレイアウトが出来ます。
なまじ、CSS等の技巧に走ろうとすると、質問者さんが直面したような「変な問題」に遭遇してしまう結果になります。

・・・まぁ、#1さんの予測あたりが、正解っぽいですけどねー。
たぶん、A:hover{} 辺りとかが、怪しそう。

回答No.3

partita

>タグはすごく長いので

タグを少しずつ削っていって、どこまでその現象が続くのか、いつその現象がなくなるのか、地道に頑張るのも一法。

あと、spanの中にtableやulを入れるのはよくないです。XHTMLなのにfontタグを使っているし、記述に矛盾が多いです。

私もa:hoverのところに原因があると推測します。あと、top、bottomなどのposition関連。

回答No.1

noname#19206

<table cellspacing="0" cellpadding="0" border="0" width="100%">
上記テーブルタグに指定された width などは CSS で指定すべきです。

それと画像が消える件ですが、CSS を正しく書いても複合的な要因で表示に問題の起こることがあります。
とりあえず最低限、上記ソースで指定されている class と id の値を全て提示してください。
headerBox,nameTD,nameBoxText,nameImg,mainMenu,menu,toppage など…。
それと表示を行ったブラウザが何であるかを書いてください。

ちなみにここからは私の予測ですが、CSS のどこかに position:ralative; を指定していないでしょうか？