CSSルールを機能させるのに少し苦労しています。ルールが適用される順序に関係していると思いますが、私よりもHTMLとCSSの経験が豊富な方がお役に立てば幸いです。
基本的に、私の目標は、現在フォーカスされているテキスト入力(テキストボックスとテキストエリア、およびドロップダウン)の周囲に色付きの境界線を配置することでした。CSSはかなり短いです(私は思います...)しかし、私に問題を与えているルールは一番下にあります(.userinput:focus)
body
{
font-family: Arial;
}
.header
{
color: #004c85;
font-family: Arial;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
padding-bottom: 5px;
}
.titleCell
{
background-color: #004c85;
font-family: Arial;
color: White;
font-size: 12px;
font-weight: bold;
text-align: left;
padding: 2px 2px 2px 2px;
}
.subtitleCell
{
background-color: #aaaaaa;
font-family: Arial;
color: #092548;
font-size: 12px;
font-weight: bold;
text-align: left;
padding: 2px 2px 2px 2px;
}
.normalCell
{
background-color: #f1f1f1;
font-family: Arial;
color: #092548;
font-size: 9pt;
font-weight: bold;
text-align: left;
padding: 1px 2px 1px 2px;
}
.errorText
{
font-family: Arial;
color: #d01d00;
font-size: 9pt;
font-weight: bold;
text-align: left;
}
.button
{
font-size: 12px;
color: #f1f1f1;
background-color: #004c85;
}
.userinput:focus
{
border: 2px ridge #00a2ff !important;
}
単一のテーブルを使用して単純なページを作成しましたが、正常に機能しました(ここでのターゲットブラウザーはIEです)。複数のテーブルとdivを使用して大きなページを作成すると、このルールはIEに適用されなくなったようです。読んだときに、ルールに!importantを追加しましたが、役に立ちませんでした。Firebugをダウンロードしましたが、Firefoxでも同じページが表示されます(境界線が表示されます)。
この時点でのヒントをいただければ幸いです。
編集:残念ながら、全体へのリンクを投稿することはできません。以下は私が成功したテストページです。より大きなHTMLへのリンクを投稿することもできますが、ダウンロードしてローカルで実行する必要があります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Demo Page</title>
<link href="base.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form name="FormName" method="post" style="text-align: center">
<table cellpadding="0" cellspacing="0" width="900" border="0" style="text-align:left">
<tr>
<td class="header">
Header
</td>
</tr>
<tr>
<td class="errorText">
Error Text
</td>
</tr>
<tr>
<td class="titleCell">
Title Cell
</td>
</tr>
<tr>
<td class="subtitleCell">
Subtitle Cell
</td>
</tr>
<tr>
<td class="normalCell">
Normal Cell
</td>
</tr>
<tr>
<td class="normalCell">
<input type="text" class="userinput" size="25" />
</td>
</tr>
<tr>
<td class="normalCell">
<input type="checkbox" value="ON" />
Checkbox
</td>
</tr>
<tr>
<td>
<input type="button" class="button" value="Button" />
</td>
</tr>
</table>
</form>
</body>
</html>
これが正常に機能したテストページです。Webサーバーにcssファイルがありますが、内部からしかアクセスできないことに注意してください。jqueryを実行することを考えましたが、これは簡単だと思いました。どうやらそうではありません。
再度、感謝します。必要に応じて、後で大きなページのHTMLを投稿することもできます。
もう一度編集:マークアップを今見ています。W3Cサイトでは問題ないようですが、何かが足りないのかもしれません。興味のある方は、txtファイルの大きなページのHTMLへのリンクをご覧ください。http://cloudstor.pogoplug.com/share/xGQzP43X9FsEq5Z1XqafYQ/LNtISrGuLxJsaxhZ3iPZUw/form.txt
以前に投稿したCSSだけが使用されていることにも言及する必要があります。また、あまり役に立ちませんが、CSSはFirefoxだけでなくChromeでも機能します。IEは唯一のホールドアウトです(そこには大きな驚きがあります...)
リンクとコメントをありがとうございました。私はこれを理解することを決意しています。