Php Development » css http://www.maheshchari.com Just another WordPress weblog Sun, 23 May 2010 05:10:57 +0000 http://wordpress.org/?v=2.9 en hourly 1 Ie css hack reference http://www.maheshchari.com/ie-css-hack-reference/ http://www.maheshchari.com/ie-css-hack-reference/#comments Fri, 04 Dec 2009 04:07:24 +0000 mahesh chari http://www.maheshchari.com/?p=381 CSS difference Between IE6,IE7,IE8

As a designer we experience the most bizzare conditions with internet explerer because it doesn’t follow w3 standereds mostly while rendering elemets and Box Model where moslty other Gecko browsers follow same.Even i am very good at programming ,i experience difficult to find IE issues,wasted more time on CSS issues than programming.So i came up with reference for IE and instructions how to handle them to keep in mind reference for me (us).Even there is difference between IE versions also.So below is the reference

Selector Type Examples & description IE6 IE7 IE8
Child Selectors: 
body>p,ul>li
 No Yes Yes
Chained Classes 
	.class1 .class2 .class3,
	or like class=" class1 class2 class3"
 No Yes Yes
Attribute Selectors 
a[href=xyx],input[type=radio]
 No Yes Yes
Adjacent Sibling Selectors 
h1+p,li+ul,ul+li
 No Yes Yes
General Sibling Selectors 
h1~p,li~ul,ul~li
 No Yes Yes
Pseudo-Classes and Pseudo-Elements 
a:hover span ,li:first p
 No Yes Yes
Chained Pseudo-Classes 
a:first-child:hover ,  a:active:hover
 No Yes Yes
:hover on Non-Anchor Elements 
p:hover
 No Yes Yes
:first-child Pseudo-Class 
div li:first-child
 No Yes Yes
:focus Pseudo-Class 
a:focus
 No Yes Yes
:before and :after Pseudo-Elements 
.class:before,.class:after
 No Yes Yes
Min-Height & Min-Width 
#box {  max-height: 500px;  min-width: 300px;  }
 No Yes Yes
Transparent Border Color 
#box {  	border: solid 1px transparent;  }
 No Yes Yes
Fixed-Position Elements 
#box {  	position: fixed;  }
 No Yes Yes
inherit 
#box {  	display: inherit;  }
 No No Yes
Border Spacing on Table Cells 
table td {  	border-spacing: 3px;  }
 No No Yes
Vertical Position of a Table Caption 
table {  	caption-side: bottom;  }
 No No Yes
Clipping Regions 
#box {  	rect(20px, 300px, 200px, 100px)  }
 No No Yes
Alternative Values for the Display Property display property values other than block,none,inline,inline-block. No No Yes
Handling of Collapsible Whitespace 
	p { 	white-space: pre-line;  }  
	div { 	white-space: pre-wrap;  }
 No No Yes
@import 
@import url("styles.css";) screen;
 No No Yes
Quote Characters for Generated Content 
	q {quotes: "'" "'"; } 
	q:before {content: open-quote;} 
	q:after {content: close-quote; }
 No No Yes
!important 
ul {margin-left:0 !important}
 No Yes Yes
         

Handling Issues

In the most cases IE6 doesn’t support all selector types to other IE7,IE8.

Even though IE7,IE8 both support much same selectors,they have difference in box model and rendering elements.

In the case of IE7 it just need to add special IE7 css fix style like below 

<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
		<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
		<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
		<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

in the case IE6,we can’t handle totally with seperate CSS file fix like above example,it needs some layout tweaks also.

We can show elements with conditions as below specified. 

<![if!IE]>
This shows up in anything but IE
<![endif]>

It is better to avoid special characters in selecter name like "_","-",even they support mostly browsers.

Hadling CSS fixes with special selectors

Only IE6 and below
* html {}

IE7 and below

*:first-child+html {} * html {}

IE7 only

*:first-child+html {}

IE7 and Modern Browsers only
html>body {}

Recent Opera versions 9 and below

html:first-child {}

]]> http://www.maheshchari.com/ie-css-hack-reference/feed/ 0 css image rollover http://www.maheshchari.com/css-image-rollover/ http://www.maheshchari.com/css-image-rollover/#comments Tue, 23 Jun 2009 17:25:05 +0000 mahesh chari http://www.maheshchari.com/?p=210 image rollover effect with css background image

Here we use basic css back ground image to get rollover effect.the logic is simple and we can find it in comments in script itself.

  • we create a empty link
  • set back ground as test1.jpg and display to block and height and width to 150px.
  • build a suido selctor hover to link and set back ground image to test2.jpg
  • this works even javascript disabled browsers also

Download Script

image-rollover-css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
<title>image rollover with css</title>
<style type="text/css">
<!--
#imagerollover a {
	background-image: url(test2.JPG);
	display: block;
	background-repeat: no-repeat;
	height: 150px;
	width: 150px;
}
#imagerollover a:hover{
	background-image: url(test1.JPG);
}
-->
</style>
</head>
<body>
<div id="imagerollover"><a href="#test">&nbsp;</a></a></div>
</body>
</html>

Download Script

image-rollover-css

]]> http://www.maheshchari.com/css-image-rollover/feed/ 1 css opacity tutorial http://www.maheshchari.com/css-opacity-tutorial/ http://www.maheshchari.com/css-opacity-tutorial/#comments Wed, 10 Jun 2009 13:23:40 +0000 mahesh chari http://www.maheshchari.com/?p=174 tutorial for Cross Browser Compatible CSS opacity

At earlier stage of CSS the opacity property of element is big issue to make compatible with all browsers.but now CSS3 almost modern browsers support this property.Even though it takes time to rule CSS3 the web world.Here we see example.

Download Source Code

css-opacity-source code-example

CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.toggleopacity img {
	filter:alpha(opacity=50); 
	-moz-opacity:0.5;
	opacity:0.5;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
 
.toggleopacity:hover img {
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

HTML Code

1
2
3
4
5
6
7
8
9

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS opacity tutorials and example</title>
</head>
<body>
<a href="#yourlink" class="toggleopacity"> <img src="round.jpg" alt="My round" width="32" height="32" /> </a> <a href="#yourlink" class="toggleopacity"> <img src="round.jpg" alt="My round" width="32" height="32" /> </a>
</body>
</html>

Setting Opacity of element with Javascript

Below Javascript function set the element opacity to at desired level for given element.
if opacity is 0 specified ,it hides the element as there no need to display the element further.

function changeOpac(opacity, id) {
	var object = document.getElementById(id).style;
	if(opacity == 0)
	{ object.display = 'none'; }
	else
	{ object.display = 'block'; }
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}

Download Source Code

css-opacity-source code-example

]]> http://www.maheshchari.com/css-opacity-tutorial/feed/ 1 round corners with css sprites http://www.maheshchari.com/round-corners-with-css-sprites/ http://www.maheshchari.com/round-corners-with-css-sprites/#comments Wed, 10 Jun 2009 12:18:00 +0000 mahesh chari http://www.maheshchari.com/?p=158 round corners with css sprites

We know that all modern web browsers supports rounded corner elements but it doesn’t work in IE6.we know that all majority users are IE6 after the fire fox in organizations.here we use CSS sprites technique ,we already discussed about the advantage of the CSS sprites in my previous post.

css-sprite-rounded-corner-example

Steps

Download Script/Source Code
here we make the 16degrees rounded corners.for that we use 32×32px(twice the corner size) circle image as shown below.
example image with 32x32px size
we create four corner divs in a container divs and place them at every corner and with a given image is back ground.
Below example is self explanatory with comments in it. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Round Corners With CSS</title>
<style type="text/css">
<!--
.roundeddiv { 
	width: 400px;
	position: relative;
	background-color: #006702;
	padding: 0px;
	display: block;
}
<!-- Here we use on class common for all corners that shares commen properties-->
.corner {
	background-image: url(round.jpg);
	position: absolute;
	height: 16px;
	width: 16px;
	background-repeat: no-repeat;
	overflow: hidden;
	z-index: 1;
	margin: 0px;
	padding: 0px;
}
h3 {
	margin: 0px;
	padding: 0px;
}
 
.container {
	position: relative;
	padding: 16px;
}
<!-- we come from top right as anti clock wise -->
<!-- Top Right Corner  -->
.tr {
	top: 0px;
	right: 0px;
	background-position: -16px 0px;
}
<!--Bottom Right Corner -->
.br {
	right: 0px;
	bottom: 0px;
	background-position: -16px -16px;
}
 
<!--Bottom Left Corner -->
.bl {
	left: 0px;
	bottom: 0px;
	background-position: 0px -16px;
}
<!--Top Left Corner -->
.tl {
	background-position: 0px 0px;
	left: 0px;
	top: 0px;
}
 
-->
</style>
</head>
<body>
<div class="roundeddiv">
<!-- start corner divs -->
  <div class="corner tr"></div>
  <div class="corner bl"></div>
  <div class="corner br"></div>
  <div class="corner tl"></div>
<!-- end corner divs -->
<!-- start content -->
  <div class="container">
    <h3>Rounded Corners Example </h3>
    <h3>Rounded Corners with CSS sprites Tutorials. </h3>
  </div>
<!-- end content -->
</div>
</body>
</html>

Download Script/Source Code

]]> http://www.maheshchari.com/round-corners-with-css-sprites/feed/ 0 css sprites image preloding http://www.maheshchari.com/css-sprites-image-preloding/ http://www.maheshchari.com/css-sprites-image-preloding/#comments Tue, 26 May 2009 12:36:17 +0000 mahesh chari http://www.maheshchari.com/?p=101 Image pre loading with css and image sprites

We discussed image pre loading with javascript in my previous post.but it can’t be use full when javascript disabled browsers (off course use disables).So i got one idea how to implement without javascript for image preloading .

With Hidden Div Element

here the trick ,we know that browser loads all the assets (images,audio,embed elements ) as they appear in the HTML document.So we create a dive and hide and make it null style element .put the images which you want to load .

using css image sprites

for tri state button we need three image for each state (normal, hover, focus) by default we load normal image back ground. when we hove first time the second image loaded . so we use images sprites. as shown

Sample Sprite image for tri state buttons

Sample Sprite image for tri state buttons

Download Example Source code

image-preloading-with-css-sprites source code

Example for HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Preloading With CSS and Sprites</title>
</head>
<body>
<!--
please visit for detailed tutorial http://www.maheshchari.com
Here we use simple trick ,it work even without javascript
first create a div element with given style attributes specified above.
include the images  which to be preloaded.
remember put this div after the body tag,
since this element is first rendered,
all the images are loaded before they used
 -->
 image-preloading-with-css-sprites
<div id="preloader_div"> <img src="amphi-thetre.jpg" /> <img src="amphi-thetre1.jpg" /> <img src="amphi-thetre2.jpg" /> <img src="amphi-thetre3.jpg" /><img src="ex-sprite.png" /></div>
<div id="wrapper">begin your work here.</div>
<h3>Preloading with images sprites example tri state button.</h3>
<ul id="tributtons">
  <li><a href="http://www.maheshchari.com/">button1</a> </li>
  <li><a href="http://www.maheshchari.com/">button2</a> </li>
  <li><a href="http://www.maheshchari.com/">button3</a> </li>
</ul>
</body>
</html>

Css sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<style type="text/css">
<!--
 
#preloader_div {
	display: none; 
	height: 0px;
	width: 0px;
	margin: 0px;
	padding: 0px;
	position: absolute;
}
<!-- tri state buttons -->
#tributtons {
	list-style-type: none;
}
#tributtons a,a:visited {
	display: block;
	background-image: url(ex-sprite.png); 
	background-repeat: no-repeat;
	background-position: 0px 0px;
	width: 150px;
	height: 24px;
	text-decoration: none;
	text-align: center;
	text-transform: capitalize;
}
#tributtons a:hover {
	background-position: 0px -24px;
}
#tributtons a:focus {
	background-position: 0px -48px;
}
 
-->
</style>

Download Example Source code

image-preloading-with-css-sprites source code

]]> http://www.maheshchari.com/css-sprites-image-preloding/feed/ 6