Design is still broken
by Volker Weber
Manfred tells me that my design is still broken on his Windows notebook with a 1400 x 1050 display, both in Internet Explorer and Firefox. The comments form is running very wide. And I have no idea why this is happening. So I need your help.
These are the declarations inside the comments form:
<input tabindex="1" id="author" name="author" size="35" />
<input tabindex="2" id="email" name="email" size="35" />
<input tabindex="3" id="url" name="url" size="35" />
<textarea tabindex="4" id="text" name="text" rows="12" cols="70"></textarea>
The stylesheet screen.css specifies the font size:
textarea, input {
font-size: 1em;
}
W3C says about the size parameter:
This specifies the visible width of a text or password field. For fixed pitch fonts, the size attribute specifies the maximum number of characters visible, while for variable pitch fonts, the attribute specifies the width in en units (half the point size).
The screenshot shows that Manfred is displaying a proportional font, so size should be 35 en. But it appears not to be the case. Look at the same page rendered in Safari.
Does anybody have an idea what is going wrong?
Update: Manfred has resolved the issue by removing "Lucida Grande.TTF" from his fonts folder. It appears that the font was broken, and if you look at his screenshot, you may concur.
Comments
Also running at 1400x1050. No problem here, Firefox 1.5 and IE 6 both look ok.
Posted this from IE 6 and it looks just fine.
Size does not matter: running 1600 x 1200 Firefox 1.5 and IE okay for me. No visible glitches.
Looks similar to the Screenshot of my search box you send me. I simply added
style="width: 140px;"
to the input-Tags. If you don't use any pixel specifications anymore you might try em in there (which I don't know anything about honestly).
Isn't this more a issue than the actual size of the boxes themselves?
I sometimes get these visual errors whilst overseeing my DIV's or spans.
Ralph, 1 em is the height of the current font. Most browsers default to 16 pixel high fonts, so 1em is 16px in this case. 1en would be 8px. As you enlarge or shrink your display font, em and en enlarge and shrink with it. The mdash — has the length of 1em. The ndash ... you get it.
I am using em for all sizes so that the site grows or shrinks with your preferred font. I am also shrinking the default font size by 80% to be more inline with most people's viewing habits. I might as well set the font to 0.8 em then, but there is a bug in Internet Explorer which is best worked around by specifying the default size in percentages.
now if only the images would resize themselves too, it would be great for scaling ;)
Sascha: If you don't want to wait to get this feature in firefox, you could use opera instead, which does exaktly what you want.
Looks fine to me on my 1400x1050 T41p XP pro with fonts at 125%
It looks a bit like a probem in the installation rather than in the CSS code - not only all the others, also me has no problem at the same resolution.
But for being sure - did you try to figure out the effective CSS settings for that broken display with the Web Developer extension? Probably it's CSS/View Style Information gives you valuable information.
Curious: On my notebook, there was an additional folder 'iTunes' below the C:\Windows\Fonts folder, which contained the indentical "Lucida Grande.TTF" file.
So - maybe this two .TTF files were a leftover from a trial-installation of on older iTunes release in the past.
Removing this font was the solution and now vowe.net looks great again. :-)
