YouTubeのembedを無くしてXHTMLでvalidにする方法

変更前

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/ xxx"></param>
<param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/xxx " type="application/x-shockwave-flash" wmode="transparent"width="320" height="265"></embed></object>

 

変更後
<object data="http://www.youtube.com/xxx
" type="application/x-shockwave-flash" width="320" height="265">
<param name="movie" value="http://www.youtube.com/xxx
" /><param name="wmode" value="transparent" /></object>

border-collapse:collapse;を指定したtableが左にズレるバグ

FireFoxでサイトを確認したとき、border-collapse:collapse; が指定されたtableが親要素から左に1pxずれるバグがありました。

原因がイマイチ分かりませんが、おそらくmozillaのバグなんでしょうね。

ここにも載ってました。

http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=4246

しかも解決済みだということですが、いまだに直らないってことは解決していないのでしょうか？？

それともこちらのマークアップにミスが！？

こんな構造になっていようが、

<div>

<div></div>

<table></table>

</div>

<div></div>

<table></table>
にしようが、ずれるもんはずれるんです。

結局、ボーダーをtableに指定しないで、tableをdivで囲ってあげてそのdivにボーダー指定するか、

FireFoxだけ、border-collapse:collapse; を指定しないかで解決したんですけどね。

うーん。。

FireFoxで画像置換したリンクのアウトラインが画面左に伸びる

overflow:hidden;の指定。

また、macIE5のバグ回避のため、
/*\*//*/
li.a{overflow:visible;}
/**/
とする。

liをdisplay:block;で扱う場合のIEのバグ

ナビゲーション、メニューなどのリストの作成を、liをブロック要素として並べて使う場合に、IEでは個別のliブロックの下に変な隙間が入ってしまう件について。

単純にそのブロックに横幅を指定してあげれば解決する。

htmlの書き方でliごとに改行しないなどの方法がネット上でいくつか見られたが解決に至らなかった。
別の方法として、ulに対してline-height:0;とし、liにline-height:auto;とする方法も見つかったがコレも解決にいたらず。

というわけで、今回のIEのバグは横幅指定で解決しました。

FireFox3のフルページズームに関するバグ？

親ボックス内3カラムの子ボックスをフロートで配置したレイアウトの場合に、FireFox3のフルページズームの縮小を行うと3カラム目のボックスが落ちる現象を確認。

原因をネットで探してみた中で、解決に一番近い情報が確認できたサイトが、Firefox 3 のフルページズーム使用時はスクリーン上でのピクセル量とCSS上でのピクセル量 なのだが・・・・

・親ボックスの横幅に対して、3つの子ボックスそれぞれにも横幅が指定され、合計で親ボックスの全幅となる。
・float:left; float:left; float:right; で配置。
・フルページズーム機能の縮小の場合のみ、3カラム目が下に落ちる。

とりあえず、ボックスのカラム落ちを回避した方法は・・・

子ボックスの幅をどれかひとつ数ピクセル縮める。

カラム落ちする場合の縮小したイメージをよく見ると、どうやら余白やコンテンツ幅のpx指定がうまく効いていないっぽいことでレイアウトが崩れている。
フロートの解除に関するスタイル指定のミスではなかったので・・・・

これでいいのだろうか？？

ＩＥでスクロールした分だけborderが消える現象

IE6と7で、floatで配置していたboxのボーダーが、スクロールした分だけ消えていく・・・・

これはfloatで配置しているのが原因なのか、別の原因なのか？


この問題。。。

これは世間で言うところのpeek-a-booバグですね。
解決策は・・・
親のボックスに*height:1%;を指定する。
親のボックスに背景色を指定してあげる。
親のボックスにちゃんと横幅を指定する。

どれでも解決しました。

他にはfloatするboxに含まれる要素にposition:relative;を指定するというのも。

FireFox3のズーム機能で縮小するとレイアウトが崩れる

floatで配置した3カラムデザインのうち、FireFox3のズーム機能を使って（テキストのみのズームではない）一番右のカラムが下に落ちてしまった。

ボックス内の全幅は500pxとして、CSSで150px 200px 150pxと指定していた。
それぞれ、float:left; float:left; float:right;で配置していた。

どうやら縮小するとwidthの解釈がおかしくなるらしい・・・

この問題を解決するために、真ん中のカラムの幅を1px減らして199pxにしてみたら直った。

はたしてこれで問題解決になってるのだろうか？？？