Thanks to Sarah, I found out that Opera was now displaying things strangely. Of course, I didn't have Opera installed. It sure would be nice if the browsers could all display things the same way. At least close. So I installed Opera (v7.23), and back to the CSS I went.

Once I started using primarily Firefox, I noticed that things weren't displaying correctly.

So I adjusted things to see if I could make them display correctly. That caused other problems, so I did it again. While this corrected the problem in two browsers, neither of which was Opera, it left a problem in the third, which was Opera.

So using EditCSS in Firefox, I set about finding the true cause of the problem. Turns out it was in a small <div> up there at the top of the page. See the email address up above? That text is enclosed in a <div> with a class of contact. When I originally designed it, I'm sure, I positioned it with, let's just say, an inferior browser. So there was some extra padding to make it look right.

It turns out that Firefox (and other Mozilla-based browsers, I'm sure) handles that padding differently. In fact, the padding of that <div> dropped it down into the content area, where it pushed the main content - this content - over to the side, which left no room for the sidebar, which dropped it to the bottom. So I cleared out the changes I had made earlier and instead added a finer definition of that padding so that Firefox could handle it:

  #pagebody > .contact {
   padding: 6px 10px;
  }

This adjusted the padding enough so that it doesn't interfere with the primary content, plus the information looks good in Firefox. I think that it's off a little in Opera, but Opera seems to display things differently than either Firefox or IE, and it is legible, so I'm not going to worry about it too much.

Strange thing is that Opera doesn't seem to display the entity &middot;, which I use quite a bit as a separator. Also doesn't display some underlines on links - notably those under the entry title. So that looks a little odd. If I get a chance, I'll look into both issues. In the meantime, try viewing the site in Firefox, or even IE. It looks a lot nicer.

Update: Thanks to Dave for reminding me the other day about debugging CSS. While I've done it countless times, and had even tried most things in this case, I hadn't gone far enough in looking for the problem.

I was out of ideas, and just started moving through the page, introducing background colors and borders, and finally found a winner when I hit upon the contact class. Keep in mind that often the problem might not be where you think it is. Thanks for the reminder, Dave!

Leave a comment