Snipps & Tips

How to create a full window layer in CSS without JavaScript

<style>

html { min-height: 100%; position: relative }

body { position: static; }

.overlay-shadow { background: #fff; opacity: 0.6; filter: alpha(opacity=60);
position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 300; }

</style>

<div class="overlay-shadow"></div>

Use a font-family name of more than 31 characters with font-face, makes IE ignore the declaration…

Accesible and semantic placeholder text

Today we will se how to use the label element to make a placeholder text:

HTML

<form id="example" action="#">
      	<fieldset>
      		<legend class="hidden">Place holder example</legend>
      		<p class="placeholder">
      			<label for="PHR">Placeholder</label>
      			<input type="text" class="i-text" id="PHR" name="PHR" />
      		</p>
      	</fieldset>
</form>

CSS

.placeholder { position: relative;}
.placeholder label { position: absolute; left: 5px; top: 0; z-index: 55; color: #999; cursor: text;}
.placeholder .i-text { font: 16px/1em Georgira; Times New Roman, Times; color: #666; text-indent: 5px;}

Js (jQuery)

$(document).ready(function(){	
	$(".placeholder .i-text").each(function(){
		if(this.value=='') {		
			} else {
				$(this).parent().find("label").hide();			
			}
	});

	$(".placeholder .i-text").focus(function(){				
		$(this).parent().addClass("focused");
		$(this).parent().find("label").fadeOut(70);			
	});

	$(".placeholder .i-text").blur(function(){	
		$(this).parent().removeClass("focused");			
		if(this.value=='') {		
			$(this).parent().find("label").fadeIn(70);				
			} else {	
				$(this).parent().find("label").hide();
			}
	});

});

Placeholder example

Picture and text inline positioned ( no width needed)

Using “.mod-img” and  “.mod-txt” CSS classes you will get an image and text inline positioned.

This is how it works:

.mod-img { float: left; display: inline;}
.mod-txt { display: table; height: 1%;}

We don’t need to set any width, all will be fluid and if we dont have an image, the text will be expanded

Example

Text replacement for background images

If you have some images text like website logo or headings, you must use this:

h1 { text-indent: -9999px; overflow: hidden; background: url(/img/your-background.jpg) no-repeat left top;  width: Xpx; height: Xpx; }

Text replacement example

“Display: inline-block;” Cross Browser

The “display: inline-block;” property is very useful in most cases that you have a dinamic height elements.

As you know IE7 and IE6 “don’t have support” for this property, so we will see how to force it.

In this example we will use the IE selector hack:

#example li { display: inline-block;}
* html #example li { display: inline;}
*:first-child + html #example li { display: inline;}

You can play with “vertical-align” property.

Have fun!

Display inline-block example

IE6 & IE7 Selectors (“hacks”)

If you want to target only IE7 or IE6, don’t use a separate CSS file for each browser, this going against standars and one of the most important rules in web development:

One code for multiples devices..

Obiously this isn’t possible always, but we can write better code, trying to minimize extra rules.

If you have to target IE6, you must use “* html selector”, and for IE7 “*:first-child + html selector” in your CSS:

p { margin: 10px 5px 8px;} -All browswers
* html p { margin: 10px 5px 0;} - Only IE6
*:first-child + html p { margin: 10px;} - Only IE7

This is valid css 2.1 code by W3C

So forget conditional comments…

Always set “display: inline;” in your floated elements to avoid IE 6 double margin bug

How to use tabular data correctly

This is a well formed HTML markup for table:

<table summary="an explanation of the content of this table">
	<caption>commonly hidden with css - a title for the table</caption>

	<thead>
		<tr>

			<th scope="col">Th</th>
			<th scope="col">Th</th>
			<th scope="col">Th</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>Td</td>
			<td>Td</td>
			<td>Td</td>
		</tr>
	</tbody>
</table>

Example

Clearing floats

We can fix it adding the class “clearfix” to parent of floated elements:

CSS:

/* CLEARFIX
------------------------------------ */
.clearfix:after {content:"."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1px; }

HTML:

<div class="container clearfix"> ... </div>

Example