why are the bottom of my letters cut-off in internet explorer?

[windandwaves]

Please have a look at http://www.winsborough.co.nz/our-staff/ in
internet explorer 6 / 7 . On both sides, in the menus, the font is
cut-off at the bottom. How can I fix that?

 

[Jonathan N. Little]

Please have a look at http://www.winsborough.co.nz/our-staff/ in
internet explorer 6 / 7 . On both sides, in the menus, the font is
cut-off at the bottom. How can I fix that?

Not that you'll listen, but one way is to stop using pixels to size
everything, especially font related elements.

 

[windandwaves]

Not that you'll listen, but one way is to stop using pixels to size
everything, especially font related elements.

Hi Jonathan

Thank you for your comments. I changed all the font-sizes to em and %
and the problem prevails... Sorry, but that does not solve it.
Thanks for your help though.

 

[asdf]

Not that you'll listen, but one way is to stop using pixels to size
everything, especially font related elements.

....hey... at least he hastn't got a ghastly background image that makes the
text hard to read in his menus

 

[dorayme]

Hi Jonathan

Thank you for your comments. I changed all the font-sizes to em and %
and the problem prevails... Sorry, but that does not solve it.
Thanks for your help though.

What is your

html {
overflow-y: scroll;
}

about?

 

[Jonathan N. Little]

Thank you for your comments. I changed all the font-sizes to em and %
and the problem prevails... Sorry, but that does not solve it.
Thanks for your help though.

And the margins,padding, line-height, and other dimensions for block
elements containing your text as well?

 

[windandwaves]

What is your

html {
overflow-y: scroll;

}

about?

The designer liked to have an ie feel to the scrollbar in FF, go to
http://www.winsborough.co.nz/contact/ using FF and you may see a
scroll bar appear even if there is no scrolling.

 

[windandwaves]

And the margins,padding, line-height, and other dimensions for block
elements containing your text as well?

I hear what you are saying - but why should it make a difference?

 

[windandwaves]

And the margins,padding, line-height, and other dimensions for block
elements containing your text as well?

Hi Jonathan

You were right, I fixed the line-height. Sorry, I did not see that
one in my css..... FIXED.

Questions:

If I write

li {font-size: 1.3em}

and then I have a nested li, eg.

<ul>
<li>option 1
<ul>
<li>option 1.a</li>
</ul>
</li>
</ul>

Then the option 1.a is going to be bigger than option 1. I think that
is useless. How do I go about fixing that?

Thank you

Nicolaas

 

[dorayme]

The designer liked to have an ie feel to the scrollbar in FF, go to
http://www.winsborough.co.nz/contact/ using FF and you may see a
scroll bar appear even if there is no scrolling.

Nope. Just comes on when it needs to in FF. Be interesting to see
if you could make this page (as an example) fit into 800 wide.
There is little enough (I do not mean unimportant) material here
and if it was not for the graphic constraints of the decorative
images, would easily do so.

I think it is true that while many will use this site fine, it
would be clever if you could work it so that it was a bit more
fluid. There are people who would click the text up a few notches
(I do as the day wears on) and there are people who find it
convenient and/or appreciate it when they can to have the browser
on 800px wide max. Clicking text up gets to too quickly break
this design. Lets give this test a name: How about
"text-click-index", the shorter the range before the design
breaks its graphic design looks, the less good it is qua web
design in the ideal? Yours is not totally bad and not totally
good. But it is something to keep in mind.

What Jonathan said to you about em dimensioning is really quite
important, not just for fonts themselves, but for all spaces
where fonts are related. Please consider those remarks carefully.

 

[dorayme]

If I write

li {font-size: 1.3em}

and then I have a nested li, eg.

<ul>
<li>option 1
<ul>
<li>option 1.a</li>
</ul>
</li>
</ul>

Then the option 1.a is going to be bigger than option 1. I think that
is useless. How do I go about fixing that?

You could:

li {font-size: 1.3em}
li li {font-size: 1em}

 

[windandwaves]

Nope. Just comes on when it needs to in FF.

It works for me in FF latest on windows XP. It is not a biggy - is
it?

Be interesting to see
if you could make this page (as an example) fit into 800 wide.
There is little enough (I do not mean unimportant) material here
and if it was not for the graphic constraints of the decorative
images, would easily do so.

I think it is true that while many will use this site fine, it
would be clever if you could work it so that it was a bit more
fluid. There are people who would click the text up a few notches
(I do as the day wears on) and there are people who find it
convenient and/or appreciate it when they can to have the browser
on 800px wide max. Clicking text up gets to too quickly break
this design. Lets give this test a name: How about
"text-click-index", the shorter the range before the design
breaks its graphic design looks, the less good it is qua web
design in the ideal? Yours is not totally bad and not totally
good. But it is something to keep in mind.

Yes, I am working on a smaller window size, however, from our stats
info, we found that there are no people who view on smaller
screensizes. I have to respect the designer as well...

What Jonathan said to you about em dimensioning is really quite
important, not just for fonts themselves, but for all spaces
where fonts are related. Please consider those remarks carefully.

Yep, I totally agree with this approach. It mainly applies to height,
line-height and that sort of thing. Of course you can do width:
200px.

I still have the question above about li within li. That does not
make much sense to me.... nesting screws up font-sizes in em. right?

 

[dorayme]

On Sep 21, 3:31 pm, dorayme

Yes, I am working on a smaller window size, however, from our stats
info, we found that there are no people who view on smaller
screensizes. I have to respect the designer as well...

But your stats are not addressing one of my points. Put it this
way, I have more screen size than almost everyone in the world
but i still find it convenient often to limit browser windows to
800. I don't have to, i find it nice when i want to. Your stats
show nothing about this particular aspect unless the survey was
very particular and good (very rare surveys with these
qualities).

 

[windandwaves]

But your stats are not addressing one of my points. Put it this
way, I have more screen size than almost everyone in the world
but i still find it convenient often to limit browser windows to
800. I don't have to, i find it nice when i want to. Your stats
show nothing about this particular aspect unless the survey was
very particular and good (very rare surveys with these
qualities).

Ok, yes, I hear what you are saying... good point. But what if you
want to view a picture that is 960 pixels wide, would you still go for
an 800 wide screen?

 

[Beauregard T. Shagnasty]

Ok, yes, I hear what you are saying... good point. But what if you
want to view a picture that is 960 pixels wide, would you still go
for an 800 wide screen?

I would press F11, view the image, then press F11 again and return to my
normal-sized, non-maximized browser window.

Not everyone uses a maximized browser window. In fact, as screens get
larger, fewer and fewer people are maximizing. My browsers are normally
around 800-850 pixels wide on my hi-res monitor. Sometimes smaller.
Narrow and tall.

And don't forget mobile phones and PDAs. View your site in Opera and
press Shift-F11 for a reasonable approximation.

 

[Jonathan N. Little]

Ok, yes, I hear what you are saying... good point. But what if you
want to view a picture that is 960 pixels wide, would you still go for
an 800 wide screen?

What if your visitor's monitor is set at 800x600? Some folks still have
small monitors or (I know several folks with less-than-perfect eyesight
that run at that resolution just read the text).

 

[dorayme]

Ok, yes, I hear what you are saying... good point. But what if you
want to view a picture that is 960 pixels wide, would you still go for
an 800 wide screen?

You would have to open the browser wider! 960px is not a size
that occurs in good authoring often, and not without warning or
specific and well understood reasons - like for example on a
photographic site where the author is making big enlargements
available.

Or on private commercial communications where, for example, I
often have up to 1400px wide to let company execs see drafts of
art work (that contains text) in their browsers. They can scroll
or open up their browsers if they have big screens with high res.

 

[Bergamot]

I changed all the font-sizes to em and %

OMG :-(

body {
font-size: 62.5%;
}
li, p, h1, h2, h3, td {
font-size: 1.3em;
}

Do you have any idea what this does when the user sets a minimum
font-size in their browser? The ridiculous 62.5% is ignored, and the
rendered font ends up a ridiculous 1.3em of the minimum, which is
stupidly large.

I don't know who started this crap, but it is an incredibly stupid
practice. Leave the bloody font at 100%!

 

[Chris F.A. Johnson]

Yep, I totally agree with this approach. It mainly applies to height,
line-height and that sort of thing. Of course you can do width:
200px.

That's probably why the words are too wide for their containers
when I view the page: <http://cfaj.freeshell.org/testing/winsb.jpg>.

 

[Guest]

...hey... at least he hastn't got a ghastly background image that makes the
text hard to read in his menus

This, too:
http://littleworksstudio.lws.lan/parts/lwstfa.gif
http://littleworksstudio.lws.lan/parts/lwsMedallion.gif