CSS Differentiation for input controls

How do you differentiate between input types of radio, text, checkbox, etc?
An example:
/* hide checkboxes and radiobuttons only */
input[type="checkbox"], input[type="radio"] {
visibility: hidden;
}

Cascading Style Sheets - CSS

Sometimes, or maybe a bit too often...

Developers tend to be 'purist' and eschew a particular method because it's deemed passe. One such instance is with the table. The div is in favor, and many developers try to use divs where tables are really more appropriate.

The reason the table fell in to disfavor probably has a lot to do with Front Page and Dreamwaevers overuse of the table, to achieve positioning, but at the expense of the readability, and maintainability of the HTML code.

Tables should be used still when you desire both horizontal and vertical alignment of content. Don't let anyone bully you into thinking otherwise. The THEAD element is especially useful for print media output where you want to reaheader content with page breaks. It is nearly impossible to vertically align content without using a table cell element.

Divs are best for flowed content, and absolute and relative positioned content.

My Grandaddy, Dr. J.C. Coldiron use to say 'never use a tool for anything other than it's intended purpose.'
In think that's good advice, let divs be divs and tables be tables.

The Box Model

The box is where IE gets it wrong by misinterpreting the CSS1 box model by placing border and padding inside the specified width. (This in addition to ignoring min-height/width, max-height/width).

The box illustrated (from w3.org):

The height and width settings are just for the content, exclusive of borders, padding and margins.

My Contribution to fixing CSS browser incompatibilities

On the Tantek Celik hack:

This is an example from http://bluerobot.com/web/layouts/view_css.asp?layout=layout3 
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
IE5/Win incorrectly parses the ""}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value is 
below. See http://glish.com/css/hacks.asp for details. */
	voice-family: ""}"";
	voice-family:inherit;
	width:128px;
	}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#navAlpha {width:128px;}

I have a problem with the above, in that, well it's a hack!
First you have to depend on one flaw in IE to fix another flaw, then you have to 
work around the work around to protect Opera from the fix!
Zealousness over 'pure CSS' probably led to the acceptance of the technique, 
or maybe worry over using proprietary solutions based on DOM extensions.

My non-proprietary solution is to 'find IE',
then use the 'Cascade' part of CSS to tweek the styles.

The solution is in the following:
<style type='text/css'>@import url(index.css );</style>
<script type='text/javascript'>  
    var exp = new RegExp( "^Microsoft","i" );  
    if( exp.test(navigator.appName) )
    {
      document.write("<style type='text/css'>");
      document.write("@import url(msindex.css );"); 
      document.write("</style>");  
    }    
</script>  

The solution works by detecting the IE browser.
Once IE is detected, the solution adds another style sheet
that modifies positions etc. to work correctly with IE.  

The really good thing about it is that you only have to put
the style settings that fix IE positioning into the 'msindex.css' file.

Another way I like

You can differentiate between IE and CSS compliant browsers by using the !important tag.

W3C CSS FULL PROPERTY TABLE

DOCTYPES THAT WORK

The following DOCTYPEs should be used. they work pretty well with CSS.

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
	
	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
	
	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	
	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Links