Your browser is not supported.

Ran into this one today, in somewhat unique circumstances: I had a hover style where buttons inside a table row only appeared when the mouse was over the row, and if you clicked on one of the buttons but moved the mouse into another row before releasing the mouse button, the previous row would stay highlighted.

The authoritative writeup of the bug, and most others, refer to the problem happening with dynamically-displayed submenus, but make little mention of my particular problem. There was some hope that triggering hasLayout would fix the problem, as it’s the closest thing we have to a magic bullet, but it (shocker!) didn’t work for me.

What did work for me was reverting back to the brute-force method one had to use for older versions of IE: using JavaScript onmouseover/onmouseout events to trigger a hover style¹ rather than the :hover pseudoclass. So much for IE7 implementing :hover on non-anchor elements. Sigh.

¹ See the first comment. And shame on you, Webmaster World, for not having permalinks to the comments. Get a load of their generated source, too: they’re still using font tags. Seriously?! And this is a resource for webmasters? Come on.

So I was just trying to figure out how to center an image inside a div with hidden overflow when the image is larger than the div, and it turns out it’s not as easy as you think. Vertical alignment is easy using vertical-align: middle. However, giving the div container text-align: center, for example, doesn’t work—the image’s left edge still aligns with the left edge of the div. After a little Googling, I found this rather ingenious solution.

<style type="text/css">
  .centre
  {
    position: relative;
    margin: 100px auto;
    width: 200px;
    height: 150px;
    overflow: hidden; /* the centered bigger image's overflow is clipped at all four sides */
    background:#cfc;
  }

  .centre span
  {
    position: absolute; /* makes block-box wrapped around its content */
    top: 50%; /* absolute %-unit referes to the selector's first positioned ancestor */
    left: 50%; /* places the selector's top left corner in the centre of the container div */
  }

  .centre img
  {
    position: relative; /* does not move the original object, positions the image of it */
    top: -50%; /* relative %-unit referes to the selector itself */
    left: -50%; /* places the centre of itself in its original top left corner position */
  }
</style>

<div class="centre">
  <span><img src="image.jpg" alt=""/></span>
</div>

Follow the link to see the code snippet in its entirety, but in short what you do is that you wrap the image inside a span that is absolutely positioned at top: 50% and left: 50%, so that its top left corner is placed in the exact center of its parent, the div with the overflow. Then you relatively position the image so that its top and left are both -50%, et voilà, you have a centered image! Brilliant!

this ALA article about conflicting absolute positions changed my life. No, really.

And on the subject, here’s an intriguing new CSS layout technique: faux absolute positioning.

First, let me make my excuses. As I have said before, I’m self-taught on all this web development stuff, so what I know is usually what I have had a need to use. Which means that sometimes I don’t discover features of the standards that would have been useful to me until pretty late in the game. And that is exactly what happened to me a few weeks ago with the inline-block display property.

Usually when I needed to give an inline element dimension and margins, I would give it a block display and float it to ensure shrink-wrapping of the content. But adding the float would bring its own host of issues to deal with, especially in IE, meaning that doing so was always a headache. So when I discovered the answer to my problems, in the form of the inline-block property—it allows you to give dimension to an inline element as if it was a block element, but it still lays out, and shrinkwraps, as an inline element would—I was ecstatic, for all of the few minutes it took me to discover that Firefox ≤2 doesn’t support inline-block.

So I did some searching, and all I could find on the topic were a few blog posts bemoaning the lack of support, or newsgroup posts asking for help on the subject. Then I came across a potential solution: the proprietary -moz-inline-block property, which was seen by Firefox and ignored by all other browsers. So I tried it, et voilà…it still didn’t work. Firefox seemed to be treating it as a block property; that is, it was forcing a line break afterward. Which didn’t solve my problem at all. After some more searching, I found that I wasn’t the only one having that problem. Back to square one.

More searching. Then I found what I thought was it: the -moz-inline-box property, which is actually supposed to behave like inline-block^*, even though -moz-inline-block, which has the same name as the property I want, doesn’t. Huh?

Nevertheless, I tried it, and it worked. But, and by this point you won’t be surprised, in only one case^**. The rest of the time, it made my content disappear entirely, or didn’t have the right dimensions, even though I had given those elements fixed widths in my stylesheet. Conclusion: Firefox’s support of inline-block is minimal, buggy at best. It’s best to act as if the property is not available at all.

So what did I do to solve the problem? Pretty much what I had been doing before. I left the element displays as inline-block (for Safari and IE, which support the property) and -moz-inline-block (for Firefox), but added float: left to make it all lay out properly. After all that, I had gotten precisely nowhere. Yeesh.

Despair not, though, gentle reader. Apparently there is a light at the end of the tunnel.

^* In most cases. As I found out today.

^** My theory on this is that -moz-inline-box will only work on elements with both a fixed height and width. Making it kind of useless in the long run.

Update 2008-07-03 13:04—Firefox 3, as I’m sure you know by know, supports inline-block, so the good news is that you only have to worry about your Firefox 2 users.

Making your site work in IE
So there you are, with a good understanding of the standards, armed with some great CSS UI conveniences, and a snazzy prototype. But then you fire it up in Internet Explorer 6 for Windows, and it all goes to hell. You’ve got unnecessary horizontal scroll bars, magically disappearing and reappearing content, and list bullets where you don’t want them. Mysterious extra right and left padding, odd positioning, and static content that jumps when you hover on a nearby link. Problems galore, and you’re ready to tear your hair out. (My colleagues say that they know when I’m working with IE because I start swearing at my computer.) It’s inevitable, really.

But cling to hope, gentle reader, because you’re not the first, and, I am confident in saying, not the last to have these problems. In fact, most of the problems you will encounter have already been found—and solved. But before I get to that, let’s discuss the problem of how to hack your CSS to work in IE such that it’ll degrade gracefully when your users inevitably upgrade to IE7.

Up till now, there have been a number of ways to create blocks of your CSS that are only visible to IE, but they’re, well, hacks, and can’t be trusted to work forever. The best way to add IE-specific styling, I’ve found, is by using conditional comments and an entirely separate stylesheet.

OK. Moving on. Now you know how to add IE-specific styling to your app, let’s find out what that styling should be. You’ve got a passel of problems, but no idea how to solve them. Where do you go for help? You go to the Bible: PositionIsEverything’s list of Internet Explorer bugs and their workarounds, if there are any. Another great article on the subject can be found at CommunityMX (a mostly subscription-only site, unfortunately): How to attack an Internet Explorer (Win) display bug.

For further reading on IE’s display bugs, don’t miss these articles:

• Internet Explorer and the CSS box model
• On having layout — the concept of hasLayout in IE/Win

Other articles you may find useful:

• Button width in IE, a discussion on how to get rid of all the extra padding IE seems to automatically add to buttons and submit inputs.
• CSS and browser compatibility

With all these tools in your arsenal, you can go forth and battle most all the weird browser bugs out there (more on this in another post) and come out the other side alive and even relatively unscathed.

CSS tips and tricks
If most of my standards references are found at W3Schools, then most of my CSS tips and tricks references can be found at A List Apart, the best webzine on the industry out there. INJMHO^*. Their design articles and how-tos specialize in clean, reusable and maintainable code, and are usually what I go to first when I want to make sure I’m not reinventing the wheel.

Speaking of reinventing the wheel, my three favorite tutorials from ALA are on three of the most common UI elements: multi-column layouts, tabbed interfaces, and CSS-mostly drop-down menus:

• In search of the Holy Grail, an excellent how-to for making a three-column layout with two fixed sidebars and a liquid center. Update 2007-03-07 14:03—Published recently on ALA, here’s another way of making a multi-column layout with equal height columns.
• Sliding doors, a discussion on how to use the sliding doors technique to make dynamically sized tabs.
• Suckerfish dropdowns, a great way to make (almost^**) entirely CSS-driven dropdown menus.
• Update 2008-06-20 11:04—Conflicting absolute positions is an elegant Javascript-less technique to make a multi-column layout that needs to take up the full browser window.

Everything else is more or less kid stuff, so I’m not linking it here.

Next up: Making your site work in IE.

^* In Not Just My Humble Opinion.

^** Almost because IE doesn’t support the :hover pseudo-class on anything but <a> tags.

The standards
OK, now we’ve got that tools discussion out of the way, let’s get down to the meat and potatoes of our discussion; that is, the standards. If you do web development for any length of time, you’ll, whether you like it or not, become intimately familiar with the HTML, XHTML and CSS standards. But no matter how familiar you become, you’ll need to, at some point, refer back to them. So we come to the most important weapon in my arsenal: my reference library.

While I have a few books, the bulk of my reference library consists of bookmarks. Let’s start with the ones pertaining to the standards:

• W3C HTML 4.01 Specification: None of the W3C’s specs are the easiest things to read, but when you really need to understand the desired behavior of a content or presentation element, this is where you have to come. So while these specifications are the foundations of the web, they’re usually my last line of defense; I find that you have to have a pretty good understanding of how the technology works in practice first before you come here with detailed questions of how it should work.
• W3C XHTML 1.0 Specification
• W3C CSS 2.1 Specification

If those are my last line of defense, here’s my first one: the quick reference guides.

• HTML 4.01/XHTML 1.0 reference
• CSS2 reference
• Here’s another CSS 2.1 reference, linked because it’s got a great interface.
• JavaScript and HTML DOM references: Of course, you won’t get very far with just XHTML/CSS. At some point you’ll have a need to do something a little more complicated, and that’s where JavaScript and the HTML DOM come in.

OK, you say, but say you’re not like me, and you don’t do this stuff for a living? Say you need more than a quick reference guide. How does one learn? I’m a firm believer that I, at least, learn best by doing. And the best way to do that is to follow a tutorial. Here are some of my favorites:

• HTML and XHTML tutorials
• CSS tutorial 1 and CSS tutorial 2: The first one is a quick, no-nonsense way to learn, but the latter is my favorite, because you have a practical goal to work toward.

Finally, now that we’ve learned how to do it, here’s a convenient way of making sure we did the work right:

• W3C Markup Validation Service: A great way of checking that the markup you wrote conforms to the standards.
• W3C CSS Validation Service: Likewise for CSS.

Next up: tips and tricks.