Comprehensive List of Browser-Specific CSS Hacks

Border-radius Shorthand Syntax

border-radius Shorthand Syntax :

Resolved: The border-radius shorthand shall take 1–4 values that set each of the four corners to circular radii, as in the -moz-border-radius shorthand. That is,

border-radius: TL TR BR BL;
border-radius: TL BL+TR BR;
border-radius: TL+BR TR+BL;
border-radius: ALL;

Bascially the syntax is TL TR BR BL (clockwise from top-left) and missing values are filled in by repeating the pattern, just as with border-style et al.

Rationale: The WG concludes from comments such as those on css3.info and from evaluating commonly-used effects such as tabs that designers are more likely to set different circular rounding effects on each corner than they are to set a common elliptical effect on all four corners. Therefore the border-radius shorthand should cater foremost to this usage.

IE browser Hacks

5 Tips of Defining Vertical Centering With CSS Tags:

5 Tips of Defining Vertical Centering With CSS Tags:

There are a multiple ways to defining vertical centering objects with CSS, but it can be difficult to select the easiest one. I’m going to share you all the best ways I’ve seen.

Vertical centering with CSS is not a every's cup of tea. There are many different ways that may not compatible with some browsers. Let’s review 5 different ways to vertically centering objects:

Method 1
 
This method sets some

Mozilla implements @font-face

Mozilla implements @font-face

Mozilla employee John Daggett has provided some try‐out builds of Firefox with support for the @font-face from CSS3’s web-fonts module. Currently available for Windows and Mac only—no Linux build yet—there remain several caveats as described in his comment on bug 70132, the most important of which being that the same‐site origin restriction is turned on by default, which means that most examples on the web will not work until you turn it off.

CSS3 Pseudo-Class Selectors Emulation in Internet Explorer

CSS3 Pseudo-Class Selectors Emulation in Internet Explorer

Keith Clark, an independent web developer from the UK, has developed a JavaScript solution to IE’s CSS3 shortcomings in relation to CSS3 selectors. CSS3 selectors became the first W3C module to reach proposed recommendation status back in December 2009.
His ie-css3.js project (currently in beta) allows Internet Explorer, versions 5 through 8, to identify CSS3 pseudo-class selectors and render any style rules defined with them. All this is achieved by simply including the script, along with Robert Nyman’s DomAssistant, within the head element of your web pages.

Supported Pseudo-Classes

• :nth-child
• :nth-last-child
• :nth-of-type
• :nth-last-of-type
• :first-child
• :last-child
• :only-child
• :first-of-type
• :only-of-type
• :empty

Limitations of the project

• Style sheets MUST be added to the page using atag. Page level stylesheets or inline styles won’t work. You can still use @import in your style sheets.
• Style sheets MUST be hosted on the domain as the page.
• Style sheets using file:// protocol will not work due to browser security restrictions.
• The :not() pseudo-class is not supported.
• The emulation is not dynamic. Once the styles are applied they are fixed so changes to the DOM won’t be reflected.

How does it work?

ie-css3.js downloads each style sheet on the page and parses it for CSS3 pseudo-class selectors. If a selector is found it’s replaced by a CSS class of a similar name. For example: div:nth-child(2) will become div._iecss-nth-child-2. Next, Robert Nyman’s DOMAssistant is used to find the DOM nodes matching the original CSS3 selector and the same CSS class is applied them.
Finally, the original stylesheet is replaced with the new version and any elements targeted with CSS3 selectors will be styled.

Bypassing IE’s CSS parser

In accordance with the W3C specs, a web browser should discard style rules it doesn’t understand. This presents a problem — we need access to the CSS3 selectors in the style sheet but IE throws them away.
To avoid this issue each style sheet is downloaded using a XMLHttpRequest. This allows the script to bypass the browsers internal CSS parser and gain access to the raw CSS file.

Find out more and Download

ie-css3.js is released under the MIT License and can be downloaded from the project page on Keith Clark’s website.
You’ll also need to download Robert Nyman’s DOMAssistant.

Transcending CSS

For web designers who know some code there is plenty of forward thinking material about the importance of semantic HTML; for coders with an eye for design there is lots of food for thought about colour, style and inspiration; for everyone, there are some genuinely innovative tips on using CSS to tie it all together.

The mark of a good book is that you learn something when you read it (Jeffrey Zeldman’s Designing With Web Standards is a good example); I’ve been coding HTML and CSS for eight years and there were still tutorials in here that made me think afresh about the subject, and some tips that I’ve assumed into my arsenal.
Of most interest to readers of this site will be the section on CSS3. Included are a look at some of the new selectors, the background and border modules, multi-column layouts and, most excitingly, a way to see the advanced layout module in action.
There are plenty of examples and exercises, and the book is lavishly laid out and illustrated. That alone would make it a good buy, but the look at CSS3 is what really made it for me.
I’m presuming by the fact that you’re reading this site that you’re interested in the evolution of standards and how web development is moving forward; that being the case, I can wholeheartedly recommend this book to you.

CSS3 Resource: Preview Custom Web Fonts with Font Dragr

CSS3 Resource: Preview Custom Web Fonts with Font Dragr

Font Dragr is a HTML5/CSS3 powered web app for testing custom web fonts. The app allows you to drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts into the webpage for an instant preview of how the font will be rendered in the browser, you can even edit the example text.



This useful app allows web designers to preview how embeddable fonts will render in their target browsers without having to code a single line of html/css and without having to upload any files via ftp. Unfortunately, however, at present compatibility is limited to Firefox 3.6+, due to the apps reliance upon Firefox’s drag and drop functionality, however the author promises compatibility with other browsers as they add support.
The app also boasts a number of CSS3 features in it’s design including:

• Custom fonts with @font-face
• Gradients
• Rounded corners using border-radius
• Drop shadows with text-shadow & box-shadow
• Attribute and pseudo selectors
• Multiple border colours
• Box model adjust using box-sizing

Give it a try for yourself at: http://labs.thecssninja.com/font_dragr/

Online Tools for Cross-browser CSS3 Rule Generation

Online Tools for Cross-browser CSS3 Rule Generation

This week has seen the announcement of a couple of new online tools for generating cross-browser CSS3 rules, CSS3 Please! and CSS3 Generator.
CSS3 Please!, produced by Paul Irish and Jonathon Neal, aims to simplify the design process by allowing designers to enter one value, and have this instantly synced and normalised for each vendor-specific prefix, with the corresponding code generated automatically.
The tool offers support for border-radius, box-shadow, linear-gradients, rotation, rgba colors and @font-face, with work underway on support for skew and scale. In some circumstances the tool also offers support for Internet Explorer using IE filters to replicate the same effects as achieved by CSS3 properties. CSS3 Please! has been gaining a significant amount of interest around the blogosphere since its launch earlier this week.

This week has seen the announcement of a couple of new online tools for generating cross-browser CSS3 rules, CSS3 Please! and CSS3 Generator.
CSS3 Please!, produced by Paul Irish and Jonathon Neal, aims to simplify the design process by allowing designers to enter one value, and have this instantly synced and normalised for each vendor-specific prefix, with the corresponding code generated automatically.
The tool offers support for border-radius, box-shadow, linear-gradients, rotation, rgba colors and @font-face, with work underway on support for skew and scale. In some circumstances the tool also offers support for Internet Explorer using IE filters to replicate the same effects as achieved by CSS3 properties. CSS3 Please! has been gaining a significant amount of interest around the blogosphere since its launch earlier this week.


Another online CSS3 rule generator to brought to light this week, although perhaps not so well known, is Randy Jensen’s CSS3 Generator, which offers a drop down menu with subsequent options to generate and customise rules for a wide selection of CSS3 properties and functionality including border-radius, shadow, text-shadow, rgba colors, @font-face, multiple columns, box sizing and more.

Whilst these are not the first online rule generators for CSS3, westciv.com for example offers several online tools for generating rules for a selection of CSS3 properties, CSS3 Please! and the CSS3 Generator do however offer two of the most comprehensive solutions to date, particularly with regard to cross-browser compatibility, and with both still being in their infancy I’m excited to see how they develop in the future.

CSS3 Selectors Test

Is your browser compatible?

After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each selector to see the results, including a small example and explaination for each of tests.
Because it is technically not possible to simulate certain user interactions the test is limited to selectors that are not dependant on user interactions. So this testsuite does not include tests for the following selectors: :hover, :active, :focus and :selection.

Start the test…

CSS3 Previews

Many exciting new functions and features are being thought up for CSS3. We will try and showcase some of them on this page, when they get implemented in either Firefox, Konqueror, Opera or Safari/Webkit.
Here they are:

Blogger FTP to Custom Domain Migration

Blogger has officially announced that it would be shutting down the FTP publishing feature on March 26 2010. So the existing FTP publishers are advised to move onto Blogger Custom Domains.If you are not currently using the FTP publishing option, you can just skip this tutorial :)
Blogger has already posted about the advantages of custom domains.

Where do you currently publish your FTP blogger blog ?

1.If you are publishing at a root level domain or sub-domain, then the things are pretty easy. (eg. www.yourblog.com or blog.yourdomain.com).

2.If you are publishing your blog at some subfolder within your domain or subdomain(www.yourdomain.com/blog), then you can no longer host your blog at that address, because Custom Domains can be setup at root domain or sub-domains only.Blogger will soon release a migration tool which will help you in properly redirecting such blogs.

Can i get rid of my web-host?
If you are hosting your blog at a root level domain or sub-domain and not inside a directory and if you are have not published any images via FTP(images are hosted on other sites like flickr), then you no longer need a web-host.

Migrating www.yourblog.com (FTP) to www.yourblog.com  (Custom Domain)

Note:- The following steps can also be used to migrate a sub-domain from FTP to Custom domain(ie blog.yourdomain.com from FTP to Custom Domain).  This method cant be used for migration of a blog located at www.yourdomain.com/blog or subdomain.yourdomain.com/blog
1. When you move your blog to a custom domain, you will have to  move all the images to a different sub-domain on your server
2.Create a new sub-domain like files.yourblog.com and move all your images to this sub-domain (For example www.yourblog.com/uploaded_images/image1.jpg should now be accessible at files.yourblog.com/uploaded_images/image2.jpg)
3.If you are using a shared hosting service, ask your host to create a Canonical Name(CNAME) record for www with value ghs.google.com
(DNS changes are cached  at many levels and your ISPs may take time to get in sync with the 13  root level domain name servers. So the changes may take time :)
4.Once your host is done with it, Log in at your Blogger Dashboard and navigate to Settings > Publishing
5.Opt For Switch to:  Custom Domain (Point your own registered domain name to your blog)    and switch to advanced settings
6.Type your new domain/subdomain there and in the missing file host option type in files


type the captcha and save the settings. If everything goes right, your blog has now been successfully moved to the custom domain.

What does the Missing files host do?

When blogger is not able to find a file like www.bloggerplugins.org/uploaded_images/image1.jpg , it will try to find it at files.bloggerplugins.org/uploaded_images/image1.jpg [Click on the link to see it in action]
If you are hosting your blogger blog on a sub-directory, then wait for the Blogger FTP migration tool(it will be out in a couple of weeks). Once you are done with the migration tool, just follow the steps 4-6.You wouldn't need to use a missing files host in that case.

If you have any questions about the migration, leave your questions in the comments section.

How to Create Optimized Landing Pages that Convert?

Like SEO, SEM plays a major role in promoting the website to make revenues on the basis of ROI. The online business battle will be waged over conversion rates and return on investment (ROI), not traffic acquisition. The Landing page is the key factor inorder to make conversions rather than investing in an normal page.

Successful landing page
Your landing page should look like

1) Clear informative layout
2) Use Catchy Headlines, catchy titles are a plus.
3) Using contextual internal links
4) Should focus on What's the offer?
5) Who's interested?
6) Why are they interested, and why should they take further action?
7) How do they get started?

When visitors landed on the common home page, they stayed longer and visited more pages. Yet a larger percentage left without converting. When visitors landed on custom pages, they stayed for less time and viewed fewer pages. But these visitors converted two to three times more than the visitors to generic landing pages.

Make sure that you use your design part most in the header section to attract the audience. And don't use images which ever you want to convey to the audience (the important note) which will be useful for seo section. Don't forget to have an Action Button near to your conveying message. Always keep in mind that most of the visiter would be using 800X600 resolutions, so keep your design with in that screen resolutions.

Optimize your web page when you are using high quality graphic images which will save your loading time.

How to write HTML css code for Emailers?

Many of them are asking me, how to write html css code for emailers? Do it have any formates? On my view, i say yes it has a format to write. Now a days emailers are playing a majore role to promote their products or web pages in order to increase their conversion rate. Report says that a neat simple text mailers are making lots of conversions.

There are two types of mailers. One is text mailer and another one is image based mailer. Text mailers are given most important than image mailer, coz text mail can have the users glance that what he wants. But in image mailer unless the user clicks the display images he cannot view the mail. Most of the mail engine's like Google, Yahoo will not show the images until the user click the display images. This may get user get irritated and without opening the mail he will delete it. Make sure that your mailer will not fall in their Junk box.

Format for writing E mailers
A basic html and css code writing is enough for writing E mailers. Like tables and inline style is needed. You cannot apply any css file to the emailer. While writing html code, make sure that you should not use positions, backgrounds, negative margins and also padding (in cases). You must reset your css before starting an element.

Email Compatibility
Most of the companies are looking for email compatibility for all emailers just like browser compatibility. Most of them are Gmail, Yahoo, Sify, Microsoft Outlook express, Hotmail etc.. Make sure that your code is compatible for the above mentioned email services. So please use basic html and css tags in order to render properly in all these services.

Note:
Make sure that you add a link on the top of the emailers saying that cannot view, please view it in an html format. So that they can view to page in a browser, if they have problem in opening in email. And also add disclaimers like unsubscribe(if needed) at the end of the footer.

Nifty rounded corners using html and css

Rounded border
HTML Code:

CSS Code:
.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background:#888; margin:0 5px;}
.b2 {height:1px; background:#fff; border-right:2px solid #888; border-left:2px solid #888; margin:0 3px;}
.b3 {height:1px; background:#fff; border-right:1px solid #888; border-left:1px solid #888; margin:0 2px;}
.b4 {height:2px; background:#fff; border-right:1px solid #888; border-left:1px solid #888; margin:0 1px;}
.contentb {background: #fff; border-right:1px solid #888; border-left:1px solid #888;}
.contentb div {margin-left: 5px;}

Rounded Fill
HTML Code:

Css Code:
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}

The first example will give you a rounded corner with border, simply copy the html and css code. The secound example will give you rounded corner with fill but will not have any border. You can custome the code by changing the border or background color.

If you have any doubts or queries, please feel free to contact me.

Vertical align text in floating div using css

Do you know how to vertically align a text in a floating div? When a content is dynamically generated and you want to align it automatically according to it?

Today i was experimenting about this for a long time and finally i have got a solution which will work in all the browsers including ie6. There are many ways of doing it, but i would like to work the code in all the majore browsers inculding ie6.

So here is the code...

HTML:

It works! Vertically Center Align!

CSS:
.contentdiv{ width: 135px; height: 84px; display: table; border:2px solid red;}
.contentdiv p{ display: table-cell; vertical-align: middle; text-align: center;}

Hack for ie:
.contentdiv p{*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");}

According to the height you increase, the content will get vertically aligned center. My only worry is iam using expression. We must try to avoid using more expression. But it looks very simple. Fine, any other method of handle this will be a great help!

CSS Image optimization

Image optimization, plays a majore role inorder to load your page faster. There are many good image editing tools that allow us to get the best visual result for a certain file size, but they lack in quality. Saving bytes has never been so easy.
 
Smushit! is a service that goes beyond the limitations of Photoshop, Fireworks & Co. It uses image format specific non-lossy image optimization tools to squeeze the last bytes out of your images - without changing their look or visual quality. This tool now is also recommended by YAHOO and GOOGLE.

How it Works
You can give any format image like gif, jpeg or even png. Smushit will convert your given format file into png8 format. PNG true colors such as png24 will not support by ie6, but png8 will be supported by all leading browsers.

I also recommend this. for more optimization info also visit Page Speed by google

CSS Sprites

Now a days CSS Sprite plays a major role in developing a web page. One of the techniques developed, sprites being plugged into a master grid, then later pulled out as needed by code that mapped the position of each individual graphic and displayed it on the screen. First of all you need to know how to make a transparent gif image with positions using Photoshop.

Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the css background positions. To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed. Any hover, active or focus effects would be implemented using the simple definition of the background-position property for the displayed element.

When a page is loaded, it will load as a single images which is highly useful in reducing the request time of the server. YAHOO, GOOGLE, DIGG, SULEKHA etc... are also using sprite images inorder to load their pages faster.

For example:

You can see the GOOGLE sprite images, how it was created and called using css bacground.








.logo {background:transparent url(/images/sprite.gif) no-repeat scroll -190px -236px;}

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

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

* 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

HTML codings

<br /> <br /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <br /> <title>Untitled Document</title> <br /> <link href="css/css.css" type="text/css" rel="stylesheet" /> <br /> <br /> <br /> <body> <br /> <div id="selBodyContent"><br /> <br /> <div class="clssubheader"><br /> <div id="navigation"><br /> <div class="home"><a title="Artists" href="#"></a></div><br /> <br /> <div class="articles"><a title="Home" href="/articles/"></a></div><br /> <div class="rss"><a title="Data" href="#"></a></div><br /> <div class="contact"><a title="Upload" href="#"></a></div><br /> <div class="rss1"><a title="Inbox" href="#"></a></div><br /> <div class="contact1"><a title="Search" href="#"></a></div><br /> <br /> </div><br /> </div><br /> <div class="sidebar2"><br /> <div class="clsSubMenu"><br /> <br /> <ul><li class="clsArtHome"><a href="#">Artist Home</a></li> <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="clsFans"><a href="#">Fans</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><br /> <br /> <p>try<span>welcome</span></p><br /> <br /> </div><br /> </div><br /> </div><br /> </body> <br /> </html> <br />

Css codings

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

Horizontal Buttons image:Before Mouseover

Horizontal Buttons image:After Mouseover

Vertical Buttons image:Before Mouseover

Vertical Buttons image:After Mouseover