A wrapper may be made to enclose the content of a page, and then you can write descendant CSS rules that mention that wrapper's ID or class name in the selector. But what if only IE thought that wrapper existed? Then those rules would only work for IE, while other browsers would ignore the rules completely.
This is more or less how it was with the Star-HTML hack, where a mysterious wrapper seemed to be surrounding the HTML element in IE browsers. This made possible a very clean and easy selector construction: * html #myelement {}. Now this trick is different because IE7 has lost the mystery wrapper and will not read that selector as IE6 does. What we need is a way to make a new wrapper to use that only IE can see. But how can this be done? It so happens that you can use Conditional Comments to make IE think there is a wrapper between the body and the entire page contents. IE's view of the page element hierarchy will become different from all non-IE browsers, letting us write CSS to take advantage of the difference. The code is not very difficult, but the syntax is a bit different and must be correct for the method to work.
Conditional Comments behave just like simple HTML comments, but they have a specific syntax that IE/Win browsers can recognize. When that syntax is exactly correct, IE/Win browsers will look inside the comment and parse whatever is inside.
The starting tag for the new wrapper will go directly after the body start tag, and the wrapper's end tag is placed directly preceding the body's end tag. Each of these div tags will be wrapped in a conditional comment, allowing only IE/Win browsers to parse those div tags. <!DOCTYPE your favorite doc type> <html> <head>...</head> <body> <!--[if IE]> <div id="IEroot"> <![endif]--> <p id="IE">This browser is IE.</p> <p id="notIE">This browser is not IE.</p> <!--[if IE]> </div> <![endif]--> </body> </html> The first block of code after the body tag has a starting div tag with an ID of #IEroot inside a conditional comment; remember, only IE sees this div.
The last block of code before the closing body tag is a closing div tag inside another conditional comment; this closing div tag will match the starting div tag in the first block of code. Again, only IE will see this closing tag.
Between the opening and closing of the #IEroot div is where all of the normal page markup will go. In this example it is just a box with some content, but the idea is for the #IEroot div to be the ancestor of all page content.
Using CSS, style the page as usual for non-IE browsers. Then in the same stylesheet, use #IEroot as a prefix in descendant selectors to target specific rules at IE. The example below styles the div called #anyelement to have a red border in non-IE browsers, and a blue border in IE. /* all browsers make border red */ #anyelement { border : 2px solid red; } /* all browsers see this, but only IE thinks #IEroot exists as an element and makes border blue */ #IEroot #anyelement { border-color : blue; } The first rule is a simple rule to apply a red border to #anyelement; this rule is seen by all browsers, even IE.
The second rule changes the color of #anyelement's border to blue, but the selector is a little different than the first rule. The second rule's selector is a descendant selector; it's interpreted as: the element with the ID of "anyelement" that is a descendant of the element with the ID of "IEroot" should have the following rules applied.
Since #IEroot was created using conditional comments and only IE can see the contents of conditional comments, then in IE, #anyelement is a descendant of #IEroot and the descendant selector matches. Therefore, this rule will apply to IE, making the border of #anyelement blue for all IE browsers, versions 5 through 7. And because #IEroot is the first div and wraps the entire page, it can be used throughout the stylesheet to target rules at IE. This is used just like the star-HTML hack was used, except that you cannot target the body tag with this method because the body element is not and cannot be a descendant of #IEroot.
Here is a live demo page. Be sure to view in both IE and non-IE browsers.
Using this technique you can target part of a stylesheet at IE with confidence that this method won't be affected by future browser releases.
The Anti-IEroot Rule
Normally the CSS code will be clean, and the #IEroot rules will simply override key rules in the main styles to make IE behave correctly. Some coders will want the option to write a rule that all non-IE browsers will read, but that IE will not. A Child combinator can be used in a certain way: body>#wrapper #anyelement { styles for non-IE only... } Just add a prefix to any selector for a page element (#anyelement) with body>#wrapper. Of course, you will need to have a #wrapper element in the page, or some other major element that is a direct child of the body. The clean HTML should have #wrapper directly inside the body element so that the selector above will work.
The Child combinator (>) selects the element on the right only if it is a direct child of the element on the left.
Hiding From IE
IE6 and below won't read the rule, for the simple reason that those browsers don't support the child selector itself. IE7 does support it, but IE7 also happens to think there is an element called #IEroot! For IE7, a selector like body>#IEroot>#wrapper would work, but the selector we described above does not include #IEroot. IE7 thinks #IEroot is in the HTML, so IE7 ignores the rule. Thus all IE/Win versions are blocked from seeing this type of selector.
More on Conditional Comments
Conditional comments allow special syntax constructions for checking the IE version and are proprietary to Internet Explorer for Windows. A conditional comment is an HTML element that, in IE may conditionally be read, but, to all other browsers looks like an HTML comment and is ignored. Here is an example of some markup with conditional comments: <!--[if IE]> <p>Only IE shows this paragraph.</p> <![endif]--> <p>A paragraph that all browsers display</p> In the above example, the first block of code has a paragraph of text inside a conditional comment. Internet Explorer has been designed to examine all HTML comments for certain syntaxes, and when it finds such syntax IE will simply read and parse whatever is inside the conditional comment. Because conditional comments are hidden inside syntactically correct HTML comments, all other browsers just see a comment and do not display the paragraph contained within it.
The next paragraph is outside the conditional comment and displays normally.
If you want to test your conditional comments in different versions of IE, one simple method is to have multiple versions of IE installed as standalones. But there is a problem with standalones: they don't support conditional comments correctly. This article will help you fix conditional comments and many other things in your standalone IE's.
If you haven't installed multiple IE's yet, go here to download a fast, easy, and complete multiple IE installer with all the tweaks done for you.
Deeper with Version Numbers
Conditional comments support targeting of specific browser versions, which means divs can be created that will be used in CSS selectors to target not just IE in general, but specific versions of IE. Here is an example of how this might be done: <!--[if gte IE 7]> <div id="ie7andup"> <![endif]--> <!--[if IE 6]> <div id="ie6only"> <![endif]--> <!--[if IE 5.5000]> <div id="ie5-5only"> <![endif]--> <!--[if lt IE 5.5000]> <div id="ie5-01only"> <![endif]--> <div id="anyelement">a box with some content</div> [... more page content ...] <!--[if IE]> </div> <![endif]--> Only one of the four conditional divs will be created in IE, depending on the version of the viewing browser, and none of them will be created in other browsers. Note that only one generic all-IE div end tag is required, so no need to have multiple CC's for this task.
The first div, #ie7andup, will be created in IE version 7 and up. The "gte" means "Greater Than or Equal to."
The second div, #ie6only, will be created in IE version 6 alone.
The third div, #ie5-5only, will be created in IE version 5.5.
The fourth div, #ie5-01only, will be created in IE version 5.01. The "lt" means "Less Than." IE4 is not included, since conditional comments were not introduced into IE until version 5.
When targeting IE5.5 you must add the zeros to the 5.5 or the browser may ignore the conditional comment. <!--[if lt IE 5.5]> is not good enough, it must be <!--[if lt IE 5.5000]>. There is no good reason for this, that's just how it works. gte IE 7 stands for "greater than or equal to IE7," while lt IE 5.5000 stands for "less than IE5.5." When writing these CC's, exact conformance to the syntax is required. Any error will cause the CC to become a normal HTML comment.
The corresponding CSS looks like this: /*** All browsers ***/ #anyelement { border : 2px solid black; } /*** For IE 7 and up ***/#ie7andup #anyelement { border-color : blue; } /*** For IE 6 ***/#ie6only #anyelement { border-color : green; } /*** For IE 5.5 ***/#ie5-5only #anyelement { border-color : purple; } /*** For IE 5.01 ***/#ie5-01only #anyelement { border-color : red; } See a live demo of the method. You will need multiple versions of IE to view all the variants.
Not only is IE styled differently, but different versions of IE are styled differently. For example, this method makes it easy to fix the box model problem in IE 5.x while not affecting IE 6 or 7. Each new #IEroot ID is customized to indicate what IE versions are targeted, in effect "labeling" each special IE rule by version number. This helps when later doing site maintenance, and team environments benefit as well from the reduced potiential for confusion.
We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings. Here, you’ll find some of the best ways to use CSS for your website navigation. You’ll find a variety of techniques that truly showcase the capabilities of CSS.
In this article, you will find a collection of excellent navigation techniques that use the CSS to provide users with an impressive interface.
This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. If you want get started with this menu just simple view the source code. Demo in page.
View Demo
Matte is a simple CSS menu with rounded corners using two small images only from 13styles. It is maintained by David Appleyard who has lots of simple and advanced CSS-based menus.
Inspired by the Hoverbox Image Gallery technique developed by Nathan Smith, CSS Hoverbox leans on the background-position CSS property to superimpose rollover images on top of neighboring menu items. Demo in page.
View Demo
This is a very basic CSS-based drop-down menu that’s excellent for trying to grok the technique involved in creating drop-down menu that doesn’t require client-side scripting.
Here is another excellent method for creating a module tab interface based purely on CSS. Use the tabs in the page to learn about the instructions on how to implement this technique.
View Demo
This CSS menu on the popular web design agency SimpleBits shows a way for creating mini tabs. View the source code on the demo page to learn how it works (the code is inline and formatted well for readability for your convenience).
View Demo
This A List Apart CSS menu technique is for a fly-out submenu that appears on the right of the top-level menu, leveraging the position: absolute CSS property to move the submenu to the appropriate level.
View Demo
Roger Johansson of 456 Berea Street shows us the basic principles of turning an unordered list into a navigation bar – it’s a great starting point for beginners to learn about building a semantic HTML structure and then styling it with CSS.
We are always in search of great free resources, tips, tricks, etc. for our readers. Every day we work hard to find new resources and inspiration for designers like you. Today, we have another great post, “Discover the Best of the Web” on SmashingApps. In this, we made a list of 80+ Incredible Collection Of Inspirations, Tutorials And Resources For Designers. We obviously cannot cover all the best from the web, but we have tried to cover as much as possible.
Photofont WebReady is a revolutionary technology for website typography. Fontlab’s Photofont WebReady can be called a font converter meant for Windows and Mac OS X systems, which can help you customize the fonts on a web page. Since the main technology lies in the conversion of texts into Flash objects, this technology can be best applied to comparatively shorter texts. Like headlines, just as has been done with the title heading above. Be it your blog or a web site, you can enhance the web pages with your own custom fonts of your choice.
WebReady is basically a software solution based on Flash and JavaScript. With this sIFR 2 compatible solution, you can customize the headings or main headlines of your website using any photofont, any TrueType or OpenType font by converting it into an embedded type web font. (See our headline? That’s not your usual Times or Georgia. Can you guess the font?) This embedded type web font is further rendered on the web page by using Flash technology. And the best part of it is that the standards compliance and search engine friendly feature of the page is still retained. With Photofont WebReady, you can simply change the typographic appearance of your blog or website and give it a new direction.
Main Benefits of Photofont WebReady
Following are some of the major benefits of using Photofont WebReady over the traditional fonts available. There’s a free video demo tutorial offered by the company to help you know its features in depth. Click here to view the Free Demo Video Tutorial.
Featured with a simple wizard interface that guides the user through simple step-by-step processes, which is easy to understand.
On your website or blog the use of new, interesting fonts can bring in dramatic change by increasing the attraction of the web page.
The use of custom fonts can also help you give a corporate branding to your website or blog on the web, which is very important.
If typographic effects are applied to create headlines and the results are saved as a PNG or GIF, these in many cases are not visible to search engines. You can’t copy/paste that text either. However, the web fonts created by WebReady are search-engine friendly and compliant with the standards. They are SEO visible like other HTML text. Try selecting/copying/pasting part of our headline above. You can’t do that with a bitmap!
The web font text created by WebReady is independent of browser used and is always visible to search engines and is search-able too.
Using photofonts you can display text with multiple colors and transparency. A translucent headline could overlay your logo or masthead. Or you could have a rainbow font. Or both! See photofont.com for some examples.
Visitors to your website using older browsers that do not support Flash or JavaScript are also capable of viewing the text, but in the web font that is mentioned in the CSS stylesheet and considered as default.
Photofont WebReady Solutions
Using the Photofont WebReady font converter, a TrueType font (.ttf), a photofont (.phf) or an OpenType font (.ttf, .otf) has the following possibilities;
Convert into an embedded type web photofont, which is a Flash object that is bitmap based and can be consistently used in any website. The text is rendered dynamically in the typeface of your choice, while maintaining the compliant standards and searchability of the page.
Convert into a Simple photofont web headline, which is a Flash object that is bitmap based and static in nature. In this case, the text that has been specified during the conversion is displayed.
Converted into a plain bitmap image, where the text that has been specified during the conversion is displayed
Photofont WebReady Formats
The Import font formats of Photofont WebReady include;
OpenType PS (.otf)
OpenType TT/TrueType (.ttf) and
Photofont (.phf)
The Export font formats of Photofont WebReady include;
Embedded Web Outline Font (Adobe Flash .swf, CSS, JavaScript and optionally HTML)
Embedded Web Photofont (Adobe Flash .swf, CSS, JavaScript and optionally HTML)
Simple Outline Web Headline (Adobe Flash .swf)
Simple Photofont Web Headline (Adobe Flash .swf)
Plain Bitmap Image (PNG, JPEG, TIF, BMP) and
It is capable of modifying HTML documents too, but that is optional
However, please note that before going ahead with the conversion of any type of fonts into embedded web outline type, you must read the terms of the font End-User License Agreement (EULA) provided by the font vendor. This is only because EULA is actually responsible for governing font usage. To know more about it, please check out with Details About Font Licensing.
Software Requirements
For Windows version of Photofont WebReady, your system must have the following minimum software requirement;
Microsoft Windows XP, Vista or Win7
For Mac version of Photofont WebReady, your system must have the following minimum software requirements;
Mac OS X 10.4 or higher version recommended
PowerPC or Intel
To help the users with the entire process and details, a free copy of user manual is provided online for both Mac and Windows versions of Photofont WebReady. To get the user manual downloaded into your system, all you need to do is right click on the following link and choose any of the options between – “Download Linked File” and “Save Target As”. And you get a free copy of user manual in PDF format saved in your system. To get a copy, click Download Photofont WebReady User Manual for Mac and Windows Version.
If you want to create dynamic web headlines using the demo mode, the font selected by you will not be used. Rather, a default font will be used in this case, which can be considered as the only noticeable limitation of it. To get full functionality access, you have to buy the product and enter the serial number that will be provided to you.
Service And Support
Fontlab Ltd. provides free technical support to all its registered users. However, for exceptional cases like if the Serial Number or Installers are lost, a nominal service fee is charged.
At the first instance, it is advised to check the free user manual provided online in PDF format that can also be downloaded, before contacting the support team.
There are also online FAQs for instant help to the users. For any immediate technical inquiries, users can always check with the Frequently Asked Questions. Furthermore, if the answer to your problem is not listed in the FAQs, you can contact the support team by filling a simple Problem Report Form.
If you have any technical as well as non-technical queries prior to purchase,
you can directly join the Online Forum
of Fontlab or contact directly.
We are always in search of great free resources, tips, tricks, etc. for our readers. Every day we work hard to find new resources and inspiration for designers like you. Today, we have another great post, “Discover the Best of the Web” on SmashingApps. In this, we made a list of 85+ Excellent Resources And Tutorials Especially For Designers. We obviously cannot cover all the best from the web, but we have tried to cover as much as possible.
We are always in search of great free resources, tips, tricks, etc. for our readers. Every day we work hard to find new resources and inspiration for designers like you. Today, we have another great post, “Discover the Best of the Web” on SmashingApps. In this, we made a list of 70+ Promising Resources and Tutorials Especially For Designers. We obviously cannot cover all the best from the web, but we have tried to cover as much as possible.
We are always in search of great free resources, tips, tricks, etc. for our readers. Every day we work hard to find new resources and inspiration for designers like you. Today, we have another great post, “Discover the Best of the Web” on SmashingApps. In this, we made a list of 60+ Ultimate Resources Especially For Designers. We obviously cannot cover all the best from the web, but we have tried to cover as much as possible.
This is one of the very best list of its kind where you can find the simplest online web designer’s tools that are developed for designers and may be very helpful for you as well when you want to get your work done or just for fun. I hope web designers will like this list, but you can also use them and will love them whether you are an office worker, a manager, a supervisor, a student, a home user, etc. Most of them are not very well-known, but they are really amazing in respect to their features. This is the list of 23 Brilliant Web Apps To Simplify Designer’s Work Life. Just take a look at them and share your thought’s here.
You are welcome to share more Useful web tools that will be helpful for web designers and our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com just subscribe to our rss feed and you can follow us on twitter as well. Adobe BrowserLab
An easier and faster solution for cross-browser testing. You can preview and test your web pages on leading browser and operating systems. This will help you get your results in real time, from virtually any computer connected to the internet. Color Scheme Designer
Color Scheme Designer generates color schemes of several types. Every scheme is based on one (base) color, which is supplemented with additional colors making together the best optical imperession. PHPanywhere
PHPanywhere is a new online service that’s changing the way people develop on the web. They enable users to develop and maintain their php/html projects online using any standard web browser. Carbonmade
With Carbonmade, you can manage your online portfolio with a variety of tools that allow you to change how you display your work. The core idea behind the design of Carbonmade is to keep your images or video at the forefront. Posterous
Posterous lets you post things online fast using email. If you can use email, you can have your own website to share thoughts and media with friends, family and the world. You can attach any type of file and they’ll post it along with the text of your email. iPlotz
With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project. Photoshop.com
This is your online photo sharing, editing and hosting resource. You can upload, organize, edit, store (up to 2GB free) and share your photos. Typetester
The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems. Pict
Pict is a free image hosting service that lets you upload and share your images with one click.
You can upload images up to 3.5Mb, JPG/PNG/GIF formats supported, it has automatic image resizing, multiple uploading & much more. Font Burner
Font Burner is the easiest way to add great fonts to your website. Just pick one of over 1000 quality fonts, add a chunk of code to your site, then sit back and admire your beautiful typography. Iconza
A collection of free icons that can be colored and reduced in size to your taste. If you are a happy site or blog owner, you will be able to pick icons that will fit right into your design. Verb
Verb is a user focused task management and sharing application. If you have things that need to be done, then this is for you. Verb was built with individuals and small teams in mind. It is the perfect solution for freelance designers and coders who want to manage themselves and their collaborations. CurdBee
CurdBee is a safe and secure web-based billing application. You can use it to send clients invoices and then collect payments via PayPal or Google Checkout, billing them easily in the currency you choose. It’s so simple, you won’t believe it till you see it. EmailTheWeb
EmailTheWeb is the only web-based service that allows you to email any web page to any one. The entire web page is emailed in a flash and is captured as it is now. Your recipient will see the same exact page as you. MyFontbook
MyFontbook is an unique online font viewer that helps save designers time by providing a number of tools to view installed fonts quickly and easily. Unlike a classic font management tool, MyFontbook is platform independent and can be used freely through any web browser. 247webmonitoring
Having a good uptime is essential for the success of your website. 247webmonitoring will monitor it 24X7 from their servers and notify you whenever it goes down. This will check your website every 15 minutes to know it is up. They will send you notification by email or SMS when it goes down. So you can quickly fix the issue and you can stay happy. This way you can relax and focus on your core business. In future, you will also find out how fast your site is from different location. ViewLike.Us This is a brand new site that allows you to check out how your website looks in the most popular resolution formats. It’s all powered by Ajax & PHP so no need to download anything. Using ViewLike.Us is perfectly free. Tracer
Tracer is a brand new way to generate more visits and page views. You can get credit when content is copied from your site. It will help you to measure and understand user engagement and Improve your search engine ranking. Picnik
Picnik makes your photos fabulous with easy to use yet powerful editing tools. Tweak to your heart’s content, then get creative with oodles of effects, fonts, shapes, and frames. It’s fast, easy, and fun. Go2Convert
Go2Convert is a set of free web based tools that allow you to convert, resize a picture without having to install any software on your computer. It is not meant to be a complete Image editing software package. It is meant to be an easy to use solution to convert, resize your pictures and digital photos without the need to learn a complex software package. Once you convert, resize an image, you can choose to copy image’s URL or download it directly to your computer – It doesn’t get easier than that. ShowDocument
ShowDocument is a free service for online meetings with fully synchronized co-browsing of any document. It is a quick and simple way to share a document with other people at the same time. It is a web collaboration platform that lets individuals have a free online meeting. It is an alternative to various commercial desktop sharing applications. One can easily upload any file and during the session mark it up with a pen or a highlighter tool in addition to a text box tool and eraser. PXtoEM
This is an online calculator that can help you easily covert pixels, to EM, to percent or to points. fivesecondtest
A simple online usability test that helps you identify the most prominent elements of your user interfaces.
