0

I'm hoping someone here can help me out, I'm relatively new to CSS and jQuery, but I can't seem to wrap my head around what I'm doing wrong in this case.

I've got a form, with labels, inputs and selects. I found a helpful tutorial showing me how to add a background colour to the parent div when I entered an input or select, which was removed when I moved on. The tutorial is here, http://css-tricks.com/improved-current-field-highlighting-in-forms/

The css I was using was really simple:

.curFocus {background-color: #fdecb2}

When used with some simple jQuery it worked wonderfully.

$("input").focus(function() {
  $(this).parent().addClass("curFocus");
});
$("input").blur(function() {
  $(this).parent().removeClass("curFocus")
});

However, I then placed all my labels and inputs inside a fieldset, and now, my css no longer gets enabled.

This example works:

<div class="row">
  <label for="username">Your name:</label>
  <input type="text" name="username" id="username"/>
</div>

This example does not work:

<fieldset class="align">
  <div class="row">
    <label for="username">Your name:</label>
    <input type="text" name="username" id="username"/>
  </div>
</fieldset>

My CSS for the page is like this:

.align {
  border: none;
  border-width: 0px;
  margin: 0px;
  padding: 0px;
  padding-top: 1px;
}
.align label {
  float: left;
  width: 45%;
  padding-top: 0.6em;
  padding-left: 1em;
  margin-right: 0.5em;
}
.align input {
  float: left;
  width: 45%;
}
.align select {
  float: left;
  width: 46%;
}

Does anyone know how I can re-enable the active field highlighting once more?

1
  • It should work, try to insert the css manually i.e: .row {background-color: #fdecb2} to the CSS. Does it work? Nov 16, 2010 at 14:14

2 Answers 2

1

I think it doesn't work because DIV's are block elements, and you are floating the input/label elements within it. Because of these floats, the div doesn't have any height. Try adding this to your css-file:

.align div {
  overflow: hidden;
}

Might solve it?

edit For more info on clearing floats, check this site of PPK

2
  • Awesome, that fixed it. I added that to the CSS and they now show up nicely, thanks!
    – aodj
    Nov 16, 2010 at 14:40
  • Yeah floats and blocks can get really messy sometimes...Glad to help with that! Nov 16, 2010 at 14:43
0

think ti was them widths. You had 45% on the label and on the input, either use this or use yours and just set width to the fieldset. and remove the padding-top: 0.6em;

.align {
  border: none;
  border-width: 0px;
  margin: 0px;
  padding: 0px;
  padding-top: 1px;
    width:300px;
}
.align label {
  float: left;
  width: 45%;
  padding-left: 1em;
  margin-right: 0.5em;
}
.align input {
  float: left;
  width: 45%;
}
.align select {
  float: left;
  width: 46%;
}

take a look.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.