webmaster: CSS

1) To Create Tool Tip for a Link

<style>

.tooltip a:hover {
    background:#ffffff;
    text-decoration:none;
} /*BG color is a must for IE6 */

.tooltip a #a1 {
    display:none;
    padding:2px 3px;
    margin-left:8px;
    width:140px;
}
.tooltip a:hover #a1 {
    display:inline;
    position:absolute;
    background:#CD8538;
    border:1px solid #cccccc;
    color:#FFFFFF;
}
#a1 ul{
    float: left;
    margin: 0px 0px 0px 12px;
    padding: 0;
    width: 126px;
    list-style-type:square;
    text-align:left;
}
#a1 ul li{
    position: relative;
    margin: 0;
    padding: 0;
}
</style>

<div class="tooltip">
   <a href="#" id="a1">This Text Had Tooltip
             <span><ul><li>see1</li><li>see2</li></ul></span>
</a>
</div>

2) Difference between px and em

px is an exact pixel size, and em is a standard unit.If you say a font is 20px, it would be exactly 20 pixels tall. If you say a font is 1.5em, it would be 1.5 times the standard font size.(px) is a size based on the physical properties of the display (i.e. pixels).
(em) is a size based on the rendered size of the current font. If the current font is rendering 12 pixels tall,
and you select 0.5em, you will get something 6 pixels tall, etc.The benefit of using (em)s over (px)s, especially when defining something that is intimately linked to the text size, is that it will automatically size based on the browser/OS/user's font selections.
<div style="font-size:10px">
<div style="font-size:2em">
<div style="font-size:1em">
Hello World
</div>
</div>
</div>
In this case hello world is 10px. it's 1em, relative to the las absolute definition.
not relative to the 2em before (20px).

3) To apply CSS to a Span inside a Child div
<style>
#ParentDiv div:nth-child(2) span{
text-align:center;
}
</style>
<div id="ParentDiv">
<div id="first_child">
<span>name</span>
</div>
<div id="second_child">
<span>Text Align Center...</span>
</div>
</div>
text align center will only applied to span inside second_child div, nth-child(2) specify the second number child div of parent div " ParentDiv "

4) CSS Conflict
suppose i write an html page
<body>
<div class="test">
<table><tr><td>inside test div</td></tr>
</table>
</div>
<div class="foo">
<table><tr><td>this is foo </td></tr></table>
</div>
</body>
if i write css like below .test th,tr,td { } the css we apply to th tr and td but also apply to other tr and td also, ie to other class such as .foo as tr,td are written after th, so their scope is for whole project.
div.test th, /* any <th> underneath a <div class="test"> */
td, /* or any <td> anywhere at all */
caption /* or any <caption> */

to avoid this we need to explicit define class name before each tr,td so that they can only be applied to class test not conflict with foo class
div.test th, /* any <th> underneath a <div class="test"> */
div.test td, /* or any <td> underneath a <div class="test"> */
div.test caption /* or any <caption> underneath a <div class="test"> */

5) CSS Conditional Comment For IE (a type of css Hack)





Their basic structure is the same as an HTML comment (). Therefore all other browsers will see them as normal comments and will ignore them entirely.
IE, though, has been programmed to recognize the special <!--[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.
Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. I'd have preferred to put the special styles in the CSS file, but that's impossible. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.

6) How To Apply CSS After Page Render i.e all contents gets loaded.
if we use Jquery $(document).ready(function(){ //code }); this we invoke at the time of page load but js and images are still loading at that time. its use for DOM read. but if we need to run a script only after every things gets rendered even images (images load after html tags ) i.e to get image width or to add css we use
$(window).bind("load", function(){ //code });

$(window).bind("load", function(){
var section="see1";
$('#tabholder1 > div > div.tabbertab').addClass('tabbertabhide');
$('#'+section).removeClass('tabbertabhide');
$('#tabholder1 > div > div.tabbertab').css("border", "3px double red");
});

7) To Show first child div inside parent div
<div id="tab">
<div>My first show </div>
<div>second child div </div>
<div>see </div>
</div>
if we use Jquery, then to hide all child div first and then show first child div
$(document).ready(function(){
$('#vtab>div').css('display','none'); //first hide all div by style=display:none
$('#vtab>div:first').show(); //then show first one ie My first show
});

8) To Hide 5th child div and also hide and un-hide at click event
<a href="javascript:void(0);" onclick="showreply('<?php echo $divid;?>');">View Reply</a>
function showreply(divid){

if($('#'+divid+' div:nth-child(5)').is(':hidden')) //to check weather div is hidden or not
$('#'+divid+' div:nth-child(5)').css('display','block');
else
$('#'+divid+' div:nth-child(5)').css('display','none');
}

WordPress Plugins

CSS