問題タブ [css]

インターウェブにアップロードしたばかりの Web サイトを持っていますが、Ubuntu と WinXP で Firefox 3.0.1 を使用すると表示が異なります。

Ubuntuで気付いた2つのこと：

1. ファビコンがありません
2. 背景色が表示されない (スタイルシートで設定されている)

私は何を間違えましたか？CSS ファイルは Ubuntu でフェッチされているのに、スタイルシートのすべてを適用しないのはなぜですか? ファビコンが表示されないのはなぜですか？それらは同じ問題ですか？

ファビコンに関する回答: 以前は、ファビコンはありませんでした。ブラウザはファビコンの欠如をキャッシュしました。 Firefox のキャッシュをクリアすると、すべて問題ありません。

Haml に移行しようとしている次の html.erb コードがあります。

現在割り当てられているステータスの CSS クラスをスパンに関連付けます。

これはHamlでどのように行われますか? 本当に単純なものが欠けていると確信しています。

CSS を使用して角を丸くするにはどうすればよいですか?

私は現在、私が働いている会社の内部販売アプリケーションに取り組んでおり、ユーザーが配送先住所を変更できるフォームを持っています。

メインアドレスの詳細に使用しているテキストエリアがその中のテキストの領域を占めるだけで、テキストが変更された場合は自動的にサイズが変更されれば、見た目はずっと良くなると思います。

これが現在のスクリーンショットです。

何か案は？

@クリス

良い点ですが、サイズを変更したい理由があります。それが占める領域を、それに含まれる情報の領域にしたいと思います。スクリーン ショットでわかるように、テキスト領域を固定すると、垂直方向のスペースがかなり占有されます。

フォントを小さくすることはできますが、住所を大きく読みやすくする必要があります。テキスト領域のサイズを縮小できるようになりましたが、住所行が 3 行または 4 行 (1 行は 5 行) かかる人には問題があります。ユーザーにスクロールバーを使用させる必要があることは、絶対にありません。

もう少し具体的に言うべきだと思います。縦方向のサイズ変更後ですが、幅はそれほど重要ではありません。これで発生する唯一の問題は、ウィンドウの幅が小さすぎる場合 (スクリーンショットでわかるように)、ISO 番号 (大きな「1」) がアドレスの下に押し込まれることです。

ギミックを持つことではありません。ユーザーが編集できるテキスト フィールドを用意して、不要なスペースを占有せず、その中のすべてのテキストを表示することが重要です。

誰かが問題にアプローチする別の方法を思いついた場合でも、私はそれも受け入れます.

少し動作がおかしいので、コードを少し修正しました。入力したばかりの文字が考慮されないため、キーアップでアクティブ化するように変更しました。

非常に大量のデータを含む可能性のある要素がありますが、ページレイアウトを台無しにしたくないので、コンテンツが収まらないときにスクロールバーが表示されることを期待して設定max-height: 100pxします。overflow:auto

FirefoxとIE7ではすべて正常に動作しますが、IE8はのoverflow:hidden代わりに存在するかのように動作しoverflow:autoます。

試しましたがoverflow:scroll、それでも役に立ちません。IE8は、スクロールバーを表示せずにコンテンツを切り捨てるだけです。max-height宣言を変更しheightてオーバーフローが正常に機能するようにします。これはとの組み合わせでmax-heightありoverflow:auto、問​​題が発生します。

これは、IE8の最終リリースバージョンの公式バグとしても記録されます

回避策はありますか？今のところ、heightの代わりにを使用することにしましmax-heightたが、データが少ない場合に備えて、十分な空きスペースが残ります。

IEを使用する場合、選択した入力要素の上に絶対位置のdivを配置することはできません。これは、select要素がActiveXオブジェクトと見なされ、ページ内のすべてのHTML要素の上にあるためです。

ポップアップdivを開くときにselectを非表示にしているユーザーを見たことがあります。これにより、ユーザーエクスペリエンスがかなり悪くなり、コントロールが消えてしまいます。

FogBugzには、ポップアップが表示されたときにすべての選択をテキストボックスに変換する、非常にスマートなソリューション（v6より前）が実際にありました。これによりバグが解決され、ユーザーの目を騙しましたが、動作は完全ではありませんでした。

もう1つの解決策は、FogBugz 6にあります。ここでは、select要素を使用せず、どこでも再コーディングします。

私が現在使用している最後の解決策は、IEレンダリングエンジンを台無しにして<div>、ActiveX要素として絶対位置にあるものもレンダリングするように強制し、選択した要素の上に存在できるようにすることです。これは、<iframe>内部に非表示を配置し、次のよう<div>にスタイリングすることで実現されます。

誰かがこれよりもさらに良い解決策を持っていますか？

編集：この質問の目的は、実際の質問であると同時に有益です。この<iframe>トリックは良い解決策だと思いますが、アクセシビリティを低下させるこの醜い役に立たないタグを削除するなどの改善を探しています。

最近は常に完全な検証に努めていますが、時間の無駄ではないかと思うことがよくあります。コードが実行され、すべてのブラウザーで同じように見える場合（browsershots.orgを使用して確認します）、さらにコードを進める必要がありますか、それとも過度に肛門的ですか？

次の目的でコードを作成するときに、コードをどのレベルに保持しますか。

a）あなた自身b）あなたのクライアント

PSジェフと会社、なぜスタックオーバーフローが検証されないのですか？:)

編集：いくつかの良い洞察、私は非常に有効であるため、私は何が問題を引き起こし、何が問題を引き起こさないかを知ってプログラムするので、最初にサイトを作成し、次にサイトを作成する人々よりも良い立場にあると思います「戻って検証の問題を修正してください」

スタックオーバーフローについて別の質問を投稿するかもしれないと思います。「進行中に検証しますか、それとも終了してから戻って検証しますか？」それがこの質問が進んでいるところのようです

divユーザーがリンクをクリックしたときに表示したい絶対位置があります。リンクのonclickは、div の表示をブロックに設定する js 関数を呼び出します (「」、、、、なども試しましinlineたtable-cell) inline-table。これは IE7 ではうまく機能しますが、私が試した他のすべてのブラウザー (FF2、FF3、Opera 9.5、Safari) ではまったく機能しません。

通話の前後にアラートを追加しようとしましたが、表示が からnoneに変わったことが表示されますblockが、は表示されdivません。

FirebugのHTMLインスペクターを使用して表示値を変更すると（ただし、Firebugのコンソールからjavascriptを実行することはできませんdiv）、FF3で表示することができます-画面外に表示されるだけではないことがわかります。

以下を含め、考えられるすべてのことを試しました。

• 別の doctype (XHTML 1、HTML 4 など) を使用する
• display block/none の代わりに、visible/hidden の可視性を使用する
• 関数呼び出しの代わりにインライン JavaScript を使用する
• 異なるマシンからのテスト

これを引き起こす原因についてのアイデアはありますか?

番号付きリストの数字を左揃えにするにはどうすればよいですか?

番号付きリストの数字の後の文字を変更する

ol 要素で type 属性を使用する代わりに、数字からアルファベット/ローマ字のリストに変更する CSS ソリューションもあります。

私は主に Firefox 3 で動作する回答に興味があります。

私が見つけた唯一のものは次のとおりです。

これが機能する唯一の方法は、テキストを段落に入れることです。これにより、ひどく見苦しい余分な行が発生します。私はむしろそれらをある種のものに入れたいと思っています<span class="hang"></span>。

また、単一レベルのぶら下げだけでなく、さらにインデントする方法も探しています。段落を使用してインデントを積み重ねても機能しません。