Internet Explorer Min and Max Width Bug + Fix

When I built this website, I wanted the layout to be fluid, but not too fluid. My reasoning for this is mostly due to my own experience browsing the web. The resolution on my computer is 1920×1200, which gives me plenty of screen “real estate”, but it typically makes fixed width websites look very very tiny with a huge amount of white space (which just emphasizes the small look) on each side of the content. On the flip side, a completely fluid website looks very stretched and awkward in most circumstances.

So, I decided I would try and build a website that would look good in all window sizes be it in IE or Firefox. I tossed in some simple styles into my CSS (you can view the CSS below) and viola! Firefox was working great! But when I checked it out in IE, it didn’t work at all. After a bit of research and fiddling with my CSS, I figured out how to get it working in IE (or so I thought). A handy little bit of JavaScript in the CSS. Note: this will only work if the visitor has JavaScript enabled.

This little chunk of JavaScript is an if statement, basically saying if the width of the browser is less than 740, set the width of the site to to 740 pixels. If that is false, it then checks to see if the width is greater than 1100 pixels, set the width to 1100 pixels. If both of those checks are false (meaning the width is between 740 and 1100 pixels) it makes the width auto, and scales to fit the available screen. This worked amazingly until I tried to make the screen smaller than 740 pixels. When I did this, IE froze. I tried a few times to make sure it wasn’t just my computer acting up.

I’m not 100% sure why it froze, but it has something to do with setting the width to the same value as the check when you scale down (max width worked fine though). Maybe it keeps calling the code infinitely and thats what causes it to freeze. Who knows? Anyways, the fix was simple, I altered the first value in the check by 10 pixels so the values were no longer equal and the problem was solved. In the end my CSS for min and max widths worked in Internet Explorer and Firefox. You can check it out below.