Much better! Just a few of words of warning: This CSS shorthand version will only work if you're specifying both the font-size and the font-family. The font-family command must always be at the very end of this shorthand command, and font-size must come directly before this. Also, if you don't specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal, so do bear this in mind too.
2. Two classes together
Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. In reality, you can assign as many classes as you like! For example:
...
Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.
3. CSS border default value
When writing a border rule you'll usually specify the colour, width and style (in any order). For example, border: 3px solid #000 will give you a black solid border, 3px thick. However the only required value here is the border style.
If you were to write just border: solid then the defaults for that border will be used. But what defaults? Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!
4. CSS document for printing
Lots of web pages have a link to a print-friendly version. What many of them don't realise is that there's no need because you can set up a second CSS document to be called up when a user prints the page.
So, your page header should contains links to two CSS documents, one for the screen, and one for printing:
The first line of code calls up the CSS for the screen (notice the inclusion of media="screen") and the second line calls up the CSS for the printable version (using media="print").
So, what commands should you put in this second CSS document? To work it out, open a blank document and save it as printstyle.css. Next, point the screen CSS command to this document so that the command reads: .
Now just keep entering CSS commands until the display on the screen matches how you want the printed version to look. You'll certainly want to make use of the display: none command for navigation, decorative images and non-essential items. For more advice on this, read Print Different, which also mentions the other media for which you can specify CSS files.
5. Image replacement technique
It's always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you've absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you've got no choice but to use an image.
Say for example, you wanted the top heading of each page to be ‘Buy widgets’, as you're a widget seller and you'd like to be found for this phrase in the search engines. You're pretty set on it being an obscure font so you need to use an image:
This is OK but there's strong evidence to suggest that search engines don't assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:
Buy widgets
Now, this obviously won't use your obscure font. To fix this problem place these commands in your CSS document:
h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}
Be sure to change "image height" to whatever the height of the image is (e.g. 85px)! The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule. Please note, this can cause accessibility issues as any user with images turned off won't be able to see the text.
6. CSS box model hack alternative
The box model hack is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. For example, when specifying the dimensions of a container you might use the following CSS rule:
#box
{
width: 100px;
border: 5px;
padding: 20px
}
This CSS rule would be applied to:
...
This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions on PC. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack can be used to fix this, but this can get really messy.
A simple alternative is to use this CSS:
#box
{
width: 150px
}
#box div
{
border: 5px;
padding: 20px
}
And the new HTML would be:
...
Perfect! Now the box width will always be 150px, regardless of the browser!
7. Centre aligning a block element
Say you wanted to have a fixed width layout website, and the content floated in the middle of the screen. You can use the following CSS command:
#content
{
width: 700px;
margin: 0 auto
}
You would then enclose
around every item in the body of the HTML document and it'll be given an automatic margin on both its left and right, ensuring that it's always placed in the centre of the screen. Simple... well not quite - we've still got the pre-IE 6 versions on PC to worry about, as these browsers won't centre align the element with this CSS command. You'll have to change the CSS rules:
body
{
text-align: center
}
#content
{
text-align: left;
width: 700px;
margin: 0 auto
}
This will then centre align the main content, but it'll also centre align the text! To offset the second, probably undesired, effect we inserted text-align: left into the content div.
8. Vertically aligning with CSS
Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use vertical-align: middle. This doesn't really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won't make a difference and the text will be pushed to the top of the box.
Hmmm... not the desired effect. The solution? Specify the line height to be the same as the height of the box itself in the CSS. In this instance, the box is 2em high, so we would insert line-height: 2em into the CSS rule and the text now floats in the middle of the box - perfect!
9. CSS positioning within a container
One of the best things about CSS is that you can position an object absolutely anywhere you want in the document. It's also possible (and often desirable) to position objects within a container. It's simple to do too. Simply assign the following CSS rule to the container:
#container
{
position: relative
}
Now any element within this container will be positioned relative to it. Say you had this HTML structure:
...
To position the navigation exactly 30px from the left and 5px from the top of the container box, you could use these CSS commands:
#navigation
{
position: absolute;
left: 30px;
top: 5px
}
Perfect! In this particular example, you could of course also use margin: 5px 0 0 30px, but there are some cases where it's preferable to use positioning.
10. Background colour running to the screen bottom
One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn't suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:
#navigation
{
background: blue;
width: 150px
}
Just one problem though: Because the navigation items don't continue all the way to the bottom of the screen, neither does the background colour. The blue background colour is being cut off half way down the page, ruining your great design. What can you do!?
Unfortunately one of the only solutions to this is to cheat, and assign the body a background image of exactly the same colour and width as the left column. You would use this CSS command:
body
{
background: url(blue-image.gif) 0 0 repeat-y
}
This image that you place in the background should be exactly 150px wide and the same blue colour as the background of the left column. The disadvantage of using this method is that you can't express the left column in terms of em, as if the user resizes text and the column expands, it's background colour won't.
Using this method the left column will have to be expressed in px if you want it to have a different background colour to the rest of the page.
As I’ve mentioned previously, link-building is one of the most important aspects of SEO (Search Engine Optimization). It seems that there are SEOs these days who would like to see blog and forum commenting done away with completely, but I disagree with that (as I imagine most people actually doing SEO full-time today do as well). It can be a challenge to find good, relevant, non-spammy blogs to either guest post on or leave genuine feedback on, so I hope this method helps out a few of you who are faced with the timeless and inevitable challenge of building links. In order of steps:
1 - Visit Google Blogs.
2 - Type in one of the keyword terms that the content on your landing page focuses on. Don’t be afraid to use quotes around your keyword term if it contains more than one word. Ex. “Nickel Cadmium”
3 - On the left-hand column, you can sort your results by time/date. I usually like to start with “last hour,” then work my way down to “past week.” This will allow you to find fresh, hyper-targeted blog posts to browse through and cherry-pick the best-of-the-best!
When you do this, make sure that you’re not just picking spam-filled blogs that scrape content from somewhere on the Web. It’s pretty easy to figure out which blogs are spam/auto blogs due to how they look, how their content reads and how their content is formatted. Because the content you will be finding is so new, it won’t behoove you to check out any of the metrics that exist for gauging the strength of a page, so if you’re concerned about that, just go take a look at the home page of the site and gather all the metrics you typically do (PageRank, mozRank, mozTrust, Alexa Rank, Compete score, et al).
Additionally, if you want to see how that site’s content typically performs, try using SEOmoz’s Open Site Explorer to find the strongest pages and number of unique root domains linking to them. If you don’t know how to do that, then go to Open Site Explorer (sign up for a free account so that you can view stats for 20 pages), search for the domain you’re interested in (don’t forget to consider both www and non-www versions of the site if they don’t 301), then click the “Top Pages” tab in the results. Voila!
As for “nofollow” and “dofollow,” it’s your judgment call. Do you want to have a more natural-looking link profile? If so, then just go ahead and leave comments (not spammy, of course — always make your comments constructive and relevant) on some “nofollow” blogs. Do you only need “dofollow” links? If so, then your blog searching will inevitably be a bit more exhaustive (hopefully, you’re using something like the SEOmoz Firefox plug-in to quickly see which sites/blogs are “nofollow”). Although commenting will suffice, one of the best things you could do is ask to guest post on that blog and provide an article based on the topic you’re interested in; so, take that into consideration, too.
That pretty much does it for the method I wanted to demonstrate in this post. For your consideration, I’ve decided to add a few additional tips below that will play well with this method. I hope that you find them useful in correlation with the method above and/or with your other link-building endeavors. Good luck and have fun searching!
Bonus Tip 01: If you do decide to leave a comment on a blog, try submitting that blog’s home page and RSS URL to pinging services likePing-O-Matic and Pingoat. There’s no guarantee that the result will be Google’s bot revisiting that blog and finding your comment any faster than if you hadn’t submitted the blog, but it takes all of 15 seconds each to submit and you very well may be doing yourself a favor by doing so!
Bonus Tip 02: If you are curious as to seeing if/when Google has cached a page with your comment, simply search for that page in Google, click “cached,” then look up at the top where it says, “…a snapshot of the page as it appeared on…” The time and date you see will be the most recent cache of that page! If the time and date are later than the time and date you commented, then scroll down and see if your comment was cached along with the page.
Bonus Tip 03: Set up Google Alerts and have Google email you whenever they index a new blog post related to a keyword term you’re interested in! Simply visit Google Alerts, put in your keyword term, select “Blogs” from the type selection box, select how often you want to receive results, then select the volume of results you want and enter your email address and you’re all set!
Posted by Vidya Parab at 11:03 PM 0 comments Email ThisBlogThis!Share to TwitterShare to FacebookShare to Google Buzz Links to this post Sunday, October 10, 2010
3 Truths of SEO This post is something I feel SEO (Search Engine Optimization) desperately needs: A plea for its legitimacy. The following short list is comprised of three simple truths which I hope will aid in establishing the legitimacy of SEO for you beyond the shadow of a doubt — even if you do not yet understand exactly how or why. SEO has an incredibly tarnished image throughout many industries and schools of thought thanks to spammers and the black hat tactics often associated with the industry. Likewise, it doesn’t help that SEO is often thought to be unquantifiable, unqualifiable, and ultimately unjustifiable by many. So, without any further adieu, here are 3 simple truths to defend the integrity of white hat SEO.
Truth 1: SEO is an Acronym; not a Word
I can’t tell you how often I hear and see “SEO” spoken as a word in some cynical context. “SEO is just a bunch of hocus pocus used to pad search engine results.” It’s almost as if “SEO” has become a word synonymous with everything negative on the Web. Just so we’re clear, it stands for “Search Engine Optimization.” It is also used to reference a person as a “Search Engine Optimizer;” as in, “Jon Payne is one of the best SEOs in the industry.”
Anyway, just what exactly does “Search Engine Optimization” mean? In its most basic form, it simply means optimizing your Web site for search engines. It ranges from optimizing content and code on your Web site to optimizing content on other Web sites that are relevant to your Web site (more on this later). Yes, there are black hat SEO tactics (high-risk and excessively spammy tactics that can be leveraged to cheat your way to higher rankings) and white hat SEO tactics (the tactics I will focus on teaching and that many people build legitimate, long-standing businesses off of), but just realize that SEO is not a word defined as cheating search engines and spamming searchers.
Truth 2: Eating, Drinking, Breathing and Sleeping SEO
It’s important for you to realize that while there are plenty of “black hat SEOs” out there who lie, steal, and cheat their way to higher rankings, there are equally as many — if not more — who eat, drink, breathe, and sleep white hat SEO practices. Those people make this stuff their life because they’re interested in it and they’re interested in genuinely helping their clients to succeed! Some people run legitimate agencies, others take the role of consulting, and then you have the individuals who REALLY dig in and tread not-yet-trodden paths.
People do this for their livelihood and they earn an honest living doing as such. The problem becomes trying to flesh out just who is legitimate and who is not. Luckily, there are some quick signs to look for which will aid you in spotting the difference should you be in the market for hiring an SEO agency or consultant. For instance, anyone who guarantees top-rank results before ever speaking with you most likely isn’t worth hiring. I will dive much deeper into the topic of spotting shady SEO agencies/consultants soon in another post.
Truth 3: Good Enough for Microsoft and Google; Good Enough for You
If Google and Microsoft speak in terms of SEO, why shouldn’t you? My final and undoubtedly most compelling point; here are two of the most successful companies in the world with tremendous presence on the Internet who discuss and implement SEO — and not just in some minuscule capacity, either! Please reference the following links which help support this 3rd and final truth:
1 - Google’s Dedicated Site and Guide to SEO: Google has a page dedicated to what you need to know when it comes to hiring an SEO. The page also includes a beginner’s guide to SEO. ‘nough said! Click here to view the page and click here to download the guide (it’s a PDF).
2 - Google’s Face of SEO, Matt Cutts: Although addressing SEO is not his primary role, he spends a lot of time addressing it. In a lot of ways, he is our lifeline to a small fraction of Google’s views and mechanisms with search and SEO. Click Here to visit his blog.
3 - Microsoft’s SEO Toolkit: Yes, Microsoft has created a tool which will essentially crawl your site and provide a detailed report of areas needing some SEO lovin’. If you will, recall the context in which I defined SEO in truth 1. Optimized content and code are what Microsoft has based its tool on. Click Here to read all about it and download it. It’s FREE!
4 - Microsoft’s Face of SEO, Chris Moore: Less known in the SEO realm is Microsoft Program manager Chris Moore. He diligently posts about SEO in relation to Microsoft; the ways they implement it, places they discuss it, et al. Even if for nothing else, this just goes to show how a company like Microsoft chooses to invest in SEO. Click here to check out his blog on Microsoft’s MSDN blog network!
3 Simple Truths: Conclusion
I hope this post goes to show you just how legitimate SEO really is. As with many things in life, you have to take the good with the bad and SEO is not exempt from that. The points to take away from this post are clarification of exactly what you should mean from now on when you say “SEO,” the fact that plenty of positive forces out there live and breathe honest SEO practices, and the fact that companies as big as Google and Microsoft clearly invest in SEO (which means you should, too).
Microsoft and Bing are partnering to “make Bing search more social.” In Web 2.0 speak, the idea is search graph + web graph = better answers.
Microsoft and Facebook execs outlined their latest people-focused search work during an event on Microsoft’s Silicon Valley research campus on October 13.
The main idea is to improve Bing results’ relevance by using Facebook Instant Personalization. And to improve Facebook’s Web-search results that are powered by Bing. From the Facebook explanation of today’s announcement: “When you search for something on Bing or in web results on Facebook (powered by Bing), you’ll be able to see your friends’ faces next to web pages they’ve liked.” (Don’t worry: You can opt out.)
The actual deliverables from today’s announcement are two new social search features Microsoft and Facebook developed in tandem. They will begin rolling out to users on October 13 and will continue to populate in “the coming months.” The features are “Liked Results” (recommendations from their Facebook friends that are built on Facebook’s public “Like” feature) and “Facebook Profile Search” (which will provide user-search results based on their relevancy to the searcher’s Facebook network and friends.)
Microsoft researchers have been working on these kinds of social-search concept for a while. The first reference I could find was a Microsoft Research project codenamed “Nocturnal.”
“Nocturnal that aims to use an established online community to provide a mechanism for giving reviews and recommendations from your social circle a higher priority when you search the Web,” explained an article on the Microsoft Research web site from 2007.
More recently, Microsoft researchers published a white paper entitled “A Comparison of Information Seeking Using Search Engines and Social Networks.” (Microsoft shared the paper at the SMX East conference earlier this month.)
The Microsoft researchers conducted a study in which 12 participants posted a question to Facebook while simultaneously trying to find the answer to the same question using Web search. The result? “Search engines and social networks each provide value at different stages in the search process.”
I’d agree with that assessment. Some queries I wouldn’t mind asking my Facebook “friends.” What’s the best place for Dim Sum in San Francisco? Sure, I’d want to see what my Facebook friends think.
Some queries I wouldn’t trust to those friends. No offense to my “friends,” but my Facebook account is a work account and while it includes some people I would call “friends,” many of the folks I’ve accepted I’ve never met. I don’t know them and they don’t know me. They’re folks who follow my coverage of Microsoft. I don’t want to know which movies they think I should see or which iPad case I should buy.
From what the executives said at today’s press conference, it sounds like Microsoft and Facebook have other jointly-developed search tricks up their sleeves. (Facebook CEO Mark Zuckerberg made a passing reference to another maps-related one, with no details.)
I see today’s announcement as indicating even more clearly that Bing and Facebook are taking different paths with search. Bing is definitely optimizing for the everyday consumer’s search habits. ut I am not the typical search user: I typically use search as much, if not more, to find specific quotes at press conferences, technical articles and other general-search results. I still find the best results for these kinds of research queries on Google, not Bing.
As most of us know it is often really difficult to build websites for both the user and Google.
Google still needs to be assisted in finding and assessing a website’s worth to such an extent that it can break the user experience altogether.
Of course there are plenty of CSS solutions to remedy Google’s weaknesses. Although I do not like the term tricks I have to refer to them as CSS tricks as in fact these are often workarounds to suit Google. Google spiders are still barely able to deal with most advanced web technologies like Flash or AJAX.
Google spiders are like little children, you really have to assist them to find stuff and understand it.
There are other search engines of course but they struggle even more so to keep it simple I will concentrate on Google, which is the by far dominant search engine in most of the western markets.
On a side note: “Trick” sounds like “black hat SEO” or cheating search engines. Well, take a look at them yourself and tell me whether I’m cheating or whether Google is making web development a pain in the back.
OK, then. Let me present to the top 7 CSS tricks for better SEO in no particular order:
1. CSS Pagination
Google has a serious problem with ranking long articles which are divided into several parts. Also long one page articles will outrank short ones usually. Apart from that the usability is key in making your visitors read the whole article so you don’t want users neither to scroll for ages nor to click a link and send a request each time they want to get to the next page of your article.
The solution is CSS pagination. Isn’t it hidden text though? Hidden text is one of the oldest “tricks” to cheat search engines, webmasters still employ it and my potential clients sometimes wonder why they don’t rank while using hidden text. So hands off hidden text! Anyways this way you can divide the content into easily digestible parts while still having it on one page. Take heed to another limitation of Google: The crawler might not crawl a very large page in its entirety.
2. Absolute Positioning
The higher your content is on a given page the more it counts for Google. Google does not see a page like a human being, it crawls the code. Thus the higher your content is in the code the better. So if you have a complex site with lots of menus, scripts and other gimmicks you should consider absolute positioning otherwise Google might even stop crawling your page before it reaches the main content. You can place the actual content high up in the code, at the top, while the users will see it in the middle of the page below the menus.
3. Styling h1, h2, h* Headlines
In HTML the h1 headline appears huge by default, the h2 is still much larger than the rest of the page copy etc. Many web designers thus used divs and spans for headlines for years to style them the way needed. Now Google won’t know what the headline is unless you tell Google by using h* tags. It’s like in 1999: You really need to use h1, h2 etc.
Of course you don’t have to make huge h1 headlines like in pre CSS times. Just style the h1 the size you want, also you can get rid off the line-height etc. which h1 headline force upon you by using the display: inline; attribute.
4. sIfr/Image Replacement for Headlines
Many people will argue that styling headlines with CSS is not enough for web designers. They are in fact right. I think it’s by now grotesque that we’re in 2010 and we still are quite limited to less than a dozen basic standard “web safe” fonts for web design. We were meant to have flying cars by 2000 and now we do not even have real typography on the web.
Many people have tackled this problem with image replacement techniques for headlines, which in short will hide the original headline and insert an image in it’s place. Some of them are fairly advanced , others are very simple. No isn’t it hidden text again? Yes, it is! Also some of these methods will hamper your SEO efforts more directly as the crawlers won’t recognize the headline anymore.
There is one popular image replace technique called sIfr which has been officially approved by Google. It uses Flash to display the headline in any font you wish but in code the h* tags are still recognizable.
5. Using Lists (ul/ol)
Most SEO experts agree by now that so called keyword density is not a major positive ranking factor. It means that mentioning your keywords 20 times instead of 5 will not make you rank better in Google. You may get penalized for so called keyword stuffing though. Now what to do in case where you really need to use the same words over and over?
Use an unordered or ordered list. Google allows repetition in lists without penalizing you.
With CSS you can style lists in any way you desire so that if you do not want a list to be clearly visible list style it accordingly. Some people do even a whole site design without tables and layers (divs) or even spans.
6. CSS Sprites
Now that site speed is an official ranking factor at Google even the webmasters who didn’t care about fast loading pages until now have to. One simple technique to use reduce page load and the number of requests is the usage of so called CSS sprites. CSS sprites are basically several small images merged into one big image.
Instead of loading each image by itself you can load just the CSS sprite and display only part of it depending on the user interaction. You use a background-image for that purpose and move the displayed area on click or mouse over then. In order to accomplish that you simply change the background-position in the CSS.
7. Pure CSS Menus
While pure CSS menues are not really a trick most people still assume that you need JavaScript or other enhancements to make dynamic menus. Well it’s not true, many advanced CSS only menus offer slick interactivitywhile being the best choice for Google and other search engine spiders.
Now can you use this methods for cheating Google? Well, I guess you can, but these techniques are so low level that Google won’t count it anyway. For all those who mistake SEO with spam: Spam works on a whole different level nowadays so using stuff like hidden text is ridiculous by now.
These CSS tricks can help you with legitimate SEO efforts.
I do not like the term white hat SEO as it acknowledges that there is another kind of SEO (I don’t agree with that premise, I rather divide: Either it’s SEO or it’s spam). Nonetheless: It’s all white hat SEO if you ask me.
Now you might argue this is not SEO 2.0, these are SEO basics known for years but it’s not really the case, the web developer community is rather keen on web standards to the point of dogma where for instance absolute positioning is frowned upon. So most people won’t use it.
As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals. The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal. Today, we will review 20 excellent css techniques to keep in mind when developing your theme.
1. Absolute positioning inside a relative positioned element.
Putting an absolutely positioned element inside a relatively positioned element will result in the position being calculated on its nearest positioned ancestor. This is an excellent technique for getting an element to “stick” in a certain spot where you need it, for instance, a header badge.
Read more about positioning:
PositionisEverything
W3 Specifications
2. Z-Index and positioning.
z-index can be somewhat of a mystery to developers. Often, you will find designers putting a very large z-index value on a div or element in order to try and get it to overlap another element. What we need to keep in mind, is that z-index only applies to elements that are given a “position” value. If you find an element will not adhere to a z-index rule you’ve applied, add “position:relative” or “position:absolute” to the troublesome div.
Read more about z-index:
Z-index Screencast
W3 Specifications
3. Margin Auto
Using margin auto in a theme is a fantastic way to get an element centered on the screen without worrying about the users screen size. However, “margin: auto” will only work when a width is declared for the element. This also means to apply margin: auto to inline elements, the display first must be changed to block.
Read more about margin auto:
Margin auto described
W3 margin specs
4. Use Padding Carefully and Appropriately
One mistake I often made when starting off with css was using padding without knowing all the effects and the CSS Box Model. Keep in mind that according to the box model, padding adds to the overall width of the element. This can cause a lot of frustration with elements shifting out of place. For example:
Equals a total width of 264px (200 + 30 + 30 + 2 + 2). In addition, remember that padding, unlike margins, cannot contain negative values.
Read more about padding:
W3 Padding Properties
5. Hiding text using text-indent
Lets say you have an image you are using for your websites logo. This image will be inside an h1 tag, which is good for SEO, however, we also want to have our text title written in the h1 tags so the search engines can read it easily. Some may be tempted to use “display:none” on an element. Unfortunately, we would have to separate the image logo from the h1 tag if we used this technique. Using text-indent and negative values, we can get passed this like so.
This will ensure that all text is not visible on any resolution while allowing it stay inside the h1 element containing the logo. This also will not hide the text from screen readers as display none will.
Read more about using text-indent to hide text:
SitePoint-Using text-indent
6. IE Double Float Margin Bugs
I’m sure we have all dealt with this one, as this is one of the most common css “hacks” we need to use. If you haven’t seen this bug before, basically, a floated element with a given margin suddenly has doubled the margin in IE 6 and has dropped out of position! Luckily, the fix is super simple. We just change the display of the floated element to “inline” as seen below.
This change will have no effect on any browsers since it is a float element, but for some reason in IE it fixes the double margin issue.
Read more about IE’s margin bug:
Doubled Margin-Causes and Fixes.
7. Using CSS to Fight Spam
This would be something you could include to really spice up your theme description. Alen Grakalic of CSS-Globe.com wrote a fantastic post on how to use css as a kind of CAPTCHA technique. A form is declared like so:
For the id “captcha”, we use a background image via css. This would require the spam scripts to find your html element, scan your css, compare selectors, find the certain selector and background image, and then read that background image. Its pretty safe to say most wont be able to do this. The downside is if someone is not surfing with css enabled, they wont know what to do.
Read more about using css to fight spam:
Fighting spam with CSS
8. PNG in IE 6 Fixes
I’m sure we could all agree dealing with transparent png’s in IE 6 is a real headache. The fixes range from complex Javascript techniques to just using a Microsoft proprietary filter, to using conditional comments to swap them out for a .jpg. Keep in mind, all of these but the conditional comments rely on the Microsoft AlphaImageLoader.
Believe it or not, it is pretty simple to get decent cross browser transparency using css. We can cover, IE, Firefox, Safari, Opera, and old browsers like Netscape Navigator. Chris Coyier recently came to our rescue again demonstrating these techniques.
.yourClass { filter:alpha(opacity=50);/*Needed for IE*/ -moz-opacity:0.5;/*Older mozilla broswers like NN*/ -khtml-opacity: 0.5;/*Old versions of Safari and "KHTML" browser engines*/ opacity: 0.5;/*FF, Safari, and Opera*/ }
This wont validate, but its not really an issue and the ThemeForest staff is pretty understanding when it comes to techniques like this.
Read more about CSS Opacity
CSS Opacity Settings.
CSS Opacity Settings.
10. Use CSS Image Sprites
CSS Image sprites are a fantastic way to load many of your css images at one time, in addition to reducing http requests and the file size of your theme. In addition, you wont have to deal with any images “flickering” on hover. CSS Image sprites are achieved by putting many of your image elements all into one image. We then use css to adjust the background position, width, and height to get the image where we want it.
Resources for image sprites:
A List Apart-CSS Sprites
How to use image sprites
David Walsh on CSS Sprites
11. Use Conditional Comments to support IE 6
Far too often, web developers are forced to introduce new css rules and declarations that only apply to certain versions of IE. If your not familiar with a conditional comment, the code below would only link to a style sheet if the users browser is less than or equal to IE 7:
This code would go in the head section of your html file. If the css does not seem to be taking place in IE after you have linked to your specific style sheet, try getting more specific with your css selections to override default styles.
Read more on conditional comments:
Quirks Mode-Conditional Comments
12. CSS Specificity
As mentioned above, CSS styles follow an order of specificity and point values to determine when styles override one another or take precedence. Nettuts recently had a nice article in which the point values for css were explained. They are like so:
Elements – 1 points
Classes – 10 points
Identifiers – 100 points
Inline Styling – 1000 points
When in doubt, get more specific with your style declarations. You can also use the !important declaration for debugging purposes if needed.
Read more about css specificity:
HTML Dog on Specificity
Smashing Magazine on CSS Specificity
13.Achieving a minimum height in all browsers.
When developing, we often realize we need an element to have at least a certain height, and then stretch to accommodate more content if needed. Unfortunately, IE doest recognize the min-height property correctly. Fortunately, we have what is known as the min-height fast hack, that goes like so:
#yourId { min-height:300px; height:auto !important; height:300px;/*Needs to match the min height pixels above*/ }
Simple, effective, and it validates just fine. This is also one of the few cases when the !important feature comes in great handy.
Read more about the min height hack:
Using the min height fast hack
14. The * HTML hack
If you need or wish to avoid linking to IE specific style sheets, one can use the * html hack. In a perfect world, the HTML element will always be the root element, so any * before html would not apply. Nevertheless, IE treats this as a perfectly legitimate declaration. So if we needed to target a certain element in IE, we could do this:
* html body div#sideBar { display:inline; }
Read more about * html hack:
More on the Star HTML Bug
Explanation of the star HTML bug
15. Sliding Doors Technique
One major problem with using images for navigation buttons, is that you run the risk of the clients text being too long and extending past the button, or being cut off. Using two images and the css sliding doors technique, we can create buttons that will expand to fit the text inside. The idea behind this technique, is using two images for each button, and applying the images via a background declaration in CSS. For example:
HTML Markup: Your Title CSS: a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Image height */ margin-right: 6px; padding-right: 20px;/*Image Width*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Image Height */ padding: /*Change to how you see fit*/ }
Read more about sliding doors technique:
A List Apart on Sliding Doors
Dynamic Drive-an example of the sliding doors technique
And there you have it, a list of 15 css techniques to help you when developing a theme. CSS is great for designers as it allows us to be creative with code and use our own techniques to accomplish a job.
मराठा मोडेल पण वाकणार नाही
पेटतील मशाली वीझतील मशाली
सुर्या कधीच विझनार नाही
प्रयत्न करा किती ही पण
हे कधीच घडणार नाही
मराठा मोडेल पण वाकणार नाही
मराठी मरेल पण शरण आलेल्याना मारणार नाही
मराठा मायेने रडेल पण संकाटाना भिवून पळणार नाही
आणि हो दुसर्याना बेघर करून घर स्वाताचे भरणार नाही
मराठा महाराज्यान पुढे श्वासाची ही किमत धरणार नाही
शिवांसाठी वेळ आली तर मरूनही मरणार नाही
आसतील लाख मतभेद पण वेळ आल्यावर ते उरणार नाही
संपातील सारे पण स्वराज, मराठा कधी ही संपणार नाही
.....मी मराठा ,मरकर भी नही हटा, वो मराठा!!!!
एक मावळा!!
मी मराठी... या दोन शब्दात माझी ओळख आहे..
मी मराठी असल्याचा मला अभिमान आहे
मी मराठा आहे!
होय, मी तोच मराठा ज्या कुळात "छत्रपती शिवाजी महाराज" जन्माला आले. मी तोच मराठा जिथे रक्त शिंपून "महाराष्ट्र" उभा केला राजांनी!
