Print Subscribe to Everyone's Blog about Web Design and your Online Business
Print Subscribe to Everyone's Blog about Web Design and your Online Business

Web Design and your Online Business

Welcome to Everyone's blog where you'll find me musing about anything related to online business and web design. One of my favorite pastimes is interviewing other people in the industry about how they deal with the challenges of designing pages for their clients. You will hear about everything from how to attract people to your site to making the page behave for any browser, new or old. If you've got an idea for a blog, or for a radio show on Blog Talk Radio, please drop me a line at blogtalk@everyones.com or just leave a comment here!

First Interview with CSS Junkie John Gallant Part 2 of 3 parts

Myra Rhodes - Tuesday, April 20, 2010

Continuing my discussion with “css junkie”, John Gallant, another major problem with Internet Explorer version 6 is called ‘hasLayout’. The IE browser decides if the hasLayout property is applied to a box or not. It is triggered when the author applies certain properties to a box such as width or height or floating or absolute positioning. Once a box hasLayout it behaves quite differently than when it doesn’t have layout.
You might think that a simple solution would be to apply hasLayout universally, but there are certain situations where you do not want the hasLayout property to be applied. John cites http://www.satzansatz.de/cssd/onhavinglayout.html for anyone who would like to have a better understanding of hasLayout.

The good news is that the issues with hasLayout has been addressed in IE8 and IE8 is now pretty standardized. The bad news is that IE6 is pretty much institutionalized in government and schools and they can be slow to change to the standardized version of IE.
I asked John how we as designers can avoid some of these problems. He recommends the method that he uses, which is to employ a ‘box-in-a-box’ approach. He does not use tables. His reason is simply that divs are just more flexible. He creates his major structure for the page with divs using only widths, no paddings or margins to complicate things. Then he places another div inside each. The inside div is the one that gets the borders and the padding but no widths. This way you have taken the widths and the side paddings and borders and separated them into two different elements nested together. The outer one handles the width. The inner one handles the rest.
Now with regard to ‘hasLayout’, the outer box gets the width and therefore hasLayout is inferred on it and the inner one does not have layout. To give hasLayout to the inner box, John recommends using the Microsoft proprietary ‘zoom’ property. Zoom is not in the specs and it will not validate. But if you use the property zoom on a box you will give it hasLayout. Simply applying the zoom property with the value of 1, the box will not change size so it will not harm the layout of your page, but the box now hasLayout. This is referred to as the zoom fix.
Because the zoom fix will not validate, if you are working for an organization that requires that the pages validate, you may want to put his fix into a conditional comment. IE6 will look for this syntax inside a conditional comment tag. When IE6 sees this special syntax it says, “Oh, I get to read this comment instead of ignoring it” (as a browser normally ignores comments). John provides this example of a conditional comment:
<!--[if lte IE 6]>

 

    <script type='text/javascript' src='js/sleight.js'></script>
    <link rel="stylesheet" href="css/ie-hacks.css" type="text/css" />

<![endif]-->

This particular example is for making PNG images work better. It has a starting tag that says, if the browser version is less than or equal to IE6, (then whatever it is you want the conditional comment to do) and it has an ending tag. Other browsers see it as an html comment and ignore it completely. IE6, however sees this syntax and is given permission to read it. This is how you can feed information to EI6 that other browsers won’t see.
John also recommends the Wikipedia article at http://en.wikipedia.org/wiki/Conditional_comment
for a more in-depth understanding of what can be accomplished with conditional comments.
You can reach John via his website at www.positioniseverything.net, at cssjunkie on Skype.

 

Comments
Anonymous commented on 20-Apr-2010 07:59 PM
Box in a box approach sounds like a really simple solution to these quirky problems with EI. Some really usable info here. So, Myra when will you be doing a webinar with Big John so we can see and not just hear about these solutions to design that work in IE?
Eric Fisher commented on 21-Apr-2010 08:09 PM
I second that comment Mike! I wish someone had told me that trick a couple of months ago. Very elegant! Better still will be the day when we don't have to design for IE6. Soon I hope!
Keith B. commented on 21-Apr-2010 08:30 PM
Thank goodness for the conditional comment in IE6!
monwatches commented on 05-Oct-2012 01:43 AM
The Breitling Navitimer Steel-4 is one particular popular design within the Navitimer series. This timepiece is pushed by a Breitling in-house self-windingbreitling replica swiss made watches chronograph the Breitling's caliber 23, which offers substantial accuracy as well as being a electrical powerswiss breitling replica reserve of 42 hrs. The style from the view resembles the original Navitimer released in 152. Protected with glare-proofed sapphire crystal, the Navitimer Steel-4 has its dial adorned having a date aperture positioned between four and 5 o'clock. Alongside the dial chronograph complication delivers 1/4th of a second measurements, half anbreitling replica hour and twelve breitling replica navitimer hrs.

Post a Comment




Captcha Image

Trackback Link
http://everyones.com/BlogRetrieve.aspx?BlogID=7400&PostID=139463&A=Trackback
Trackbacks
Post has no trackbacks.


Newsletter Sign-Up




Subscribe me to your newsletter.