Last modified: 2009-01-23 22:19:00 UTC
Created attachment 5615 [details] Screen shot IE7 in XP with 120dpi fonts Some folks have larger than default DPI settings on their computers, which makes font sizes larger. Steps to reproduce: 1) Fire up Windows XP 2) Go in display settings, advanced, and crank up DPI from 96 to 120 ("Large fonts") 3) Pull up Wikipedia and find the Jimmy notice This can probably also be reproduced by zooming in or bumping font size settings in many browsers. On-wiki discussion: http://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Fundraising_banner_.28Personal_appeal.29
Curse you overlap! Tried removing the vertical height at first but that would look weird with the bottom part of the piece not touching the border. Instead changing the font size in px seems to work best. Try this one. http://dev.donate.wikimedia.org/index.php?title=Special:NoticeTemplate/view&template=2008_jimmy_letter_palatino&wpUserLanguage=en
I can see this overlap in Firefox on Ubuntu with, as far as I know, totally default font settings. "Wales" breaks onto a third line. Since you're doing line breaks manually here, why don't you just set the width to 100% instead of 500px to begin with?
Are you seeing this with Firefox 2 or 3? And is it with any zooming? I'm testing in Ubuntu 8.10 with FF3 and everything wraps correctly even if the screen size is tiny. Would love to be able to reproduce this for a fix and possibly see a screenshot if this still persists.
Created attachment 5618 [details] Screenshot on Ubuntu in Firefox 3.0.5, no zoom enabled or anything This is what I'm seeing with no special changes on my part that I can think of. I have custom fonts turned off, so the font being used is different, but changing that back to normal doesn't change anything. I can confirm that no zoom is enabled, pressing Ctrl-0 doesn't change the screen at all. The exact version is Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5.
Created attachment 5619 [details] Same as previous, with width removed for div I just deleted the "width: 500px" rule in the style attribute of the div class="notice-text" (in Firebug) to get this screenshot. Since the height of everything is specified pixel-perfect, *any* line-breaking will cause this kind of overflow. It looks like the only possible effect of specifying a width here less than 100% would be to cause wrapping, so I don't see why you should. There's no background on the div or anything. Removing that rule should solve the problem in all browsers (although if the text is *really* *really* wide it might then overflow horizontally).
Removing the width causes vertical overflow to happen on small screen sizes. Which is all sorts of not ok.
Ah, so the width is there to set a minimum, not a maximum. You could do min-width: 500px if you didn't mind small IE6 screens. Or just set width: 600px, although that will do more screen-stretching. Setting white-space: nowrap; might be the best solution: it looks a little funny, but only for the people where it currently looks terrible, so it's at least a [[Pareto improvement]], which is more than can be said for anything else I can think of.
Resolving as the notice is no longer running and we've done our best to accommodate as many screen sizes as possible and retain the structure of the banner.
