Kathirvel K

We can write CSS hacks using media queries also,

/* IE6/7 uses media, */
@media, {
.dude { color: green; }
.gal { color: red; }
}

/* IE8 uses */
@media all {
.dude { color: brown; }
.gal { color: orange; }
}

/* IE9 uses \9 */
@media all and (monochrome:0) {
.dude { color: yellow\9; }
.gal { color: blue\9; }
}

Tags: ,

HTML:
<ul id=”topnav”>
<li><a href=”#”>Home</a>
<ul>
<li><a href=”home.html”>Submenu</a></li>
<li><a href=”Submenu1.html”>Submenu1</a></li>
<li><a href=”Submenu2.html”>Submenu2</a></li>
</ul>
</li>
<li><a href=”#”>Nav 2</a>
<ul>
<li><a href=”nav2.html”>Nav2</a></li>
<li><a href=”Submenu3.html”>Submenu3</a></li>
<li><a href=”Submenu4.html”>Submenu4</a></li>
</ul>
</li>
</ul>

jQuery Script:
<script type=”text/javascript”>
$(document).ready(function() {
//
$(‘#topnav ul li’).each(function () {
if (window.location.href.indexOf($(this).find(‘a:first’).attr(‘href’)) > -1) {
$(this).closest(‘ul’).closest(‘li’).attr(‘class’,’active’)
$(this).addClass(‘active’).siblings().removeClass(‘active’);
}
});
//
});
</script>

CSS:
#topnav li.active {background:#222; color:#fff;}
#topnav ul li.active a{ background:#007dba none; color:#fff; }

It might be a chance you can face some problems that because of meta tag, so just know about some things to resolve your problems quickly… 

  • Problem:

The character encoding of the HTML document was not declared.The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol.

Solution:

Add this as a first line in the HEAD section of your HTML template
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">

  • Problem:

Forces the browser to render as that particular IE version's standards

Solution:

Add this meta tag in the HEAD section of your HTML template
<meta http-equiv="X-UA-Compatible" content="IE=8" />

  • Problem:

Forces the browser the render at whatever the most recent version's standards are

Solution:

Add this meta tag in the HEAD section of your HTML template
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

  • Problem:

Adding "chrome=1" will allow the site to render in ChromeFrame

Solution:

Add this meta tag in the HEAD section of your HTML template
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

Default paragraphs in this page have yellow background. In any of the following test cases a blue background is set with a special (hack) rule. When the background is blue, the hack is applied.
Note: “All” == IE5+/Win, Op6+, Moz, Saf

IE6- (and IE7+ quirks) only
/*\*/ * html selector { property: value; } /**/

IE5.5- only
selector { property: value; p\roperty: normal-value; }

IE7 standard only
*:first-child+html selector { property: value; }

All except IE6- and IE7+ quirks
html>body selector { property: value; }

IE6+ quirks and IE5 (= all IE/Win quirks) only
* html selector { property /**/: value; }

All except IE6 standards
selector { property /**/: value; }

All except IE5.0
selector { property/**/: value; }

All except IE5.5
selector { property: /**/value; }

jQuery Code:

<script type="text/javascript" >
jQuery(document).ready(function()
{
jQuery(".AccordionMenu .AccordionHeader").click(function()
	{
	jQuery(this).css({backgroundImage:"url(Open.png)"}).next("div.AccordionContent").slideDown('slow', function() {
	if (jQuery(this).is(':visible')) {
		jQuery(this).siblings("div.AccordionContent").slideUp("slow").siblings(".AccordionHeader").css({backgroundImage:"url(Close.png)"});
		jQuery(this).prev(".AccordionHeader").css({backgroundImage:"url(Open.png)"})
	} else {
		jQuery(this).siblings(".AccordionHeader").css({backgroundImage:"url(Close.png)"});
	}

});
	});
});
</script>

CSS Code:

<style>
.AccordionHeader { background: transparent  url(Close.png) center right  no-repeat;  position:relative;padding: 7px 10px; cursor: pointer;  margin:1px; font-weight:bold;color:#FFFFFF;height: 22px;  }
.AccordionContent { display:none;  background: #FFFFFF !important; border: 1px solid #B0C5CE; padding: 5px; }
</style>

HTML Code:

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

    <div class="AccordionHeader">My Header </div>
    <div class="AccordionContent">
    <p>
    -- your content goes here --
    </p>
    <div>

This is explained how to do show more / show less option using jQuery for dynamically generated texts/links/lists.

jQuery code:

<script type="text/javascript" >
jQuery(function() {
var adjustheight = 40; var moreText = "Show More";
var lessText = "Show Less";
jQuery(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
var listItem_size = jQuery(".more-block a").length
if (listItem_size < = 8 ) {
if (listItem_size < = 4 ) {
jQuery(this).find(".more-block").css('height', adjustheight1).css('overflow', 'hidden');
}
} else {
jQuery(".more-less").append('');
jQuery("a.adjust").text(moreText);
}
jQuery(".adjust").toggle(function() {
jQuery(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
jQuery(this).text(lessText);
}, function() {
jQuery(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
jQuery(this).text(moreText);
});
});
</script>

CSS Code:

<style>
#Tabs a.adjust{text-align:center; padding:5px;background: #333333 ; color:#FFFFFF; font-size:11px ; display:block ; width:65px ; cursor:pointer; height: 13px;line-height: 13px ; text-decoration:none; clear:both;} #Tabs { padding: 0 0 2px 0; margin: 0; display:block;border:1px solid #999999; padding:6px; float: left; width:550px; clear:both;} #Tabs ul{ display: block;float: left;margin: 0; padding: 0;} #Tabs ul li{float:left; width:130px; list-style:none;} #Tabs a{text-align:center; padding: 3px 10px;margin:5px;display:block;text-decoration: underline;font-size: 11px; color:#800000; word-wrap: break-word; float:left; width:100px; } #Tabs a:hover{background:#A41B1B; color:#FFFFFF; text-decoration:none;} </style>

HTML Code:

 <div class="more-less">
  <div class="more-block">
  <ul>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  <li><a href="#"> Sample Link </a>
  </ul>
  <div>
</div>

Internet Explorer conditionnal comments

<!--[if IE]>
  	<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

You can also target only a certain version of IE:
<!--[if IE6]>
  	<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Internet Explorer hacks

.class {
  width:200px; /* All browsers */
  *width:250px; /* IE */
  _width:300px; /* IE6 */
  .width:200px; /* IE7 */
}

Targeting Opera only

@media all and (min-width: 0px){
    .classname {}
}

Targeting Safari only

html:lang(en)>body  .classname {}

Targeting Google Chrome only

body:nth-of-type(1) p{
   color: #333333;
}

IE6 crash

<style>*{position:relative}</style><table><input></table>
Follow

Get every new post delivered to your Inbox.