Graphic, Advertising and Web Design. 
Symsys Inform Blog HomeAIX Systems and Linux Support Specialists

Nod Antivirus Official NZ Reseller International Association of Web Master and Designers Cisco Certified Engineers Golden Web Award Winners Linux Spacialists Thawte SSL VS Security Partner

Symsys Ltd Text logo in the banner area

Author:  Gremlette
October 25, 2008



How to hide entire blocks of code from GOOD BEHAVING browsers.

Now that most web coders / designers are putting advanced effort into writing decent compliant code for their sites, there are a variety of ‘fixes’ that have to be employed to cure problems in old bad behaving browsers such as IE6 and below. 

MANY ‘get arounds’ involve miles of Javascript code which is completely useless as well as resource-hogging when many users block javascript completely for security purposes. The reasons that people hold onto old and ancient technology such as IE6 is due to a completely misled belief that it is more stable than the upgrade and more secure. The MAIN problem is IE6 and where I agree that IE7 is not ‘all that’, it is now usable and closer to compliance and good security than IE6 is!
At the end of the day - IE6 insistent users are STUBBORN, so although it pains any decent coder to work with and doubles the billing time on a clients web development sometimes, we have to try to work with it.

SAVE HOURS OF CSS HELL. If your visitor insists on ancient technology and blocking Javascript, then they have to EXPECT not being privvy to some modern compliant effects and functions. Example: users of programs such as ‘NoSCRIPT’ have no idea what ‘Digg’ and ‘Delicious’ are because they never see it and cannot even add RSS feeds to thier Facebook account…. similarly, whateverhover and other Javascript menu hacks designed purely for IE6 and old browsers become completely pointless.

So, you have a nice pure CSS styles functional section such as an active menu that

a) Requires ZERO Javascript Whatsoever
b) Is SUPER fast
c) Super clean and clear
d) Loved by Web crawler robots etc

BUT it won’t behave for stubborn stick in the mud’s like IE6, the likes, and below users.
The benefits of non dependant and compliant code is far too good to not use.
YET you have code that old browsers CAN work with that does the same functions yet still not javascript etc dependant (though may not be as nice)…. yet you don’t want BOTH to show up on the same page.

 Keep two versions and STAY Javascript Free

1)  Hide the GOOD STUFF from old browsers

Your two lumps of code ‘GOODstuff’ and ‘ALTstuff’ will be defined in <div> tags.

<div id=”GOODstuff”> all the HTML in here</div>
<div id=”ALTstuff”>repeat of the HTML in here</div> 

In your relevant style sheet hide GOODstuff from old browsers

#GOODstuff {display:none}
html>body #GOODstuff {display:block}

Anything within the GOODstuff div tags including relevant styling will be hidden from old browsers but shows in Good behaving browsers.

2. Hide ALT STUFF from good browsers

#ALTstuff {display:block}
html>body #ALTstuff {display:none;} 

Basically, Good browsers will follow the html>body to NOT display the ALT code div contents.

Filed under: CSS, Code, XHTML ... Comments (0)

Tags: , , ,


Enter your email address:

Delivered by FeedBurner