Spread the Word

Site Feed

Powered by FeedBlitz

Subscribe with ...

  • Add this blog to my Technorati Favorites!
  • Subscribe in Bloglines
  • Subscribe in NewsGator Online
  • Subscribe in Rojo
  • Add Random 

Bytes (WebLens Blog) to Newsburst from CNET News.com
  • Add to Google
  • Add to My AOL
  • Subscribe in FeedLounge
  • Add to netvibes

Translate This Post

Burn a Feed

Ping the World

Wednesday, February 08, 2006

Form Fields Can Really Mess With Your Layout

I was at a friend's house the other day, and got an unpleasant shock when I checked this blog on her computer (XP, running Firefox at 1024 x 768 resolution).

One of the challenges of CSS-based design is the problem of floats jumping around when screen fonts are resized. (You can see it happen for yourself on a lot of blogs and web sites — just press the Control key and scroll the mouse wheel toward you. You may see parts of the screen jump around, especially as the type gets larger.)

I had worked hard to eliminate the problem on this blog, testing the three-column layout on a variety of browsers and at various screen resolutions. (It usually occurs when your floated DIVs and their margins, padding, borders, etc. add up to more than the width of the containing DIV.)

Everything seemed to be working fine on my computer, so I was truly perplexed to once again see a missing right-hand column on her machine, configured identically. It had popped down below the middle column, well off the bottom of the screen. (Tip: if you find this happening on other blogs, try scrolling down to locate the missing content.)

Then it dawned on me: one of the most recent changes I made here was the addition of the FeedBlitz subscription form at the top right of the screen. I hadn't even looked at the code I pasted into my template. The input field had a default size of "26" — too wide for the column. Sure enough, reducing it to "20" solved the problem.

So, another lesson learned: remember to re-test at various screen resolutions and in different browsers whenever you make code changes that could affect site layout. Never assume that — just because you have already thoroughly tested a design — you can rest on your laurels!


yash gupta said...

I am having a problem, I added a link to blogmad on my blog and when I`m viewing the whole page its fine but when I go to see only one post, the link appears right on top outside the sidebar. Can you tell me how i can fix it?

Pam said...

Hi, I'm sorry, I'm afraid I can't help much. I visited your blog and couldn't see the glitch you describe.

One problem, though: on my screen, in IE6 at 1280 x 1024, you have a peek-a-boo float issue. The right-hand float has popped down below your lefthand sidebar. It's fine in Firefox.