マンガでよめる痔のこと・薬のこと

ただいま、IEとFirefoxで動作確認をしております。
IEでは問題なく表示されるのですが、Firefoxで確認した場合、ボックスの下部のボーダーが消えてしまいます。

このとき、文字を大きくするとボーダーが表示されます。
また、文字を小さくすると、文字の大きさによっては表示される場合と表示されない場合とがあります。
こちらを回避する方法はあるのでしょうか?

不必要と思われる部分は端折っていますが、
html及びcssは下記の通りです。


///////////////////////////////////////////

<div id="aaa">
<div id="left">あああ</div>
<div id="right">あああ</div>
</div>

///////////////////////////////////////////
#aaa{
background-color: #ffffff;
border: 1px solid #000000;
width: 498px;
zoom:100%;
overflow:auto;
}
* html #aaa{
width: 500px;
overflow: visible;
height:1px;
}
#left{
float:left;
}
#right{
float:left;
}
///////////////////////////////////////////

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

A 回答 (2件)

>floatすると指定した背景が消えたり、高さが得られなかったりする



float指定した要素の中の画像は、 まさか background-image じゃないですよね・・・。

#aaa, #left, #right, これらの詳細(全部)と、これらを指定している要素の中身がわからないので、何とも言えないですが、overflow を指定してらっしゃるところを見ると、block要素か置換要素なのでしょうね。もしくは window そのものの幅を 498px以下と設定して書いてらっしゃるのでしょうか。なんにせよ、中身の幅は 498px以上、つまりblock要素か置換要素だろうと推測しております。

floatは、各ブラウザのバグが種々ありますが、構成がわかりませんので、具体的なコメント出来かねます。例としましては、位置がずれる、マージンが無視される、文字が消える、空白が生じる、etc...条件次第で色々ありますので、もう少しソースを明示していただかないと判りません。

それと、#left,#right と cssに指定なさってらっしゃいますが、両方とも float: left; 指定ですね。中身が同じというのは何か意味があるのでしょうか・・・。他にも指定してらして、割愛なさっただけなら読み捨てて下さい。

>>IEでは高さを1pxとしても何故か高さが得られる
IEは拡大解釈してくれちゃうというやっかいな部分があります。文書型宣言にもよります。そのあたりも、バグもありますし、やっかいです。そのため ハック技も色々ありますね。* html body ----は IE6のハックですし。

>>謎ばかりでcssは難しいですね・・・。
css自体には 謎は余りないと思います。謎なのは、各ブラウザの挙動の違いです。準拠を謳っていますが、完全対応は日暮れて道遠しの感があります。モダンブラウザは比較的対応してますけれど、全部いっぺんに完全対応してしまうと、今度は、サイト側の一斉書き直しが大変かもしれません(笑)
    • good
    • 0

興味があったので、試してみました。

当方のpcではIE6,IE7,Firefox2.0.0.11,Opera7,Opera9,safari3.0.3(win) どれも表示されます。

ver.違いでしょうか?

> * html #aaa
これはIEを意識なさってらっしゃるのだと推測しますが、ここの height: 1px; が理解不能です、すみません。ハックは余り詳しくなくて。ただ・・・もしやこれのせいとかは考えられませんか?
また、zoom: 100%; を指定なさってらっしゃいますが、img か object? をお使いだと思います。それの位置がずれているとか、かぶってしまっているとかありませんか。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
確かにimgは使っていますね。それが原因でしょうか?
何故かFirefox2.0では表示されませんでした・・・。

////////////////////////////
#aaa{
zoom:100%;
overflow:auto;
}
* html #aaa{
width: 500px;
overflow: visible;
height:1px;
}
////////////////////////////
の部分はfloatすると指定した背景が消えたり、高さが得られなかったりするため、それを解消するためのcssの記述です。
これを書かないとFirefoxでは背景の高さが得られずずれてしまいます。
IEでは高さを1pxとしても何故か高さが得られるんですよね・・・。

謎ばかりでcssは難しいですね・・・。

お礼日時:2007/12/12 10:33

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

このQ&Aと関連する良く見られている質問

Qfirefoxのみテーブルのborderが消える

firefoxのみテーブルの上下のborderの一部が消えてしまいます。
ウィンドウのサイズを変えると消える位置が変わります。
消えないための方法はありますか?


【CSS】
table.aaa{
width:750px;
border-top:1px solid #333;
border-bottom:1px solid #333;
border-collapse:separate;
border-spacing:0;
text-align:center;
margin-top:30px;
}

td.bbb, td.ccc{
padding:30px 30px;
}

td.ccc{
width:100px;
background:#000;
color:#fff;
}

ul{
width:750px;
margin-left: -23px;
overflow:hidden;
}

ul li {
display: inline;
width: 200px;
margin-left: 30px;
float: left;
}

ul li img {
display: block;
border: 1px solid #555;
}

【HTML】
<table class="aaa">
<tr>
<td class="ccc">テスト1</td>
<td class="bbb">※※※※※※※※※※</td>
</tr>
</table>
<ul>
<li><a href="xxx.html#w1"><img src="sample.jpg" width="200" height="150" ></li>
<li><a href="xxx.html#w2"><img src="sample.jpg" width="200" height="150" ></li>
<li><a href="xxx.html#w3"><img src="sample.jpg" width="200" height="150" ></li>
</ul>
<ul>
<li><a href="xxx.html#w4"><img src="sample.jpg" width="200" height="150" ></li>
</ul>

<table~…~</ul>まで10個ほど繰り返す。

firefoxのみテーブルの上下のborderの一部が消えてしまいます。
ウィンドウのサイズを変えると消える位置が変わります。
消えないための方法はありますか?


【CSS】
table.aaa{
width:750px;
border-top:1px solid #333;
border-bottom:1px solid #333;
border-collapse:separate;
border-spacing:0;
text-align:center;
margin-top:30px;
}

td.bbb, td.ccc{
padding:30px 30px;
}

td.ccc{
width:100px;
background:#000;
color:#fff;
}

ul{
width:750px;
margin-left: -23px;
overflow:hidden;
}

ul li {
d...続きを読む

Aベストアンサー

試しに、質問で提示されたソースもボーダーは切れますか?

実際のソースや環境をみればすぐにわかりそうですが、
マイナスマージンやtable-layout:fixedやvisibility:hidden、インライン要素の重なりによるものなど、
ボーダーが消える事象の原因は考えられる可能性が多くあります。

>----------------------
>td.bbb, td.ccc{
>padding:30px;
>}
>↓↓変更↓↓
>td.bbb, td.ccc{
>padding:30px;
>margin:auto;
>}
>----------------------

tdはmarginは必要ないです。


>ul li img {
>border:1px solid #555;
>margin: auto;
>padding: auto;
>}
----------------------

>このような感じで、ということでしょうか?

imgはサイズ通りか無指定でよさそうです。
インラインですしね。

margin、paddingが必須なのは主にブロック要素です。

>あと、
>html→UTF8
>css→Shift_JIS
>なのですが、これは関係ありますか?

ボーダーに関係あるかどうかはわかりませんが、
統一するほうがいいと思います。
メタだけでなくファイルの保存エンコードも変更が必要です。

試しに、質問で提示されたソースもボーダーは切れますか?

実際のソースや環境をみればすぐにわかりそうですが、
マイナスマージンやtable-layout:fixedやvisibility:hidden、インライン要素の重なりによるものなど、
ボーダーが消える事象の原因は考えられる可能性が多くあります。

>----------------------
>td.bbb, td.ccc{
>padding:30px;
>}
>↓↓変更↓↓
>td.bbb, td.ccc{
>padding:30px;
>margin:auto;
>}
>----------------------

tdはmarginは必要ないです。


>ul li img {
>border:1px sol...続きを読む

QFireFoxで見るとブラウザの幅によってテーブルの枠線が消える

FireFoxで表示するときにブラウザの幅によったり出たり消えたりします(上と左の線)。
柔軟に変化できるように結構苦労して書いたのですが、ここに来て挫折しそうです、どなたか解決策を下さい。
赤の枠線です。
ソースの↓確かこのあたりが消えたり出たりします
<!--▼中右全体枠-->色#990000

文字数オーバーなため.txtと.htmlのURLを
txt
http://tubamesound.uijin.com/index.txt

html
http://tubamesound.uijin.com/index.html

よろしくお願いします。

Aベストアンサー

<!--▼インフォメーションボ-ド-->
<table width="100%" height="100%" cellspacing="0" cellpadding="0" style="border:solid 1px #000099;">

上記のテーブルの、widthとheightを100%より少ない値にすれば、ウィンドウサイズを拡大・縮小してもこの赤枠の線は消えない様になります。
例えば、width="99%" height="99%" とするだけでも解消はされました。

原因は、高さの相対関係の計算が親子で矛盾してしまっているからでしょう。IEはとにかく何かと”緩い”ので適当に表示してしまうのですが、Firefox等はシビアな結果を返してきますのでIEで何となく上手く行く様にという作成の仕方はできるだけ避けて、きちんと構造とスタイルにエラーや矛盾がないかを確認しながら構築して行く方が宜しいでしょう。

ただし、このHTML(http://tubamesound.uijin.com/index.html)にはかなり文法上の間違いが多いです。文法チェッカーにかけると、致命的エラーが20個ぐらい列挙されてしまいます。
中でも、

・テーブルのセルの開始タグと閉じタグが合っていない(Line84~137にかけて数カ所)。
・同一タグ内でSTYLE属性の指定が重複している(<td width="1%" height="1%" style="border:solid 1px #000099;" style="border:solid 1px #000099;">)。
・このDTD宣言(<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">)では記述できない空要素タグの閉じ方をしている(<link rel="stylesheet" type="text/css" href="http://img.shinobi.jp/tadaima/tdftad.css" />)。
・属性値の書き方が正しくない(<img>のwidthやheightを"130px""50px"という様に記述している。pxは指定できない。)

あたりは今のうちに文法チェッカーにかけてコードをよく見直して、エラーを正しておく事をお奨めします。コンテンツが沢山入ってしまってからではますます修正がややこしいことになると思いますので。

<!--▼インフォメーションボ-ド-->
<table width="100%" height="100%" cellspacing="0" cellpadding="0" style="border:solid 1px #000099;">

上記のテーブルの、widthとheightを100%より少ない値にすれば、ウィンドウサイズを拡大・縮小してもこの赤枠の線は消えない様になります。
例えば、width="99%" height="99%" とするだけでも解消はされました。

原因は、高さの相対関係の計算が親子で矛盾してしまっているからでしょう。IEはとにかく何かと”緩い”ので適当に表示してしまうのですが、Firefox等は...続きを読む

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qブラウザで表示されている罫線が印刷できないのは?

例えば、JRの時刻表ページ(http://www.jreast-timetable.jp/0806/timetable/tt1039/1039010.html)みたいにブラウザ上(モニタ上?)では表示されている罫線が印刷できないのはどうしてでしょうか?スタイルシート(CSS)などで設定されているのでしょうか?
同じようなことができるWebページを作りたいと思っています。ご存知の方がいらっしゃったら教えてください。

Aベストアンサー

>罫線が印刷できないのはどうしてでしょうか?
よくわかりません。No.1さんのやり方で印刷できましたね。

>スタイルシート(CSS)などで設定されているのでしょうか?
このページに関していうとそれは違うと思います。
ソースを確認すると、CSS指定が1つしかありません。
<link rel="stylesheet" type="text/css" href="../../../css/default.css">
最近は、CSSファイルは"表示用"と"印刷用"の2つを使用します。
例えば、
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen,tv">
<link rel="stylesheet" type="text/css" href="css/style-print.css" media="print">
この様に『media="screen,tv">表示用』と『media="print">印刷用』

ですから、故意に罫線を消す設定にしてるわけでは無いようですね^^

>罫線が印刷できないのはどうしてでしょうか?
よくわかりません。No.1さんのやり方で印刷できましたね。

>スタイルシート(CSS)などで設定されているのでしょうか?
このページに関していうとそれは違うと思います。
ソースを確認すると、CSS指定が1つしかありません。
<link rel="stylesheet" type="text/css" href="../../../css/default.css">
最近は、CSSファイルは"表示用"と"印刷用"の2つを使用します。
例えば、
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen...続きを読む

Qページの一部が消える印刷プレビューの原因について

ご質問です。
当方、実務経験の浅いwebデザイナー兼コーダーです。
仕事でコーポレートサイトを作成したのですが、htmlファイルの納品後に「印刷にも対応できるようにしてほしい」とクライアントからの要望を頂きました。

フルcssで作成したサイトを確認するも社内のWinXPのIE7・WinVistaIE7共に特定の倍率で「ページのある一部」が印刷プレビューに映らない(印刷しても、そこだけ白い・そこだけスペースが空いている)という現象が起きてしまいました。
(念のため・・クライアントからは最低IE7で印刷できればいい、と言われています)

私の確認では倍率70~75%で「ページのある一部」が表示できなくなり、クライアントの環境(WinXP IE7)では縮小して全体を印刷する、80%、60%の3つで「ページのある一部」が表示できないとのことです。
これはいったい何が原因となっているのでしょうか。

印刷用のcssにzoom指定で修正はできそうなのですが、何より原因がわからないので気になります。

プリンターの問題なのか、ブラウザによるものなのか・・
はたまたコーディングが悪いのか・・。

説明が悪いので伝わりにくく申し訳ないのですが、クライアントにうまく説明するためにも心当たりがある方のご意見を頂きたいです。
宜しくお願いします。

ご質問です。
当方、実務経験の浅いwebデザイナー兼コーダーです。
仕事でコーポレートサイトを作成したのですが、htmlファイルの納品後に「印刷にも対応できるようにしてほしい」とクライアントからの要望を頂きました。

フルcssで作成したサイトを確認するも社内のWinXPのIE7・WinVistaIE7共に特定の倍率で「ページのある一部」が印刷プレビューに映らない(印刷しても、そこだけ白い・そこだけスペースが空いている)という現象が起きてしまいました。
(念のため・・クライアントからは最低IE7で印刷で...続きを読む

Aベストアンサー

結構日数が経っているのでもう解決済みかもしれませんが…
私も一度その現象に出くわしたことがあります。
その時はoverflow:hidden;を消せば直りましたが、どうでしょうか。
もし解決済みでしたら、どうしてそうなったのか、解決方法はあったのかよろしければ教えて下さい。

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む


人気Q&Aランキング