I am currently working on a project in which we're using YUI reset-fonts-grid.css to handle layout & font reset. My layout is setup fine (using nested yui elements to get multiple columns, etc.).

However: When testing in IE6/7 with 'Ignore font sizes' selected in Internet Options -> Accessibility the layout is, to be frank, shot to hell.

Since YUI Grids uses EMs to determine the width of columns within their containers, these expand with the increased font size. While this is 'okay' as a behavior, it causes problems when using background images, which of course cannot scale.

If I force a pixel based width on the columns (say, 960px) then the layout stays intact but as the font-size increases the columns within the layout get narrower and narrow, I suspect due to the use of EMs to define space between columns.

Does anyone have any ideas on how to handle this issue?

4 answers

This was chosen as the best answer

Unfortunately there isn't much you can do here. While YUI sets the container width in ems, the flexible columns inside are percentage based (all of the ones using the yui-g* classes). You could do a browser targeted CSS for the version of IE he is using and change the #doc (or whichever you are using) to a percentage based width. It would help some I'd think. If you wanted to be really sneaky you could include a CSS file only for his IP address that corrected the issue.

Good luck.

Answered over 7 years ago by Daniel Ryan

I say this in all honesty: how worried are you about the extremely small minority of people who configured IE6/7 to "ignore font sizes"?

I firmly believe that pretty much anyone under nearly any circumstance should be able to reasonably view a web site. I have to imagine the configuration you describe is one of the rarest.

So, really, in your opinion, are you worried? And if so, is the presentation still good enough as it stands?

EDIT per @Darren: You may have to "undo" some of the CSS that controls font-sizing, spacing, etc. to widths and units that work better for you. It sounds like you were already on that track.

Or you could get pretty hackish and do some server-side stuff to fix his problem only. Which may be the answer, frankly.

Answered over 7 years ago by Nate Kennedy
kips 0

Here's another way of framing your problem, courtesy of Douglas Bowman: you want "truly flexible interface components which expand and contract with the size of the text." The article that quote comes from is called "Sliding Doors of CSS" (http://www.alistapart.com/articles/slidingdoors/).

Bowman's article uses navigation tabs as an exampe. Here's an article that uses the sliding doors technique on a button: http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx.

Answered over 7 years ago by kips

The only reason this is an issue is because the head of development keeps his browser set to display large font sizes. So yes, I am not only worried - I have already been informed that its a problem.

Answered over 7 years ago by Darren Newton