I am having a little bit of a hard time getting a CSS rule to work for me. I believe it has to do with the order the rules are applied, but I hope that maybe one of you who is no doubt more experienced with HTML and CSS than myself could help me out.
Basically my goal was to put a colored border around the currently focused text inputs (textboxes and textareas as well as drop downs). The CSS is fairly short (I think…) But the rule that is giving me trouble is at the very bottom (.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;
}
I created a simple page with a single table and it worked fine (target browser here is IE).
When I create a large page though with multiple tables and divs, this rule doesn’t seem to be applied in IE anymore. Upon reading I added the !important to the rule, but it didn’t help me out. I downloaded Firebug, but the same page looks fine in Firefox (the border appears).
Any tips at this point would be greatly appreciated.
Edit: I can’t post a link to the whole thing unfortunately. Below is the test page that I had success with. I can probably post a link to the larger HTML, but it would have to be downloaded and run locally.
<!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>
That is the test page that worked OK. Note I have the css file on a web server, but it is only internally accessible. I thought about doing jquery but I thought this would be easier. Apparently not.
Thanks again. If needed I can still probably post the HTML for the big page later.
Edit Again: I am looking at the markup now. It seems OK on the W3C sites, but maybe I am missing something. If anyone is interested, here is a link to the larger page HTML in a txt file. http://cloudstor.pogoplug.com/share/xGQzP43X9FsEq5Z1XqafYQ/LNtISrGuLxJsaxhZ3iPZUw/form.txt
I should probably also mention the CSS I posted previously is the only one in use. Also, although it doesn’t really help much, the CSS works in Chrome as well as Firefox. IE is the lone holdout (big surprise there…)
Thanks again all for the links and comments. I am determined to figure this out.
Figured it out. And I feel very silly. Comments broke my page.
I am much more of a C, C++, C# kinda guy. It has been awhile since I have done much straight HTML from scratch. I was trying to create a template we could use going forward to base all of our HTML forms on. At the very top of the page I had a block comment explaining what the template is for (not too uncommon to place a block comment at the top of a code file explaining what it does, right?)
Long story short I took out bits and pieces of my HTML until all that was left was a single table, one row, one column and the text box. When that still didn’t work, I thought about taking out the comment. The comment was the first thing on the page, above the
Thanks for your help. If anyone has any tips or links to best practices when using comments in HTML, I would be very thankful.
Thanks again for all your suggestions.