Web Design and all stuff related to it!

CSS Hacks and tips for multiple browsers & detection

More and more web developers are ditching tables and coming round to the idea of usingCSS to control the layout of their site. With the many benefits of usingCSS, such as quicker download time, improved accessibility and easier site management, why not?

The problem with CSS

Historically the main problem with using CSS has been lack of browser support. This is no longer the case as version 5 browsers, which all have good support for CSS, now account for over 99% of browsers in use.

Instead, the problem is that browsers can sometimes interpret CSS commands in different ways, causing developers to throw their arms up in the air and switch back to pixel-perfect table layouts. Fear not though, as you learn more about CSS you’ll gradually start to understand the different browser interpretations and realise that there aren’t really that many.

How browser detection using CSS hacks works

The way browser detection using CSS hacks works is to send one CSS rule to the browser(s) you’re trying to trick, and then send a second CSS rule to the other browsers, overriding this first command. If you have two CSS rules with identical selectors then the second CSS rule will always take precedence.

Say for example you wanted the space between your header area and the content to have a gap of 25px in Internet Explorer, or IE as it’s affectionately known. This gap looks good in IE but in Firefox, Opera and Safari the gap is huge and a 10px gap looks far better. To achieve this perfect look in all these browsers you would need the following two CSS rules:

#header {margin-bottom: 25px;}

#header {margin-bottom: 10px;}

The first command is intended for IE, the second for all other browsers. How does this work? Well, it won’t at the moment because all browsers can understand bothCSS rules so will use the second CSS rule because it comes after the first one.

By inserting a CSS hack we can perform our browser detection by hiding the second CSS rule from IE. This means that IE won’t even know it exists and will therefore use the first CSS rule. How do we do this? Read on and find out!

Browser detection for Internet Explorer

To send different CSS rules to IE, we can use the child selector command which IE can’t understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

Using the example of the header margin, our CSS command would be:

#header {margin-bottom: 3em;}

html>body #header {margin-bottom: 1em;}

IE can’t understand the second CSS rule due to the html>bodyCSS command so will ignore it and use the first rule. All other browsers will use the second rule.

Browser detection for Internet Explorer 5

It may seem strange at first to send different CSS rules to different versions of a browser, but in the case of IE5 it’s very necessary. This is due to IE5’s misinterpretation of the box model. When specifying the width of an element in CSS, padding and borders aren’t included in this value. IE5 however, incoporates these values into the width value causing element widths to become smaller in this browser.

The following CSS rule would result in a width of 10em for all browsers, except IE5 which would give it a width of just 5em ( IE5 would incorporate two sets of padding and border, on both the left and right, when calculating the width):

#header {padding: 2em; border: 0.5em; width: 10em;}

The solution to this problem? Perform browser detection and send a different CSS rule to IE5:

#header {padding: 2em; border: 0.5em; width: 15em; width/**/:/**/ 10em;}

IE5 will use the first width value of 15em, 5em of which will be taken up by the two sets of padding and border (one each for the left and for the right). This would ultimately give the element a width of 10em in IE5.

The 15em value will then be overridden by the second width value of 10em by all browsers except IE5, which for some reason can’t understand CSS commands with empty comment tags either side of the colons. It doesn’t look pretty but it does work!

Browser detection for Internet Explorer on the Mac

Quite simply, IE on the Mac does strange things with CSS. The browser’s become somewhat obsolete as Microsoft aren’t going to be bringing out an updated version. As such, many web developers code their CSS-driven sites so that the site works in IE/Mac, although it may not offer the same level of advanced functionality or design. Provided IE/Mac users can access all areas of the site this is seen as a suitable way of doing things.

To hide a command using the IE/Mac CSS hack7 is simple, and involves wrapping a set of dashes and stars around as many CSS rules as you like:

/* Hide from IE-Mac \*/

#header {margin-bottom: 3em;}

#footer {margin-top: 1.5em;}

/* End hide */

IE/Mac will simply ignore all these commands. This CSS hack can actually be quite useful if there’s a certain area of the site not working properly in IE/Mac. If that section isn’t fundamental to being able to use the site, you can simply hide it from IE/Mac like so:

#noiemac {display: none}

/* Hide from IE-Mac \*/

#noiemac {display: block;}

/* End hide */

The first CSS rule hides the entire section assigned the noiemac id (i.e.

Browser detection for IE 4 and Netscape 4

Version 4 browsers have limited and somewhat erratic support for CSS. Making a CSS layout in these browsers, whose market share has now slipped well below 1%, can be extremely challenging. It’s become common practice nowadays to completely hide the CSS file from version 4 and earlier browsers. This can be achieved using the @import directive to call up the CSS document:

Version 4 (and earlier) browsers will display a non-styled version of the site as they can’t understand this @import directive.

Conclusion

On the whole, modern browsers have very good support for CSS – certainly good enough for you to be using CSS to control layout and presentation. Sometimes however, certain page elements will appear differently in different browsers. Don’t worry too much if you don’t know the reason why – if you can fix it up with these CSS hacks then your web pages should look great across all browsers!

In the current scenario, the websites are swiftly populating the web. The design of a website plays a crucial role in its popularity. Properly designed website with good design tactics definitely leads against its competitors.

There exist some simple and highly effective websites that use cascading style sheets (CSS). This functionality is implemented in the websites to improve the web design and to make the website perform better in major search engines. It also helps in grabbing quality traffic for the websites.

Before going further with CSS Web Design, it is important to understand the meaning and application of CSS.

What is CSS and how it is used?

CSS stands for ‘Cascading Style Sheets’ a new functionality widely used for layout and style of web pages. With the help of CSS the presentation and styling code is separated from the actual content in web design. CSS implementation consists of few rules which are stored in separate files with a .css file extension. Then CSS file is linked from the web page using HTML link tag.

In the past decade, tables were the only tool available with the web developers to design the layout of web pages of any website. But with CSS support, web developers now have a choice. There are lots of advantages in terms of web design to separate the presentation code into distinct CSS files.

Here are some excellent web design modes through which the web site design could be made more search engine friendly. These are as follows:

Use CSS to Structure the Document

Content is very important part of any website. Search engine robots read the content of the website and indexed it. By removing the extraneous table tags and replacing them with smaller HTML (div) tags formatted with CSS rules makes it much easier for the robots to read and index the content. This makes the code search engine friendly.

Use CSS to Style the Header Tags

Search engines give importance to header tags. As header tags are used to define page structure and simplify page navigation. Using CSS here makes the header tags appear in nicely formatted and attractive text. This increases visibility of the website in the search engines.

Use CSS to Create Rollover Images

Traditionally, web developers create rollover images using 2D graphics with some complex JavaScript code. This JavaScript code can adversely affect the search rankings of the website. Instead of this creating a normal text link and using CSS to format its appearance is a much better way to create images.

There are number of benefits of CSS over the classic web design techniques.

Benefits of CSS Web Design:

1. Separation of Content from presentation: HTML mark-up, text, graphics and multimedia can be separated from presentation.

2. Consistency: CSS provides a way to apply single style to various pages at a time. For example: to change the background color of all the pages of the site just make a change in CSS and it will be reflected in the entire website.

3. Maintenance: CSS makes the code clean & clear, and more understandable which can be easily edited and maintained.

4. Search engine rankings: With the help of CSS, one can position the content at the top in the page code to make it SE friendly.

5. Fast loading: Table-less design diminish the load time by 25 to 50 percent.

Tables design is the web design which uses HTML tables to design a page layout and control processes.

Instead of tables then emerged a new style sheet language CSS (Cascading Style Sheets).

Use: These languages or to e specific this language was then used to arrange page elements and text on the web page.

Introduction to CSS: World Wide Web Consortium introduced CSS language which was used to improve accessibility to web and to make the HTML code more semantic than presentational.

Advent of CSS: when CSS web design was introduced many web developers found it much easier to use. They considered the formatting through CSS very simple, infact they considered the tag to be obsolete in reference to table’s web design. Earlier CSS had very limited and difficult to use layout capabilities but now the times have changed and now CSS ahs improved a lot with many common page layouts especially its 3-column design.

CSS has become a new platform in developing website nowadays. The novelty of CSS has redefined the limits of the webpage viewing experience. Once can see some websites at relatively easier way and at the same time fashionably tailor fit that would totally make it irresistibly chic.

While the appearance has been totally developed, another good thing about CSS is that you can find the World Wide Web as a functional and increasing database. This means that you can grab the file of one website and transfer it to another. Like if you have a video in the Youtube and you want to put it in your Myspace page. It can possibly be done with the use of CSS tools. In this way, there is a greater manipulation in the internet user than it was before the age of Web 2.0

While most of the advanced techniques in web development is only limited to the few elite who has undergone some training in advanced web development, it is a good thing that a website emerged to make advanced information on web development especially with CSS accessible to all. And that website is the www.css-faq.com. The goal of the website is to become the ultimate source of information for web developers, whether one is beginning to develop the website and advanced one alike.

While there can be a lot of website about CSS in the internet, css-faq.com is committed to get one the latest information about web development in its CSS news. In this way, one cannot be behind what is the latest happening in CSS.

For those web developers who are after a catalogue of design for their website, it is best to view the site’s CSS gallery. Here, one can find a number of very interesting and neatly designed CSS templates that would suit everyone’ style. You cannot have that in an ordinary website.

For beginners, a mini-tutorial about CSS can be found in its CSS for beginners section. A great depth of information is found in this section. While CSS cannot be taught in just one setting, beginners will have to take the labor of studying CSS to make themselves a fully expert of this web development tool.

If the craving for information is not enough, one can interactively join the CSS forum section. Forums have been popular nowadays because of the craving for information. With this made possible, one can be able to communicate with other web experts to consult about some matters regarding CSS. And while getting the information, it would be absolutely free of charge. What makes it free? It is because of the feeling of being in community. CSS forums would make one feel that he belongs to a community and this where one can get help from others. With this forum, a new community of web developers emerged in one setting.

Getting the best source of information in web development is a web developer’s ultimate dream. While some sites cater on the basic information without getting to much grasp in the content, css-faq.com would be one’s FAQ site for CSS.

Web designers and developers are the heart and soul of the Internet. If you have skills in web design or web development you can make a growing income on the Internet. The secret to making money with your web design and development skills is to include web hosting in your web design or web development quotes or standard packages.

You can make up to $50 per month per site, hosting your client sites. This is much easier than you could imagine. You don’t need to get a dedicated server and you don’t need to worry about trying to compete with web hosting companies. Most people think about just getting a web site up, and the first people they think of is web designers. Terms with “web designer”get more searches per day than terms with “hosting”. People are looking for web designers to get their sites on the Internet.

Web designers and developers can incorporate the sale of hosting into their web development and design projects. As a web designer you can bill your customers for the hosting fees within the design and then host the account for a year or on a month to month basis. You will be surprised at how much extra income you can generate from your web design customers.

Providing hosting for your web design clients will give you greater assurance that your customers will come back to you to make changes or update their site. This allows you to keep generating income from your work and customer base. Let’s look at some numbers, and how billing for hosting on top of your web design work can make you some serious money. Let’s assume you get paid $500 – $1000+ for a site design. If you charge your client for hosting as well you could generate up to $50 extra per site, per month in hosting fees. You could make up to $1100 to $1600 per site, per year instead of just $500 or $1000 per site. With 100 clients this could equate to $110,000 or $160,000 per year instead of $50,000 – $100,000 per year. On top of this, remember your client is more likely to come back to you to update and maintain your site which means more money for you, for easy work.

With a little effort and focus you could generate a very healthy income in your web design business. With tools like Joomla, WordPress and other highly customizable content management systems you can make the hard work incredibly efficient so you can focus solely on the design. There are a huge amount of free, powerful web applications, content management systems and shopping carts you can quickly install in your reseller web hosting account and produce a design style for very quickly. There are also a myriad of ready to run, specialist applications written in ASP, ASP.Net and PHP that you can bolt on to your customers site, customize the design for and really impress your them. With these easily installable web applications you can very quickly impress your customers and raise the value of your web design fees – and the fact that they are specialist customized web applications you have put together, your web design customer will be happy to pay your hosting fees.

For your design business you don’t need anything fancy, you don’t need dedicated servers or specialists billing or server management systems. You can utilize the cost efficiencies of shared hosting to maximize your profit. One way to do it and a lot of designers do this, is get a new shared hosting account for each site they design and charge the customer more than they pay.

The better way to do it and really maximize your profit is to get a reseller hosting account where you can host all your customer sites in the one hosting account. This works out much cheaper than getting a separate account for each customer site. A good reseller account will give you far more room to move and even greater cost effectiveness which means even more profit and less effort.

Getting up and running with a good reseller hosting account is easy and incredibly affordable. For just a few hundred dollars per year you can host 50 or more sites. A quick search on reseller hosting will give you plenty to choose from. In our experience Windows hosting reseller packages are a good idea as a Windows reseller hosting account will give you the freedom and choice to run ASP, ASP.Net as well as PHP sites with MySQL or SQL Server databases. Linux hosting offers the cheapest hosting solution available but does not support ASP or ASP.Net.Net applications. For an extra few dollars a month you can get Windows hosting and dramatically increase your options for your web design customers from a wider array of available web applications and freely available code in ASP and ASP.Net.

With Windows hosting you can use all your favorite web design tools and you’ll have the vast resources of Microsoft development products like Visual Studio at your disposal. As a reseller looking at Windows hosting accounts make sure the host offers Multiple IIS sites and not just unlimited domains. To properly host multiple sites on Windows each site needs to have it’s own entry in IIS (Internet Information Server – the Windows web server). Many hosts say unlimited domains and what they really mean is running unlimited domains on one site. All you get with unlimited domains on one site, is your multiple domains show the same site or requires you to write code to detect the domain and redirect to a directory. This is not a great way to run your customer sites.

With each site having it’s own entry IIS means you can have separate application settings, assign it to different application pools and maintain separate log files. This means you can have more control, more flexibility and produce a much better solution for your client. Being able to put your customer sites in separate application pools means that if one of your customer sites get’s busy or some crazy bug causes a problem it will isolate it to just that site and you wont end up with all your customers screaming at you that their sites are down.

After 12 years working on the internet. Through booms, through busts, good times and bad times web designers and developers quietly rule the web. Businesses needing a web site look for web designers first and in our experience they really don’t want to know too much about hosting. As a designer you can save your clients from the complexity and confusion of hosting and make money from it. To make money from hosting your client work you really don’t need to leap out and set yourself up as a web hosting provider with billing systems, hosting plans and support systems and processes. Start off by hosting all your sites in one reseller hosting package and you’ll be surprised at just how much extra money you can make for very little effort. The best thing of all you can keep your focus on why you became a web designer – designing web sites!

Cascading Style Sheets (CSS) is a style sheet language that permits web designers to attach style like spacing, color, font, etc. to HTML documents. Cascading style sheets work similarly to a template; permitting web developers to label style for an HTML element and after that apply it to the number of web pages required. Thus, Cascading Style Sheets (CSS) are collections of formatting rules, which control the appearance of content in a web page. With CSS styles you have great flexibility and control of the exact page appearance; from precise positioning of layout to specific fonts and styles.

There are many benefits of using CSS. One of the major benefits of using CSS is the easy maintenance of the website. Maintenance of a website made with CSS is much easier compared to the ones which are table based. CSS splits the presentation style of documents from the content of documents and makes the maintenance of the site easier. Aside from being able to make site extensive changes with no trouble through one CSS file, the clean code it generates makes it easier to update. Webmasters can characterize the appearance of a site in one place, and change the whole site by changing just one file. With CSS, when you decide to craft a change, you simply alter the style, and that element is updated automatically anywhere it appears in the site. So, if you have to alter the color of all pages in your site, you only have to edit one style sheet. This saves you enormous amount of time, particularly if you have to edit each page independently. CSS generally requires less code compared to table based. This makes your code lighter and cleaner. Clean code makes a huge difference in maintaining your site.

Cascading Style Sheets Benefits and Search Engine Optimization (SEO)

Another major benefit of CSS is that it makes your website SEO friendly. The reason behind this is simple. The search engines spiders are actually very lethargic. They do not go through the bundles of HTML codes to get to the indexed codes. Font tags and tables make the HTML code very cumbersome; thus, reduce the accuracy of the results. If you use external CSS files to design and determine the design attributes; the HTML code will be clean and it will result to better search engine rankings. With some knowledge of CSS you will be able to change the code layout without destroying the actual visual layout. For instance, you could easily make the main content of your site to show up above the header or navigation menu in the code of your website; thus will help to show search engine crawlers the importance of your content. I personally saw a huge boost in rankings in fully CSS web sites. When I look at someone’s website that was built using old school HTML code with tags such as: TABLES, TD, TR, FONT and so on, I feel awkward and immediately convert that site to a fully table-less CSS layout. There are many tools on the Internet that shows the actual code over text ratio weight of your site. Do you know why? Because modern search engines such as: Google, Yahoo and MSN love light-weighted websites. They want to see your content; the text, not the code. With CSS everything is possible. You practically externalize excessive code into external file, thus leaving the actual page clean and simple.

Website Accessibility

CSS makes your website more accessible. The number of users browsing the web through hand held devices are continuously growing tremendously. It is estimated that by 2008, one third of the world’s population will be using hand held devices for accessing Internet. It is always important that your site is accessible to them also. You can make an additional CSS document particularly for handheld devices like cell phones, which will be called up in place of the regular CSS document; which is not achievable with a tabular layout. CSS benefits accessibility chiefly by separating document structure from presentation. By separating style from markup, webmasters can simplify and clean up the HTML in their documents, making the documents more accessible.

Increases Download Speed of Your Website

CSS code downloads faster than tables. Browsers read through tables twice previous to exhibiting their contents; first to work out their structure and then to determine their content. Moreover, tables are shown on the screen as a whole, no part of the table will be displayed until the entire table is downloaded and rendered. Tables support the use of spaced images to assist with positioning. CSS generally requires less code than cumbersome tables. All code to do with the layout can be placed in an external CSS document, which will be called up just once and then stored on the user’s computer; while the table layout stored in each HTML document, must be loaded up each time a new page downloads. Also with CSS, you can manage the order of the items downloaded into the screen. You have the control to make the content appear previous to the slow loading images, which is liked by most of the web users.

Cross Browser Compatibility

For all webmasters out there! CSS makes your website more professional. Taking the benefits of CSS like making your websites load faster and easy to maintain, you save a lot of time and labor. This in turn makes you lots of money. CSS makes links of the website look more attractive and dynamic. Using CSS, you can slot in rollovers easily and effectively, without having to use a single character of JavaScript. Thus, CSS gives your websites a professional look. It is wise to use CSS to jive with the current trends of the industry. All major browsers like Firefox, Explorer, and Netscape presently recognize CSS and it is definitely safe for web designers to use CSS now.