- ベストアンサー
Firefox のバグ？ネスト時のレンダリングについて。
Firefox のバグかと思い調べたのですが、調べ方が悪いのか解決策を見出すことができませんでした。 問題ですが、まず以下のHTMLソースをコーディングしました。これを iframe.html として、別のファイルから参照させます。 ■iframe.html の中身 <style type="text/css"> .Link{font-size:10px;color:blue;cursor:hand;} .Title{font-size:14px;color:#000;} .Text{font-size:12px;color:#000;} </style> <table> <tr> <td> <a href="Link1" class="Link"> <div class="Title">text</div> <div class="Text">text</div> </a> </td> <td> <a href="Link2" class="Link"> <div class="Title">text</div> <div class="Text">text</div> </a> </td> </tr> </table> ■別ファイルの中身 <body> <iframe src="iframe.html"></iframe> </body> なぜこういう構造になっているかというと、まず a タグの アンカー機能を子要素に継承させ、その中の a タグにネストされるどの部分をクリックしてもリンク先を同じにしたいからです。 IE,Opera等では問題ないのですが、Windows版 Firefox2 で確認し、何度もリロードしているとたまに、 .Title と .Text が効いてないような表示になります。それも必ず後に記述されている td 側の中身が。 はてな、と思いFirebugでみてみると、以下のようにレンダリングされていました。 <a href="Link2" class="Link"> <div class="Title"><a href="Link2" class="Link">text</a></div> <div class="Text"><a href="Link2" class="Link">text</a></div> </a> この原因がわかりません。 以下のような構造にして、 <div> <div class="Title"><a href="Link2" class="Link">text</a></div> <div class="Text"><a href="Link2" class="Link">text</a></div> </div> CSSを編集すれば解決することなのですが、 Link2 のURLは非常に長く何回もアンカータグを記述するのは避ける必要がありました。 どうかよろしくお願いします。
- funafuna38
- お礼率100% (4/4)
- その他([技術者向] コンピューター)
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
Firefoxの挙動も怪しいけど、 アンカーの中身として許されていない要素を入れているのだから、ブラウザがどう補正するかはわからないで止めておいた方がいいかと思います。 divを止めてspanにしたらどうでしょうか？ <a href="Link2" class="Link"> <span class="Title">text</span> <span class="Text">text</span> </a> 追加スタイル .Link , .Title , .Text{display:block;}
その他の回答 (1)
- Tacosan
- ベストアンサー率23% (3656/15482)
ちと HTML4.01 の DTD を見てみたのですが, DIV要素は A要素の子要素にできないんじゃないでしょうか. つまり, もともと HTML として間違っており, 各ブラウザが勝手に解釈した結果として Firefox だけが期待通りに動いていない, という可能性があります. DIV じゃなくて SPAN にしたらどうなりますか?
お礼
ご回答ありがとうございます。 No1さんへの回答と重複してしまうため内容は割愛しますが、 試してみます。
関連するQ&A
- テーブルの隙間について
WEBのデザインを、本を読みつつ学んでいるのですが テーブルに関して疑問があるので、質問させていただきます。 【cssの中身】 /* ヘッダー */ .head { background-color:#ccc; width:100%; height:70px; margin-left:auto; margin-right:auto; } .head h1 { font-size:14px; font-family:Verdana,Osaka,MS UI Gothic,; color:#000; margin-bottom:2px; } .head td{ vertical-align:middle; } .head1 { width:40px; text-align:right; } .head2 { text-align:left; padding-right: 4px; } .date{ font-size: 12px; color: #666; font-family : Verdana,Osaka,"MS UI Gothic",serif; } /* メニュー */ .menu1 div{ float: left; } .menu{ width: 100%; background-color: #666; font-size: 12px; font-weight: bold; border-top: solid 1px white; } .menu1 div{ width: 80px; border-right: solid 1px white; text-align: center; padding-top: 5px; padding-bottom: 5px; } .menu2{ text-align: right; } .menu2 div{ margin-right: 10px; color: #fff; } .menu1 a{ color: #999; text-decoration: none; } .menu1 a:hover{ color: #fff; } 【ページの中身】 <a name="top"> <table class="head" cellspacing="0"> <tr> <td class="head1"> <img src="icon.jpg" border="0" alt="*" width="35" height="36"> </td> <td class="head2"> <h1>********</h1> </td> </tr> </table> </a> <table class="menu" cellspacing="0"> <tr> <td class="menu1"> <div><a href="link.html">Test</a></div> <div><a href="link.html">Test</a></div> <div><a href="link.html">Test</a></div> <div><a href="link.html">Test</a></div> <div><a href="link.html">Test</a></div> </td> <td class="menu2"> <div>Last update:00.00</div> </td> </table> このような形で、ヘッダーとメニューを作っているのですが、メニューの線とヘッダーとの間に1pxほどの隙間（白い部分）が出来てしまいます。これをなくすことはできないのでしょうか？メニュー部分のテーブルに cellspacing="0"を入れると隙間が無くなると本に書いていたのですが、ほんの少しだけ隙間が残ってしまいます。 宜しくお願いします。
- ベストアンサー
- HTML
- フレーム使用時のメニューバーについて
フレームを使ったホームページを作成しました。 フレームのファイル名をindex.htmlに index.htmlだったファイルをtop.htmlにかえて アップロードしたところ、 メニューバーがきちんと表示されません。 パソコン上で確認するときは問題ないので 理由が分かりません。 どなたか教えてください。 メニューのHTMLは <style type="text/css"><!-- body {background-color:firebrick} div.menutitle {color:white; font-family:'Comic Sans MS'; font-size:40px; font-weight:bold; border-bottom-style:dotted; border-bottom-color:white; margin-bottom:30px} a:link {color:white} a:visited {color:yellow} a {text-decoration:none; font-size:18px; font-weight:bold;} div.menu {font-family:'Arial'; background-color:maroon; padding-left:5px; padding-top:7px; padding-bottom:7px; margin-bottom:10px} --!></style> </head> <body> <div class="menutitle" lang="en">menu</div> <div class="menu"> <a href="top.html" target="main">top</a></div> <div class="menu"> <a href="">gallary</a></div> <div class="menu"> <a href="http://8520.teacup.com/**/bbs" target="main">bbs</a></div> <div class="menu"> <a href="">link</a></div> </body> </html> です。よろしくおねがいします。
- ベストアンサー
- HTML
- スタイルシートでサイト作り
現在サイトをスタイルシートを使って作ってます。 まだまだ本＆辞書片手に勉強中の初心者です。 幅４５０px高さ１００％中央配置のテーブル内に ヘッダー部分に４５０px × １３０pxの画像 その左下にメニューバー 右にコンテンツ を作りたいと思います。 メニューバーは 幅１２８ｐｘ 高さ１００％です。 本を見ながらアレンジして作りました。次の通りです。 /* === サイドバー部分のスタイル === */ .side {width:128px; vertical-align:top; padding:0px; background-color:#999999} .side div {font-size:12px; font-weight:bold; letter-spacing:3px; border-bottom:solid 1px white} .side a {color:#333333; text-decoration:none; display:block; padding-top:5px; padding-bottom:5px; padding-left:13px} .side a:hover {color:ffffff; background-color:#666666} <!--=== サイドバー部分のソース ===--> <td class="side" rowspan="5" valign="top"> <div><a href="link.htm">about</a></div> <div><a href="link.htm">contents</a></div> <div><a href="link.htm">blog</a></div> <div><a href="link.htm">bbs</a></div> <div><a href="link.htm">link</a></div> </td> リンクにふれると色が変わるのが気に入ってます。 この「link」の下にコメントとリンクを入れたいんですが 「拍手」ボタン <form>・・・</form> 「返事はこちら」 というコメント（「こちら」部分がリンク） をセルで囲って、画面下までのばしたいです。 いろいろ試したんですが、新しく作ったセルが横に並んだり <side>の a の影響を受けてしまったりして思ったように出来ません。 どうぞ御指南お願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- リンクの色について
スタイルシート部分を .navi1 a:link, .navi1 a:visited{ display:block; background-image:url(images/1.gif); text-decoration:none; line-height:30px; font-size:12px; text-align:left; height: 30px; padding-left:11px; font-weight: bold; color: #00FF00; } .navi1 a:hover, {text-decoration:none; color:#FFFF00;} .top a:link, .rank a:visited{ color:#379E02; } .top a:hover{ color: #FF0066;} HTML部分を <div class="navi1"><a href="#">テキスト１</a></div> <div class="top"><a href="#">テキスト２</a></div> とした時に、IEでは思ったように表示されるのですが FirefoxやChromeではテキスト１は#00FF00のままマウスを乗せても色が変わらず テキスト２は色が紫になっています。 これをIEと同じ様に表示させるにはどうすればいいのでしょうか？
- ベストアンサー
- HTML
- テーブル内に隙間が。
テーブル内に隙間が。 質問です。CSSとテーブルタグを使用してwebページを作りました。が、 IE,FireFox,Chrome等のブラウザでは添付画像のように隙間が出来ます。 これを無くすにはどうすればいいのでしょうか。 （html/cssの書き直さなくてはならない箇所はどこでしょうか） 高さは左右のセルとも300に合わせているのですが…。 どなたかご教授願います。 <!--ソース --> <style TYPE="text/css"> <!-- td { margin: 0; padding: 0px; } .content_title { display: block; position: relative; padding-left: 0px; width: 100%; height: 40px; color: #ffffff; background-color: #000000;} .content_cell { position: relative; padding-bottom: 0px; width: 100%; height: 260px; padding: 0; } .menu_link { display: block; position: relative; width: 100%; height: 30px; padding-top: 12px; text-align: center; font-size: 11pt; color: #f5f5f5; background-color: #000000; } --> </style> <table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300"> <td rowspan="6" width="72%" bgcolor="#ffffff" height="300" valign="top"> <div class="content_title">あいうえお</div> <div class="content_cell"><img src="img/hikaku.png" width="100%" height="100%" border="0"></div> </td> <td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../about/index.html">cell_1</a> </td> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../flash/index.html">cell_2</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../web/index.html">cell3</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../diy/index.html">cell_4</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../link/index.html">cell_5</a> </td></tr> <tr><td width="28%" align="center" height="150" bgcolor="#000000"> <!-- no contents -->no content </td></tr> </table>
- ベストアンサー
- ホームページ作成ソフト
- (;´Д`A ```間隔を詰めるには...?
今スクリプト勉強しているのですが、↓のようにやってみると、まのびした感じになってしまいます。 それぞれの間隔をくっつけたいのですが、どうしたらいいのでしょうか？ どうか教えてください(m。_。)m オネガイシマス <html> <head> <title></title> <style type="text/css"> <!-- A.link2 { font-size:8pt; color: #ff0000; font-family:Impact,Chicago; padding: 0.1em 0.6em 0.1em 0.6em; background-color:#000000; border-top:1px solid #eeeeee; border-left:1px solid #eeeeee; border-bottom:1px solid #666666; border-right:1px solid #666666; text-decoration:none; } a:hover.link2{ color:#ff0000; background-color:#ffffff; border-top:1px solid #eeeeee; border-left:1px solid #eeeeee; border-bottom:1px solid #666666; border-right:1px solid #666666; text-decoration:none; } --> </style> </head> <body> <center> <TABLE BORDER="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <TR> <TD width="20%" nowrap><a href="aaa.html" class="link2"> AAA </a></TD> <TD width="20%" nowrap><a href="bbb.html" class="link2"> BBB </a></TD> <TD width="20%" nowrap><a href="ccc.html" class="link2"> CCC </a></TD> <TD width="20%" nowrap><a href="ddd.html" class="link2"> DDD </a></TD> <TD width="20%" nowrap><a href="eee.html" class="link2"> EEE </a></TD> </TR> </table> </center> </body> </html>
- 締切済み
- CSS
- 無駄なところ省いてほしいです。
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> <!-- BODY{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } TD{ font-size : 10pt; } a.menu:link { color: #FFFFFF; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FF99CC; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; display: block; height: 25px; } a.menu:visited { color: #FFFFFF; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FF99CC; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; display: block; height: 25px; } a.menu:hover { color: #666666; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FFFFFF; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : ridge ridge ridge ridge; border-color : #FFFFFF #FFFFFF #FFFFFF #FFFFFF; display: block; height: 25px; } a.menu:active { color: #666666; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FFFFFF; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : groove groove groove groove; border-color : #FFFFFF #FFFFFF #FFFFFF #FFFFFF; display: block; height: 25px; } .pagetitle{ color : #FF6699; padding-bottom : 5px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : #FF6699; } .sub1{ color : #FFFFFF; border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; background-color : #FF99CC; } .log{ border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; background-color: #FFFFFF; } HR{ color : #999999; height: 1px; } --> </style> </head> <body bgcolor="#ffffff" background="./top_img/1155290302.gif" text="#666666" link="#666666" vlink="#666666" alink="#666666"> <center> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; FONT-FAMILY: 'Comic Sans MS'" cellspacing="3" cellpadding="0" width="166"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="#666666">Top</font></td> </tr> <tr> <td><a class="menu" href="">Profile</a></td> </tr> <tr> <td><a class="menu" href="">Diary</a></td> </tr> <tr> <td><a class="menu" href="">BBS</a></td> </tr> <tr> <td><a class="menu" href="">Chat</a></td> </tr> <tr> <td><a class="menu" href="">Room</a></td> </tr> <tr> <td><a class="menu" href="">Album</a></td> </tr> <tr> <td><a class="menu" href="">Freepage-1</a></td> </tr> <tr> <td><a class="menu" href="">Freepage-2</a></td> </tr> <tr> <td><a class="menu" href="">Freepage-3</a></td> </tr> <tr> <td><a class="menu" href="">Link</a></td> </tr> <tr> <td><a class="menu" href="">Mailbox</a></td> </tr> </table> </center> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- W-ZERO3（WS003）でセンタリングされない
私はMK-BOARDという掲示板レンタルサービスを利用しているのですが、 その掲示板を閲覧するときにW-ZERO3から見ると[.block]がセンタリングされないのです。PCではIE6，Fire Fox，Chromeなどで表示確認しました。他にもWindows Mobileで動くOpera Mobileで確認したところ[.block]はセンタリングされていました。 これはIE MobileのCSSレンダリングに問題があるのか、若しくはDoctype宣言をしていないことによる後方互換の影響なのか 原因が全くわかりません。 ここにサイトのソースを記述いたします。 ちなみに[.block]などのクラスは掲示板に初めから <div class="block">などと記述されていました(CSS内には元々存在していなかった)のでそれを装飾しました。 ご指南を頂ければ幸いです。 <html lang="ja"> <head> <meta http-equiv="cache-control" content="no-cache"> <title>Guest Book</title> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <style type="text/css"> <!-- *{ margin:0; padding:0; } body{ font-size:82%; background-color:#ffffff; color:#000000; margin-left:auto; margin-right:auto; text-align:center; width:470; } h1{ color:#000000; font-size:82%; } a{ text-decoration: none; } a:hover{ background-color: #CCCCFF; color: #0000FF; } /* ------------------------------ No、返信数 TOPテーブル ------------------------------ */ /* margin= 上、右、下、左 */ .block{ margin:10px 0px 10px 0px; border: dotted 1px #000000; width:300; margin-left:auto; margin-right:auto; text-align:left; } .block hr{display:none;} /* ------------------------------ 最下段ナビゲーション ------------------------------ */ .top{border: dotted 1px #000000;margin-top:10px;} /* ------------------------------ フォーム ------------------------------ */ .topmj{text-align:left;} /* ------------------------------ テーブル第一階層（レス番号、名前、時刻） ------------------------------ */ .p{ background-color: #000000; color:#ff0000; margin-bottom: 8px; margin-top: 8px; } /* ------------------------------ テーブル第二階層(コメント内部） ---------------------------------*/ .bbs{background-color: #FFFFFF;color:#000000;} .bbs a{} .bbs a:hover{background-color:#FFCC33;color:#ff0000;} --></style> </head> <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#ff0000" alink="#00ff00"> <h1 align="center">Page Title</h1><hr> <div class="bgcolor"> <div align="left"> <a href="AAA" accesskey="2">TEXT</a>/<a href="<div class="thread"><a href="TEXT">TEXT</a></div> ">TEXT</a>/<a href="#footer" name="head">▼</a><br> </div> <hr> <div align="left"><div><a href="http://tool-1.net/">フリーページ</a>☆<a href="http://tool-1.net/top30.html">人気サイト30</a>☆<a href="http://tool-1.net/navi/">FPサイトナビ</a></div></div> <hr> <div class="block"> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> </div> <hr> <div align="left"> <a href="AAA" accesskey="3">次へ</a>/<a href="#head" name="footer">▲</a><br>【<a href="AAA">TOP</a>】<br> <a href="AAA">選択</a>/<a href="AAA">説明</a>/<a href="login.cgi?id=marbo">編集</a>/<a href="regist.cgi">新規</a><br> </div> <div class="top"><div class="topmj" align="left"> 500 件中 1～10<br>[<a href="http://mk-board.net/">MK-BOARD</a>] </div></div> </div> </body> </html>
- 締切済み
- レンタルサーバ・ASP
- divでくくった中の要素にa link
以下のdivでくくった中の要素にa link等の カラーの指定をしたいのですが、どのように記述したらよいでしょうか。 div.main { width: 560px; padding-top: 15px; padding-left: 20px; line-height: 130%; } --------------- div指定していないところでは a:link, a:visited { color: #000000; font-size: 12px; line-height: 120%; text-decoration: none; } a:hover { color: #0066CC; text-decoration: underline; } a.navia:link, a:visited { font-size: 8pt; color: #666666; text-decoration:none;} a.navia:hover { color: #FF6633 ; text-decoration:underline } の2つを記述しています。
- ベストアンサー
- HTML
- Firefoxだとズレてしまう
<h1 class="text">タイトル</h1><p class="navi"><a href="#">↑上↑</a></p> h1.text { width:69%; float:left; font-size: 10pt; color:black; background-color:white; border-color:black; border-width:1px 0px 1px 5px; border-style:solid; padding:0px 0px 0px 4px;} .navi { width:29%; float:left; text-align:right; font-size: 10pt; color:black; background-color:white; border-color:black; border-width:1px 1px 1px 0px; border-style:solid; padding:0px 2px 0px 0px;} このようにしたいのですけど、firefoxで見ると表示がズレてしまうので困っています（Explorerでも、ちょっと思ったよりも短くなってしまうけれども、一応表示される）。何かよい方法はないでしょうか。
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。 span確認していませんでしたが、ご指摘いただいたように ネストのルールを無視していることに原因がありそうですね。 確認してみます。