I have a situation where I am creating content to be used in a content management system, and I am running into some CSS issues with page zoom.
The site I put together has, as a feature, a page layout that looks something like the file attached. It looks fine until the user zooms in past 125% in their browser. Then there's a horizontal crawlbar and complaints about not being able to see content.
The layout looks like what I have in my attachment. It is a series of tables, all with the same width, some with one column, some with two, and some with three. I started by explicitly setting the widths of the columns in the style for that. In Mozilla-based browsers, the widths will expand to that of the header row (or take the width as a minimum). In IE, they do not, sticking to the explicitly-defined width. I tried setting the widths by inheritance, up to the container for the page in the CMS's underlying style. I also tried putting the tables in a <div> box with an explicitly-defined width and then set all child styles to inherit their width from that. However, then I don't have the consistency of width I am trying to achieve, and the columns do not appear evenly. I've also tried to constrain the widths using min-width and max-width, but that's not getting the effect I'm looking for.
The structure I'm working with is like this:
main content style > container > table style > tr style > td style, header row OR td style, content row > p style OR ul style
I'll continue digging around in the CSS for the rest of the framework for the CMS I am using, to see if I can find any answers, but if anyone here has any pointers, I'd appreciate it.