Conflict using the css content property and a multiple select list.

Question

I've never used or even heard of this content property but it is interfering with my ability to select multiple items from a select list. Whatever 'content' is, I need it because when I delete it, there are background hignlights that no longer work properly.

Can someone help me figure this out? Is there a workaround?

---

form li:after
{
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

<form method="post" action="">
  <li id="li_6">
    <label class="description" for="element_6">test</label>
    <div>
      <select class="element select medium" id="element_6" name="element_6" size="10" MULTIPLE>
        <option value="1">test1</option>
        <option value="2">test2</option>
      </select>
    </div>
  </li>
</form>

Answer 1

Here's info about the content property: http://www.w3schools.com/css/pr%5Fgen%5Fcontent.asp

I tried your code with and without content property and had no problem selecting multiple items from the list (firefox).

Good luck.

Answer 2

The CSS you list is the clearfix method to force a container to have a height big enough to contain a floated child element. The content property itself adds content, usually text or an icon. In this case it's adding just a period, but setting the visibilty to hidden and height to zero to hide the period.

Other than that, you'll have to be more specific about your problem. You'll probably have to check whatever other styling is on your form.