HTML
[デザイン]->[スタイル]にスタイルを変更できるところがある。これは要するにhtmlを変更せずにスタイルだけ変更することで見た目を変えることができるようになっている。管理画面から変更すると、テンプレートのスタイルシート(styles.css)が変更になる。も…
<style type="text/css"> div#test { border: 1px dotted #999; } </style> .... <div id="test"> <h2>test<h2> <p>テストです。</p> </div> みたいなことをしていたら、IE6で表示するとborderの縦の途中が途切れてしまう。 どうやらバグのようで、 div#test { border: 1px dotted #999; width: 100%; } と width: 100%; を追加す…
IEではselect要素中のoptgroupのデフォルトのスタイルがイタリックになっているが、これをcssで変更しようとしてもできないようだ。 確認したところ、IE6,7,8すべてダメ。参考URL http://hyper-text.org/archives/2007/05/optgroup_css.shtml
jQueryを使用したスライドショーPhotoSlider。元ページは以下。 http://opiefoto.com/articles/photoslider また、設置の説明などは以下が詳しい。 http://ascii.jp/elem/000/000/187/187279/ ただし、こちらの環境では、以下の修正が必要だったのでメモ。 j…
http://d.hatena.ne.jp/kazuokohchi/20091109 で書いたように、fontsizeを変更するにあたってalternate stylesheetを使って変更するstyleswitcher.jsがあるがこれを元にjQuery pluginにしてみたもの。例のIEの問題も回避している。 http://www.miyagino.net/…
http://www.alistapart.com/articles/alternate/ にあるstyleswitcher.jsというjavascriptを元にスタイルの変更を行わせていた。このstyleswitcher.jsではalternate stylesheetで指定したスタイルへの変更を行い、しかもcookieに保存してくれるので、次回表…
DreamWeaverなどで吐き出されるjavascriptを用いずに、jQueryだけでマウスオーバーによる画像表示の変更を行う。 サムネイル画像(XXXX_ex.jpg)にマウスを乗せると表示部分(id: exampleimage)に(XXXX_big.jpg)が表示される。 大きい画像も最初に読み込んでお…
IE7 on Windows XPでUTF-8が文字コードのデフォルトのfont-familyがちょっと変だと気がついた。 font-familyを指定する場合は、 body { font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; } …
CSSファイル(スタイルシート)だけを修正した場合、基本的にはブラウザのリロードを行わないと読み込んでくれない。それを回避する方法。 <link rel="stylesheet" type="text/css" media="screen,print" href="style.css?20090311" /> 同じ理由で、javascriptにも有効かも。</link>
昔作成したhtmlをUTF-8にした場合、IE6, IE7で画面に表示されず真っ白になる場合がある。どうもtitle要素の文字列がnonASCII(日本語など)の場合、場合によっては文字コードの判定が失敗してしまうようだ。 <html lang="ja"> <head> <title>日本語テスト</title> </head></html>
http://www.jp.freebsd.org/www.FreeBSD.org/releases/7.0R/relnotes.html を見ていたら、気が付いたCSS表現。こんなのがあるなんて、恥ずかしながら今まで知らなかった。 <p style="font-variant: small-caps;">FreeBSD is a registered trademark of the FreeBSD Foundation.</p> アルファベットの小…
<meta http-equiv="Refresh" content="0; URL=http://www.miyagino.net/" /> や、 print <</meta>
MODx(0.9.6.1)をhttp://modxcms.com/forums/index.php/topic,4544.0.htmlを参照にインストールしてみた。 環境 Apache 2.0.61 PHP 4.4.7 (mod_php) Mysql 4.0.27 Apacheの設定変更 index.phpが先に読まれるように、.htaccessが有効になるようにする。 <Directory "/home/foobar/public_html/modx/"> Direc</directory>…
普通の人は、ブラウザの見た目を印刷にも求めてしまう。 わたしはスタイルなしでもいいかと思うときもあるのだが、そうはいかない。 IEの詳細設定オプション(Firefoxのページ設定もかな？)では、背景と色の印刷はOFFになっている？ので背景がなくてもそれな…
.... <a href="http://d.hatena.ne.jp/kazuokohchi/" target="_blank">こうちかずお</a> のようにStrict指定でのtarget属性は認められていない。上記のように別ウィンドウにしたければ、 Transitionalにする。 http://www.ichiro.to/note/target で書いてあるようにjavascriptで行う。 があるが、S…
IE6にてhrを使う場合、いくらCSSで hr { margin: 0px; padding: 0px; height: 1px; } としたところで、1行分の高さをとってしまう。ググってみたら、 http://support.microsoft.com/kb/883631/ja にある通り、バグのようで、divで囲んであげる必要があるらし…
<html xmlns="http://www.w3.org/1999/xhtml"> <head> .... <meta http-equiv="Content-Script-Type" content="text/javascript" /> .... <script type="text/javascript"> // </meta></head></html>
あるサイトで div#foo { position: relative; .... } div#foo img { position: absolute; .... } のようなことをやって画像を表示させていたのだが、このページで、ブラウザのフォントサイズを大きくしたら、IE6だけ表示されない現象に悩まされていた。そも…
http://coliss.com/articles/build-websites/operation/css/558.html の記事から。揃えたいそれぞれのカラムに、 padding-bottom: 32768px; margin-bottom: -32768px; という2**(16-1)の値(signed shortの値)を指定するとのことだが、 それらを囲んでいるdiv…
ul/liを使用して、cssで高さなんぞ指定しているのにもかかわらずIE6では下のほうに余白ができる。 http://b.hatena.ne.jp/entry/3572522 にある、行の高さを正しく算出しない：Internet Explorer (Windows) CSSバグリストに書いてあるとおり、 li { font-siz…
http://d.hatena.ne.jp/kazuokohchi/20071016 に書いたように、親に高さを反映させる方法があるが、こちらもそう。 http://redline.hippy.jp/lab/css/floatoverflow.php タイトルの通り、overflowで親ボックスを伸ばすんだそうだ。こちらのほうがすっきりし…
<style type="text/css"> #left { float: left; } </style> .... <div id="wrap"> <div id="left"> <p>....</p> </div> <div id="content"> <p>....</p> </div> </div> みたいなことをしていると#wrapに#leftの高さが反映されない。これを解決するために、 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl…
<style type="text/css"> .... img { margin: 0px; padding: 0px; border-width: 0px; } div.mainline { margin: 0px; padding: 0px; width: 458px; height: 5px; } .... </style> .... <div class="mainline"> <img src="line.gif" alt="ライン" title="ライン" width="458" height="5" /> </div> .... ってしてるのに、IE6だと画像の上部があいてしま…
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
firefox2.0で、httpsのあるページにアクセスすると、鍵に斜線がついた状態になり、それにマウスを乗っけると、 証明されていない内容が含まれています となるページがあることに気がついた。リロードすると直ったり(「....による証明」と表示)するので、なん…
http://validator.w3.org/ にてValidなFlashオブジェクトの書き方。 Netscape系のために、embedを記述していたが、それがinvalidになってしまう。invalidになった時に表示される文章中のFAQを読むと以下の方法が書いてあった。 <object type="application/x-shockwave-flash" data="foobar-flash.swf" width="XXX" height="YYY"> <param name="movie" value="foobar-flash.swf"> </object> IE6/IE7やFi…
<div id="foo"> <dl> <dt>その1</dt><dd>その1データ</dd> <dt>その2</dt><dd>その2データ<br>その3データ</dd> </dl> </div> のようなhtmlがあり、スタイルシートにて、dt,ddが水平になるように、 #foo { clear: both; } #foo dt { float: left; clear: left; } #foo dd { padding-left: 4em; } のようなことをしているとIE6のみ、…
<h3>テスト</h3> <div id="foo"> <dl> <dt>その1</dt><dd>その1データ</dd> <dt>その1</dt><dd>その1データ</dd> </dl> </div> のようなhtmlがあり、スタイルシートにて、dt,ddが水平になるように、 #foo { clear: both; } #foo dt { float: left; clear: left; } #foo dd { padding-left: 4em; } h3 { .... float: left; clear: both; }…
IEにて、200px以上の画像を表示すると、イメージツールバーという4つのボタンが表示される。これをオフにするには、インターネットオプションの詳細設定でしかできないと思っていたが、html側でも制御が可能なようだ。以下をヘッダ中に記述する。 <meta http-equiv="Imagetoolbar" content="no"> 元記事は</meta>…
CGIで出力したhtml中のJavascriptにて、window.onloadを行いたい場合。 .... <script type="text/javascript"> <!-- window.onload = function() { .... } // --> </script> </body> </html> と書く位置(終了body要素の前)に書いておく必要があるみたい。
