Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera

Jayakumar 3/12/2010

CSS hacks take advantage of browser bugs for hiding CssRules from specific web browsers. Listed below are the hacks for major browsers like ie6, ie7, firefox2, firefox3, Google chrome, safari and opera.

Inline Hack for IE
* (star) can be used as the inline hack for both ie6 and ie7.

For Example:
Syntax: .selector{*property:value;}
.logo{*margin-left:10px;}

IE6 browser inline Hack
_ (underscore) can be using only for ie6

For Example:
Syntax: .selector{_property:value;}
.logo{_margin-left:10px;}

Firefox inline style
content:"\"/*" can be used for firefox only where IE cannot recognize it.

Internal Style
Use * html for ie6 and *+html hack for ie7

For Example:
Synatax: * html .selector{property:value;} , * + html .selector{property:value;}

* html .logo{margin-left:10px;} for ie6
* + html .logo{margin-left:20px;} for ie7

IE7 and Firefox browser Hack
Use html>body hack for ie7 and firefox.

For Example:
Syntax: html>body .selector{property:value;}

html>body .logo{margin-left:10px} will take only in ie7 and firefox

Mordern browser Hack or Firefox Hack
Use html>/**/body {} hack which will support only in both firefox2 and firefox3.

For Example:
Syntax: html>/**/body .selector{property:value;}

html>/**/body .logo{margin-left:10px} will take only in firefox.

Browser hack for Opera versions 9 and below
Use html:first-child {} for opera browser. Also you use
Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}

For Example:
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} only for opera

Firefox3 browser hack
Use html>/**/body .selector, x:-moz-any-link, x:default {property:value;} for firfox3 only.

For Example:
Syntax: html>/**/body .pro_yl, x:-moz-any-link, x:default {background:red;}

Google Chrome browser hack
Use body:nth-of-type(1) .elementOrClassName{property:value;} only for google chrome.

For Example:
body:nth-of-type(1) .logo{margin:20px;}

Safari browser hack
Use Syntax: body:first-of-type .elementOrClassName{property:value;}

Fox Example:
body:first-of-type .logo{margin-top:10px;} only for safari.

Hope this information will be useful for you.

Difference between HTML,DHTML and XHTML

Jayakumar 3/11/2010

* HTML - HyperText Markup Language
* DHTML - Dynamic HyperText Markup Language
* XHTML - eXtended HyperText Markup Language

The first is the basic markup language used to create web pages. The current (and last) version is HTML 4.01, as specified by the W3C (World Wide Web Consortium).

The second is an unoffical name(DHTML). It normally means HTML combined with JavaScript and CSS to provide greater response to user action (such as mousing over an image and triggering some event like the appearance of a menu).

The third is the future (and it's here now). XHTML 1.0 is HTML reformulated according to the rules of XML (eXtensible Markup Language). It's almost identical to HTML 4.01, but follows stricter rules, such as all tags being in lowercase, no missing end tags, all attributes in quotes, etc.

The reason we use XHTML in Foundation Dreamweaver MX 2004 (and in all recent foED books) is to help you build sites that adhere to the latest standards, so there is less chance of them becoming obsolete in the future. XHTML cannot do anything *extra*, but learning to build sites using the stricter rules that it follows means you are less likely to build sites that fall apart in new browsers.

Multiple Buttons in a single image Verticaly and Horizontally

Jayakumar 3/11/2010 Multiple Buttons in a single image Verticaly and Horizontally

HTML codings

<li class="clsStatus"><a href="#">Status</a></li>

<li class="clsMusic"><a href="#">Music</a></li>

<li class="clsBillboard"><a href="#">Billboard</a></li>

<li class="clsPhotos"><a href="#">Photos</a></li>

<li class="clsBlog"><a href="#">Blog & Announcements</a></li>

<li class="clsFrients"><a href="#">Friends</a></li>

<li class="clsComments"><a href="#">Comments</a></li>

<li class="clsMessage"><a href="#">Message</a></li>

<li class="clsProfile"><a href="#">Profile</a></li>

<li class="clsShow"><a href="#">Shows</a></li>

<li class="clsAccount"><a href="#">Account</a></li>

<li class="clsSupport"><a href="#">Support</a></li>

</ul> 
 
trywelcome 
 
</div> 
</div> 
</div> 
</body> 
</html>

Css codings

#selBodyContent 
{ 
 
margin:0 auto; 
width:980px; 
* height:975px; 
height:935px; 
background:repeat-x #fff; 
 
} 
.clsClearFix 
{ 
overflow:auto; 
zoom:1; 
} 
* html .clsClearFix 
{ 
height:1%; 
overflow:visible; 
} 
 
/* One image multiple buttons*/ 
 
#selBodyContent 
{ 
 
margin:0 auto; 
width:932px; 
* height:975px; 
height:935px; 
background:repeat-x #fff; 
 
} 
/*-- Hacks used for floating problem --*/ 
.clsClearFix 
{ 
overflow:auto; 
zoom:1; 
} 
* html .clsClearFix 
{ 
height:1%; 
overflow:visible; 
} 
.clssubheader 
{ 
width:932px; 
height:72px; 
 
} 
 
 
#navigation 
{ 
 
text-align:center; 
 
} 
#navigation a:link, .navigation a:active, .navigation a:visited 
{ 
color:#C39C70; 
display:block; 
float:left; 
font-size:90%; 
font-weight:bold; 
 
text-align:center; 
text-decoration:none; 
} 
#navigation a 
{ 
 
height:72px; 
float:left; 
text-align:center; 
display:block; 
color:#c39c70; 
text-decoration:none; 
font-weight:bold; 
font-size:90%; 
background:url(../images/image-a.jpg) no-repeat; 
} 
#navigation a:hover 
 
{ 
 
margin-right:0px; 
height:72px; 
float:left; 
text-align:center; 
display:block; 
color:#c39c70; 
text-decoration:none; 
font-weight:bold; 
font-size:90%; 
background:url(../images/image-a-hover.jpg) no-repeat; 
} 
#navigation .home a 
{ 
background-position: 0px 0 ; 
width:95px; 
} 
#navigation .home a:hover 
{ 
background-position: 0px 0; 
width:95px; 
} 
#navigation .articles a 
{ 
background-position: -110px 0; 
width:100px; 
} 
 
#navigation .articles a:hover 
{ 
background-position: -110px 0; 
width:100px; 
} 
#navigation .rss a 
{ 
background-position: -220px 0; 
width:145px; 
} 
#navigation .rss a:hover 
{ 
background-position: -220px 0; 
width:145px; 
}	 
#navigation .contact a 
{ 
background-position: -370px 0; 
width:160px; 
} 
#navigation .contact a:hover 
{ 
background-position: -370px 0; 
width:160px; 
} 
#navigation .rss1 a 
{ 
background-position: -550px 0 ; 
widtH:245px; 
} 
#navigation .rss1 a:hover 
{ 
background-position: -550px 0 ; 
widtH:245px; 
}	 
 
 
 
#navigation .contact1 a 
{ 
background-position: -815px 0; 
widtH:120px!important; 
} 
#navigation .contact1 a:hover 
{ 
background-position: -815px 0; 
widtH:120px!important; 
}	 
 
/*Multiple buttons in a single image s*/ 
 
 
.clsSubMenu{ 
width:275px; 
} 
.clsSubMenu ul{ 
padding:5px 50px 0 18px; 
line-height:28px; 
} 
.clsSubMenu ul li{ 
background:url(../images/clsBlogTable-bottomBorder.gif) repeat-x bottom left; 
list-style:none; 
padding:5px 0; 
} 
.clsSubMenu ul li a{ 
outline:none; 
text-decoration:none!important; 
color:#646464; 
} 
 
.clsSubMenu .clsArtHome a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 0; 
padding:5px 0 5px 40px; 
} 
.clsSubMenu .clsArtHome a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 0; 
padding:5px 0 5px 40px; 
} 
 
.clsSubMenu .clsStatus a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -55px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsStatus a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -55px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsMusic a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -83px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsMusic a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -83px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsVideo a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -109px; 
padding:5px 0 2px 40px; 
} 
.clsSubMenu .clsVideo a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -109px; 
 
 
padding:5px 0 2px 40px; 
} 
.clsSubMenu .clsBillboard a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -135px; 
padding:5px 0 2px 40px; 
} 
.clsSubMenu .clsBillboard a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -135px; 
padding:5px 0 2px 40px; 
} 
.clsSubMenu .clsPhotos a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -161px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsPhotos a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -161px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsBlog a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -187px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsBlog a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -187px; 
padding:5px 0 0 40px; 
} 
 
.clsSubMenu .clsFans a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -211px; 
padding:5px 0 3px 40px; 
} 
.clsSubMenu .clsFans a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -211px; 
padding:5px 0 3px 40px; 
} 
.clsSubMenu .clsFrients a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -238px; 
padding:5px 0 3px 40px; 
} 
.clsSubMenu .clsFrients a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -238px; 
padding:5px 0 3px 40px; 
} 
.clsSubMenu .clsComments a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -270px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsComments a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -270px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsMessage a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -292px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsMessage a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -292px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsProfile a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -316px; 
padding:5px 0 3px 40px; 
} 
.clsSubMenu .clsProfile a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -316px; 
padding:5px 0 3px 40px; 
} 
.clsSubMenu .clsAccount a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -344px; 
padding:5px 0 2px 40px; 
} 
.clsSubMenu .clsAccount a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -344px; 
padding:5px 0 2px 40px; 
} 
 
.clsSubMenu .clsShow a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -373px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsShow a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -373px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsTransaction a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -25px; 
padding:4px 0 10px 40px; 
} 
.clsSubMenu .clsTransaction a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -25px; 
padding:4px 0 10px 40px; 
} 
.clsSubMenu .clsSupport{ 
border-bottom:0; 
background:none!important; 
} 
.clsSubMenu .clsSupport a{ 
 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -399px; 
padding:5px 0 3px 40px; 
} 
.clsSubMenu .clsSupport a:hover{ 
 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -399px; 
padding:5px 0 3px 40px; 
} 
 
p{ 
background:#000000 none repeat scroll 0 0; 
color:#0099FF; 
font-family:Tahoma,"Trebuchet MS",Arial,serif; 
font-size:18px; 
font-size-adjust:none; 
font-stretch:normal; 
font-style:normal; 
font-variant:normal; 
font-weight:bold; 
line-height:25px; 
padding:0 0 0 10px; 
position:relative; 
} 
span{ 
color:#FFCC00; 
font-family:Arial,serif; 
font-size:17px; 
font-size-adjust:none; 
font-stretch:normal; 
font-style:normal; 
font-variant:normal; 
font-weight:bold; 
line-height:normal; 
padding:5px 0 0; 
position:absolute; 
right:10px; 
}

Horizontal Buttons image:Before Mouseover

Horizontal Buttons image:After Mouseover

Vertical Buttons image:Before Mouseover

Vertical Buttons image:After Mouseover

CSSBags: Multiple Buttons in a single image Verticaly and Horizontally

Jayakumar 1/16/2009

CSSBags: Multiple Buttons in a single image Verticaly and Horizontally

Positioning the Image

Jayakumar 1/05/2009 Positioning the Image using css

HTML Codings

<head> 
<link href="css/css.css" type="text/css" rel="stylesheet" /> 
</head> 
<body> 
<table class="clsProfileTable"><tbody> 
<tr> 
<td class="clsProfileImage"><a href="http://cssbags.blogspot.com"> <img height="90" width="90" alt="img" src="images/suriya.jpg"/> </a> <a title="Click here Goto Profile page" href="http://cssbags.blogspot.com"> </a> </td> 
<td><h3>uyuyguydgsvabihf</h3> 
Diwali 2008 
 
Diwali, information and links. ... Wish your family and friends "Shubh Diwali!" here on diwali.nl and mail to info@diwali.nl. Diwali ... 
<a title="Click here Goto Blog" href="http://cssbags.blogspot.com">Check it out!</a> </td> 
</tr>

</tbody> 
</table> 
<table class="clsNewMembersList"><tbody> 
<tr> 
<td class="clsProfileImage"> <a href="http://cssbags.blogspot.com"> <img height="85" width="85" alt="img" src="images/suriya.jpg"/> </a> <a title="Click here Goto Profile page" href="http://cssbags.blogspot.com"> <a class="clsProfilename" href="#">jai</a></td> 
<td><h3>uyuyguydgsvabihf</h3> 
Diwali 2008 
Diwali, information and links. ... Wish your family and friends "Shubh Diwali!" here on diwali.nl and mail to info@diwali.nl. Diwali ... 
<a title="Click here Goto Blog" href="http://cssbags.blogspot.com">Check it out!</a> </td> 
</tr>

</tbody> 
</table> 
<table class="clsProfile"><tbody> 
<tr> 
<td class="img"> 
<div class="imga"><a href="./blogs_full.php?id=1"> 
<img height="85" width="85" alt="" src="images/suriya.jpg"/></a><a href="./blogs_full.php?id=1"> 
 </a> 
</div> 
</td> 
<td> 
<h3>Diwali 2008</h3> 
Diwali, information and links. ... Wish your family and friends "Shubh Diwali!" here on diwali.nl and mail to info@diwali.nl. Diwali 2008 : Do you organise ... 
<a href="./blogs_full.php?id=1">read more</a> 
</td> 
</tr>

</tbody> 
</table> 
</body>

Image for 90X90 and 85X85 size

Background image for 90X90 size

Background image for 85X85 size

CSS Codings

/* CSS Document */ 
.clsProfileTable, .clsNewMembersList { 
width:98%; 
} 
.clsProfileTable .clsProfileImage span { 
background:transparent url(../images/Profile-img-bg.png) no-repeat scroll 0 0; 
bottom:104px; 
display:block; 
height:104px; 
margin:0 0 -106px -3px; 
position:relative; 
width:104px; 
} 
.clsNewMembersList .clsProfileImage span { 
background:transparent url(../images/profile_h2NewPeople_bg.png) no-repeat scroll 0 0; 
bottom:94px; 
display:block; 
height:90px; 
margin:0 0 -106px; 
position:relative; 
width:90px; 
} 
.clsNewMembersList .clsProfilename p{ 
font:bold 12px Arial, Helvetica, sans-serif; 
color:red; 
text-align:center; 
margin:15px 35px 0 0; 
 
} 
.clsProfile{ 
position:relative; 
table-layout:fixed; 
width:98%; 
} 
.clsProfile td.img { 
width:133px; 
} 
.imga { 
height:117px; 
position:relative; 
width:116px; 
} 
.imga span { 
background:transparent url(../images/profile_h2NewPeople_bg.png) no-repeat scroll 0 0; 
display:block; 
height:117px; 
left:0; 
position:absolute; 
top:0; 
width:116px; 
} 
#sitemap { 
font:normal 16px Arial,sans-serif; 
overflow:hidden; 
} 
#sitemap ul { 
list-style:none; 
margin:0; 
padding:0; 
} 
#sitemap li { 
background-color:#eee; 
margin:0 0 -0.1em; 
min-height:1em; 
padding:.2em .4em; 
position:relative; 
width:9em; 
} 
#sitemap ul ul { 
font-size:90%; 
margin-top:-1.4em; 
} 
#sitemap ul ul li { 
background:#ddd; 
 
 
border-top:0.5em solid #fff !important; 
border-left:0.5em solid #66c; 
left:10.4em; 
} 
#sitemap ul ul ul li { 
background:#ccc; 
border-color:#9c3; 
} 
#sitemap ul ul ul ul li { 
background:#bbb; 
border-color:#c93; 
} 
#sitemap ul ul ul ul ul li { 
background:#999; 
border-color:#c33; 
color:#fff; 
} 
#mainNav.fiveStep li { 
width:182px; 
} 
#mainNav li.current { 
background-color:#C36615; 
background-image:url(../images/1st.gif); 
} 
#mainNav li { 
background-color:#EBEBEB; 
background-image:url(images/navBtn.gif); 
background-position:right top; 
background-repeat:no-repeat; 
float:left; 
height:71px; 
list-style-image:none; 
list-style-position:outside; 
list-style-type:none; 
} 
#mainNav li.lastDone a, #mainNav li.lastDone a:link, #mainNav li.lastDone a:visited, #mainNav li.lastDone a:hover, #mainNav li.lastDone a:active, #mainNav li.current a, #mainNav li.current a:link, #mainNav li.current a:visited, #mainNav li.current a:hover, #mainNav li.current a:active, #mainNav li.done a, #mainNav li.done a:link, #mainNav li.done a:visited, #mainNav li.done a:hover, #mainNav li.done a:active { 
color:#FFFFFF; 
} 
#mainNav li a, #mainNav li a:link, #mainNav li a:visited, #mainNav li a:hover, #mainNav li a:active { 
color:#CCCCCC; 
} 
body * { 
line-height:1.22em; 
}

Result becomes like this.....

Horizontal Submenu with Effects

Jayakumar 1/05/2009 Horizontal Submenu with Effects

}

#links {
position: relative;
margin: 0 auto;
left: 0;
width:900px;
height: 125px; 
font: 16px Verdana, sans-serif;

}
#links li{
FLOAT:LEFT;
WIDTH:166PX;
list-style:NONE;
}
#links li a {
display: block;
text-align: center;
font: bold 1em sans-serif;
padding: 5px 10px;
margin: 0 0 1px;
border-width: 0;
text-decoration: none; 
color: #CCC;
background: #444;
border-right: 5px solid #505050;
}
#links li a:hover {
color: #411;
background: #FFF;
border-right: 5px double #999;}

#links li a span{
display: none;
}
#links li a:hover .home{
display: block;
position: absolute;
left: 30px;
width: 125px;
padding: 5px;
margin: 10px 10px 10px 15px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
#links li a:hover .interest{
display: block;
position: absolute;
left: 145px;
width: 145px;
padding: 5px;
margin: 10px 10px 10px 65px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
#links li a:hover .collection{
display: block;
position: absolute;
left:320px;
width: 125px;
padding: 5px;
margin: 10px 10px 10px 65px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
#links li a:hover .techno{
display: block;
position: absolute;
left: 485px;
width: 125px;
padding: 5px;
margin: 10px 10px 10px 65px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
#links li a:hover .meals{
display: block;
position: absolute;
left: 700px;
width: 125px;
padding: 5px;
margin: 10px;
color: #999; 
background: #000;
font: 10px Verdana, sans-serif;
text-align: center;
}
</style> 
</head> 
 
<body> 
<div id="links"> 
<ul><li> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Home The main page of the site-- a jumping-off point, as it were-- and not actually a picture of our house</a></li>

<li> 
<li><a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Links A collection of things which interest me, and might interest you</a></li> 
 
<li><a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Away A collection of things which interest me, and might interest you</a></li> 
 
<li><a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">techno He's been called "an internationally recognized expert," but then he's also been called a "techno-fascist"</a></li> 
 
<li><a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Meals She cooks fabulous meals, she throws great parties, she helps women deliver their babies-- what can't she do?</a></li>

Result becomes like this...

Vertical SubMenu with Effects

Jayakumar 1/05/2009 Vertical SubMenu with Effects

#links {
position: relative;
margin:0 auto;
top: 10px;
left: 0;
width: 166px;
height: 500px; 
font: 16px Verdana, sans-serif; 
z-index: 100;
}
#links a {
display: block;
text-align: center;
font: bold 1em sans-serif;
padding: 5px 10px;
margin: 0 0 1px;
border-width: 0;
text-decoration: none; 
color: #CCC;
background: #444;
border-right: 5px solid #505050;
}
#links a:hover {
color: #411;
background: #FFF;
border-right: 5px double #999;}
#links a span{
display: none;
}
#links a:hover span{
display: block;
position: absolute;
top: 180px;
left: 0;
width: 125px;
padding: 5px;
margin: 10px;
color: #999; 
background: black;
font: 10px Verdana, sans-serif;
text-align: center;
}
</style> 
</head> 
<body> 
<div id="links"> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Home The main page of the site-- a jumping-off point, as it were-- and not actually a picture of our house</a> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Links A collection of things which interest me, and might interest you</a> 
<a href="http://cssbags.blogspot.com/">Away A collection of things which interest me, and might interest you</a> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">techno He's been called "an internationally recognized expert," but then he's also been called a "techno-fascist"</a> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Meals She cooks fabulous meals, she throws great parties, she helps women deliver their babies-- what can't she do?</a> 
<a href="http://cssbags.blogspot.com/2009/01/vertical-submenu-with-effects.html">Other Inevitably, there's stuff that doesn't fit in with other stuff, so we stuffed it all into this page of random stuff</a> 
</div>

Result becomes like this...

Subscribe to: Posts ( Atom )

Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera

Difference between HTML,DHTML and XHTML

Multiple Buttons in a single image Verticaly and Horizontally

HTML codings

Css codings

Horizontal Buttons image:Before Mouseover

Horizontal Buttons image:After Mouseover

Vertical Buttons image:Before Mouseover

Vertical Buttons image:After Mouseover

CSSBags: Multiple Buttons in a single image Verticaly and Horizontally

Positioning the Image

HTML Codings

Image for 90X90 and 85X85 size

Background image for 90X90 size

Background image for 85X85 size

CSS Codings

Result becomes like this.....

Horizontal Submenu with Effects

Result becomes like this...

Vertical SubMenu with Effects

Result becomes like this...

About Author

Blog Archive

Popular Posts

Followers

Translate

JOIN THE TEAM