From Deep Thought

Cascading Style Sheets (CSS)

Contents 1 Tips & Tricks 1.1 Hiding Rules 1.1.1 Internet Explorer 6 1.2 visibility versus display

Tips & Tricks

Hiding Rules

Not ever browser understands valid CSS. The standard says that when a browser sees a rule it doesn't understand, it should just ignore it and move on. You can use this to write rules which you need parsed by one browser but ignored by another.

Internet Explorer 6

IE6 doesn't understand child selectors.

div.content {
   width: 300px;   // Width for IE6 and it's busted box-model
}

html>body div.content {
   width: 320px;   // Real width for standards compliant browsers.
}

visibility versus display

When possible, use the display property to show and hide elements on a page. For example:

div.showTab {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	display: inline;
}

div.hideTab {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	display: none;
}

Intead of:

div.showTab {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	visibility: visible; 
}

div.hideTab {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	visibility: hidden; 
}

That way when you implement your super-cool javascript function to show and hide tabs (like the example below), Internet Explorer (and possibly other browsers) don't corrupt the child nodes of the DOM tree.

Showing/hiding tabs example:

<script>
function selCheckServices() {
	document.getElementById("checkServicesButton").className="tabButtonSel";
	document.getElementById("checkServicesTab").className="showTab";	
	document.getElementById("backgroundButton").className="tabButton";
	document.getElementById("backgroundTab").className="hideTab";
	document.getElementById("creditButton").className="tabButton";
	document.getElementById("creditTab").className="hideTab";
	document.getElementById("dataVerificationButton").className="tabButton";
	document.getElementById("dataVerificationTab").className="hideTab";
}
</script>
	<div id="tabButtonContainer" class="noprint">
		<div id="creditButton" class="tabButtonSel" align="center"><a href="javascript:selCredit()">Credit Report</a></div>
		<div id="backgroundButton" class="tabButton" align="center"><a href="javascript:selBackground()">Background Check</a></div>
		<div id="dataVerificationButton" class="tabButton" align="center" style="left:310px"><a href="javascript:selDataVerification()">Data Verification</a></div>
		<div id="checkServicesButton" class="tabButton" align="center" style="left:465px"><a href="javascript:selCheckServices()">Check Services</a></div>
	</div>