Impressive Webs » Toronto Web Design Blog by Louis Lazaris

Easy Equal Columns with CSS

In a previous article I described (in principle) a method using JavaScript to get equal columns in a two-column layout. Of course, that’s not always the most elegant solution. Another solution, which is much easier to implement is completely CSS based. I’ll describe briefly how this is done and what possible effects it could have on your site’s layout and code. Here is the demo page, if you want to jump ahead.

The Key — The columns are not *really* equal
The only way to do this without using a very complex CSS layout is to essentially create the illusion that you have equal columns. But don’t worry — although the result is not really equal columns, it looks and acts exactly as an equal column layout would.

How to mimic the columns
To describe the method, I’ll just use a simple example: Two DIVs side by side representing the two columns; and one DIV containing the two. From there, it’s quite simple — just wrap your containing DIV with another DIV then apply ”overflow: hidden” on that outer DIV to ensure it doesn’t collapse in Firefox. Then, add a background image that repeats on the Y-axis (vertically). So, if you have a drop shadowed border, or even a simple 1 pixel border, you would create the image in your image editing program (Photoshop, Illustrator, etc.) and then just adjust the background-position of the image in your CSS to place it exactly where you want it. Since this DIV is essentially behind your two columns, holding both of them, you cannot have a background color on your columns, as it would block the image from showing up.

Keep in mind
You might think this could be done with a one pixel-border on one of the columns, but remember, one of the columns is not going to extend to the bottom, so the border method won’t work without some serious CSS hacks and workarounds. You’re creating the illusion that the short column is extending to the bottom by positioning the background image in a place where it mimics the short column’s border. Except, unlike the short column, your outer container (the container holding the container, if you will) is always going to extend to the bottom, thus creating the illusion of a two column layout where the columns are always equal, regardless of content. And best of all, either of the two columns could extend larger than the other, and the illusion would still work.

Overall, a very easy solution with limited drawbacks
This really is an easy to implement solution that can work on many CSS layouts, and doesn’t have too many drawbacks, other than adding some non-semantic code to your markup and (somewhat) complicating your DIV structure.

So if you’re in need of a hack-free quick fix to a two-column layout, this is a good solution and will work in virtually every browser and platform.

View the demo page, to see this simple, yet effective, solution in action.

Posted in CSS, XHTML | 5 Comments »

Cleaner HTML by Avoiding Attributitis

Did I just invent that word? Most developers using CSS layouts have likely heard of “divitis” (using far too many DIVs in your markup). But what about “attributitis” (or, Attribute-itis, if you will) — the distant cousin of divitis? I didn’t bother googling that word to see if anyone else has used it; I’m hoping I’ve coined it! I thought of it this morning while helping a coworker debug a CSS problem. It struck me that the class and ID attributes that are commonly added to HTML tags can really get out of hand if they aren’t controlled properly. Let’s discuss a few points that will ensure cleaner code and better future development time through the practice of avoiding attributitis.

Fewer attributes further enhance clean code
Often because we want to easily identify our styles in our stylesheet, when we code an HTML tag, our first instinct is to add a “class” or “id” attribute. At times I do it without thinking. But think of how much cleaner the code would be with no class or ID on that tag? That’s right — just a plain ol’ tag. And when you combine this with the avoidance of divitis, you can easily see the contrast:

With divitis and attributitis…

<div class=”my_ul_holder”>
<ul class=”my_ul”>
<li class=”my_list_item”>Example Text<li>
</ul>
</div>

And Without…

<ul>
<li>Example Text<li>
</ul>

I know what you’re thinking: It’s not always that easy — sometimes you have to apply classes and attributes in order to differentiate. But, to some degree, it can be avoided.

Have site-wide defaults for commonly used tags
By now you should be using a CSS reset to revert all your site’s styles to the bare minimum. If you’re not, do yourself a favor and research the topic and start using a reset. It’s extremely helpful for cross-browser compatibility. But further down in your style sheet, you should have a section of code that contains the site’s custom default styles for various HTML tags like H1, H2, P, UL, and others.

For example, if you know you’re going to have about a dozen unordered lists on the site, styled exactly the same way, there is no need to put class=”my_unordered_list” on every one of them. Just leave the class attribute off completely, and style your UL element to reflect this in your style sheet.

Even if you want to apply a different style to one of them, you can simply do so through the DIV hierarchy that you’ve already likely created in your XHTML. So instead of of adding

class=”other_unordered_style”

to your UL tag, you can leave the UL naked and use something like this in your CSS:

#footer ul {
// enter styles here
}

to declare a different set of styles on the single unordered list that appears in your footer.

Cleaner markup and better site performance
This will leave your HTML code clean, semantic, and (somewhat) attribute-free. True, this will likely add a few kilobytes to your CSS file. But since CSS is cached by your browser, it will work out better overall for your site’s performance. With a little careful forethought, XHTML and CSS can easily be stripped down to its bare bones — or close to it — and your site will still look as beautiful as it was intended from a visual perspective, and will no doubt be easier to maintain in the future.

Posted in XHTML | No Comments »

IE6 Ghost Text Bug (with multiple solutions)

It is a sad fact that, according to W3Schools browser statistics, Internet Explorer version 6 is still holding one of the highest percentages of use for one browser version (28.9% — although I personally think that number is somewhat inflated for reasons that I’ll save for another blog post). Unless the site you are working on has specific stats that show a much lower number for IE6 users, then it is still necessary to ensure that IE6 is displaying your markup reasonably well.

What is the IE6 Ghost Text Bug?
Due to a bizarre rendering error in IE6, a well-organized, W3C-compliant web page that contains clean, semantic markup, and that looks perfectly fine in all other browsers (IE7, Firefox, Opera, Safari, etc.), will sometimes display duplicate text in a DIV that is floated and is followed by an HTML comment. The consensus is that the bug occurs when multiple comments are placed between a series of floated DIV tags, with the actual bug taking place inside the final floated DIV.

Multiple proposed solutions
In the case of this bug, we know exactly why it occurs — because of the HTML comment that appears after the final floated DIV. So the easiest solution is to just delete that final problematic comment. But if you’re like me, and you organize your markup by commenting your divs, then that may not be a satisfying solution. So in this post I’ll provide a number of proposed solutions to this common IE6 bug.

SOLUTION: Debug the page from bottom to top
Unfortunately, sometimes even removing the final comment that appears after the affected DIV will not solve the issue –hence proper debugging techniques need to be used. In some cases, I’ve had dozens of HTML comments appearing in a page, and removing the last one did not fix the duplicate text. So I simply went through the markup in reverse, starting from the problematic DIV and working my way up. I proceeded to remove HTML comments one at a time, until I found the one triggering the bug.

SOLUTION: Place the comment inside the closing DIV tag
Since I don’t want to eliminate the comment, the method I usually use to fix the issue is to put the comment inside the closing DIV tag, so it would look something like this:

SOLUTION: Adjust the margin to a negative value
I have never personally had to use this solution, as I normally use the above, but some sources say that putting a negative left margin on the affected DIV will fix the problem (note: on a right floated div, you would apparently have to use a negative right margin). Of course, you would have to use an IE6 only hack to ensure this margin change doesn’t affect your layout in other browsers, but I don’t see the reason to resort to this, as it seems it would harm your layout in IE6 anyhow — so you would have to adjust something else on the page to compensate. But this is a proposed fix nonetheless, so you may want to be aware of it.

SOLUTION: Use “display: inline”
Some have said that they’ve had success using this fix to elimate this duplicate text problem. Again, you would use an IE6-only hack and apply “display: inline” to the affected DIV in your CSS. Similar to the previous solution, I can only foresee other issues arising if this is implemented. Also, I personally have tried this and have yet to see it work. Obviously this ghost text bug occurs under a number of different circumstances, and thus some solutions don’t work in certain situations.

SOLUTION: Conditional comments
I have used this method, and seems to work perfectly. It also has a few extra benefits for developers that don’t like to re-organize their code (like me!). So I used this one recently and I think I’ll be using it exclusively in the future, should I run into this bug again. To implement this, just replace your existing comment with an IE conditional, like this:

The benefits of this fix far outweigh the one drawback. Firstly, the only drawback is that it looks ugly and out of place inside your perfectly organized markup. But the first benefit is that it keeps the comment exactly where you want it. And the second is that, similar to IE6 CSS hacks, when IE6 finally falls out of general use, all you have to do is remove this conditional and replace it with a normal HTML comment (assuming that you’ll need to go back into the markup at some later date).

I have no HTML comments and I still get the bug
I have never seen this bug occur on any of my sites without the use of HTML comments, but I have read blog posts where people have solved the issue and made no mention of HTML comments, so it’s possible that there were no comments used and it still occurred. If this is the case, then the solution seems to be to either use one of the alternative methods mentioned above, or else eliminate white space in your HTML. One blog post online seems to indicate that white space caused the ghost text to appear. So, you could systematically go through your markup using the dubugging method mentioned above and narrow down which particular chunk of white space is causing the problem.

SOLUTION: Use non-breaking spaces (not recommened)
This is a very poor way to fix the bug, but technically it does produce the desired result, is quite easy, and is pretty much guaranteed to work every time on non-linked text. Since the bug causes the last few characters (usually just two or three letters) to appear duplicated a line or two below, then you can just add a few non-breaking spaces (using &nbsp;) to the end of the affected paragraph of text, and thus the duplication will occur only on the non-breaking spaces, so it will give the illusion that the bug is not occurring, even thought it still is. Of course, this is not a recommended solution as it gives your markup and “old-school HTML” feel, and will only work if the duplicated text is not hyperlinked.

IE6 Ghost Text conclusion
Ultimately you will have to use whatever method works best for your style of coding. I’ve tried to exhaust all the possible solutions above, so if I’ve missed anything, please let me know, and I’ll add some footnotes or supplementary info in the future.

Posted in XHTML | 2 Comments »