Last week I noticed something very odd on Blue Anvil when resizing the browser window; after some casual browsing I discovered it was not just my site with the problem and that it was quite widespread on many ‘web 2.0′ style sites.

The problem occurs when resizing the browser window; cutting off background images and potentially making text illegible. Worse still, the bug also seems to affect mobile browsers with a zoom function, such as opera mobile.

After some dabbling I found a solution, which I shall explain in this post.

The sites that are most affected are those that use ‘content strips’ as I like to call them; that is a full width background with content centered down the middle. I tend to code a ’strip’ like this:

1
2
3
4
5

<div id="header">
     <div class="inner">
          ...Content goes here...
     </div>
</div>

In this example #header is a block level element making it full width with a background image (usually tiled). .inner is my content div; it has a width set and auto-margins to make it centered on the page. The diagram below shows the structure of the layout on blue anvil:

If you make the window smaller and then use the horizontal scrollbar in the browser window you will notice the background gets ‘cut-off’. This seems to affect all modern browsers. From what I can gather, it seems the divs with the background image resize with the browser window, meaning any fixed width content will spill out and be shown on the page background; this demo page has the bug for you to see.

The problem itself is not major for most people, since (I assume) resizing the window and scrolling is quite rare. However I have noticed it happening before on the Nintendo Wii browser, and some mobile browsers (opera mobile for instance) where the problem can be more severe; its more of a problem on these devices because It can prevent the user from being able to read content. For example, when opera mobile cut the background off of the footer on Blue Anvil the white text was not legible, as this screenshot shows (taken from my HTC Diamond using Opera Mobile before I fixed the layout):

I experimented with all sorts of attempted fixes; wrappers, 100% widths, clearing…nothing seemed to work at first. In the end I found a workable solution which was actually quite simple: min-width. Using min-width on the div with the background prevented the browser from shrinking it too much hence eliminating the problem.

This fix is quite simple and does not seem to affect anything else on the page or cause any issues of its own, so it is something which can be added easily to any layout suffering from this problem.

Enjoy.

Found this post useful? Why not buy me a coffee!

Related Entries

• Cross browser compatibility checking
• Creating an accessible yet sexy search box with CSS
• My day of buggy hell with IE - a css story
• How to…use conditional comments
• Using Image replacement techniques

Popular Entries

• Anti-aliased Rounded corners with JQuery
• JQuery Curvy Corners Update (v1.1.1)
• The great wordpress plugin update extravaganza of the year
• Book Review - Learning jQuery
• Back with a New look