Tag: style

MSIE Table styling of empty cells

This one had me stumped for some time, when a table contained either a <td></td> or <th></th> without content the cell would not be properly styled, often lacking borders. Traditionally the solution I used was to insure that all table cells had at least a single space within them so that they would be styled properly in MSIE.

There’s a simpler solution, the below CSS changes the default behavior so that the traditional ‘hack’ is no longer required:


table {
border-collapse:collapse;
empty-cells:show;
}

REFERENCES:

CSS ‘id’ vs. ‘class’

This is a fairily standard interview question for someone that claims to understand CSS, but you’d be amazed at the number of developers that just don’t get it.

Assuming

<style type=”text/css”>
div#error { color:red; }
div.error { color:red; }
</style>
<div id=”error”>This is error text shown in red.</div>
<div class=”error”>This is also error text</div>

Notice that an ID’s CSS is an HTML element, followed by a “#”, and finally ID’s name – “element#idname”.

Also, be sure to absorb the fact that when an id is used in HTML we must use ‘id=”name”‘ instead of ‘class=”name”‘ to reference it!

A simple way to remember this is to refer back to how you think of page anchors. Those URL’s must also be unique and use the “#”.

Why Did They Choose Those Names??

  • ID = A person’s Identification (ID) is unique to one person.
  • Class = There are many people in a class.

NOTE: You can also use inline styling (with no id or class), or style the HTML elements themselves, but those will be covered in a later posts.