I recently created a web page in a 960 px fixed witdth container that looked fine on my computer. Then I noticed on a couple of other computers that the text inside the interior divs ran out of room and could not be read. The reason was because these other computers had their browser text size set to larger or largest. I had designed the page based on a medium text size in firefox and ie8.
Here is my question: What is the best plan of attack to creating a page with lots of content and multiple containers that will not be affected (or substantially affected) if people have different settings on their text sizes?
Here is a link to the website I am working on: http://gigharborrealestate.com/homes-for-rent.html
Thank you for your thoughts.
The web is user-centric. You can't control which browsers, preferences, devices, displays or text-sizes people use. So you must build your layouts with all this in mind, keeping the layout height flexible and test in all major browsers with different settings. Actually, it's not as hard as you may think.
The height property is a restriction in all browsers except IE. Avoid the use of Height on any division with text in it. If you must reveal a background image, use Min-Height for browsers that support it and a hack or conditional comment for pre-IE7 browsers that don't.
min-height: 400px; /**for modern browsers**/
_height: 400px; /**for pre-IE7 only**/
Thank you for your thoughts. I am now in the process of trying to redesign my site in an elestic layout.