12 replies [Last post]
stu20001
stu20001's picture
Offline
Regular
Last seen: 13 years 28 weeks ago
Joined: 2003-06-23
Posts: 30
Points: 0

Hi

This is doing my head in so any help greatly appreciated. This is my stylesheet:

BODY {font-family: Arial, Helvetica, sans-serif; font-size : 88%}

P, LI, TD{font-family: Arial, Helvetica, sans-serif; font-size : 88%;}

UL LI {font-size: 88%;}

UL P {font-size: 100%;}

UL UL LI {list-style : circle;font-size: 100%;}

The problem is on a page with a list inside a table cell. The text in the list is coming out 88% of the size of the rest of the text. But if I don't put a font-size for UL, the text comes out at 100% size, 12% bigger than the body text.

How can I stop this from happening?

Does this make *any* sense??

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Problem with nested elements

Nope Laughing out loud

Seriously tho... I assume you mean:
BODY text = 88%
ergo LI text in TD = ~ 79%? And you want it 88%?

I ran off a little example but can't for the life of me see a difference between the font sizes. Maybe in my example they're all the same, who knows?

BTW there should be a semicolon at the end of the BODY declaration, after the font-size... and you shouldn't have a P within a UL tag. But they're probably not causing the problem.

<edit>
Also which browser are you using to test?

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

stu20001
stu20001's picture
Offline
Regular
Last seen: 13 years 28 weeks ago
Joined: 2003-06-23
Posts: 30
Points: 0

Problem with nested elements

Now I'm lost Shock

What I mean is this happens:

The page content is sitting in a table (sorry - not using CSS positioning yet - its an old old site Smile ...)

< Table starts >

< td >

body text body text body text body text body text body text etc etc blah blah blah

< nested table starts >

< td >

body text body text body text body text body text body text etc etc blah blah blah

    List List
    list

Back to the body text....etc etc etc etc

</ td>
</ table>

The problem only happens when the list is sitting inside a table cell which is nested in an outer table. If put the list in the top level table the font-size stays the same as the body text

[/]
dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Problem with nested elements

Makes two of us... 8-[

Right I get that bit. But what is the problem exactly?
Let's assume the 'normal' page text size is 100.
You've set it so the body text is size 88.

What size text do you want for the list? And what size is it currently?

See from my logic, if you have a TD that sets text to 88%, and then nest something in that that also sets the text to 88%, the nested will be relative to the TD, so about 79% of the original.
That probably still makes no sense, it's the reason why I can't write up projects... :?

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

stu20001
stu20001's picture
Offline
Regular
Last seen: 13 years 28 weeks ago
Joined: 2003-06-23
Posts: 30
Points: 0

Problem with nested elements

Thanks for persevering with this one Smile

Easiest way is to just show you.....

See this page:
http://www.cieh.org/events/conference2003/npc_prog1.htm

The lists are inside a table cell nested inside the main table that controls the page layout. See the font-size is the same as all the rest of the body text

Now look at this page:
http://www.cieh.org/about/policy/index.htm

Same stylesheet only look at the lists this time - the text is being rendered at the default 100% size

Stylesheet is here:
http://www.cieh.org/sitestyle.css

The stylesheet does not declare a style for LI elements.

If I put in LI {font-size: 88%} then that sorts out the problem with the first example page and the list appears at the same font-size as the rest of the text. But then the lists on example 2 shrink to 88% of 88%........

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Problem with nested elements

I changed the UL P def to 88%; this changed the top two to the right size, but not the others.

I'd suggest being consistent around the site as well; either wrap all the LI elements in a P tag, or wrap none; this might make things easier. Haven't quite got my head around why in the first one, the LI elements are the right size... and in the second one, the one LI element without a P isn't. Working on it...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

stu20001
stu20001's picture
Offline
Regular
Last seen: 13 years 28 weeks ago
Joined: 2003-06-23
Posts: 30
Points: 0

Problem with nested elements

Annoying isn't it Smile

The problem is its a pretty big site that has been worked on by different people for a number of years now and so theres all kinds of HTML tricks and bodges being used. So you end up with a situation where CSS works for some pages beautifully but you get different results in others. Its on my To Do List to go through it and sort out all the HTML but for now I have to make do.

Anyway, there seems to me to be a difference between how IE5 and IE6 treat size inheritance? In IE6 all the text on this page: http://www.cieh.org/events/conference2003/npc_prog1.htm is at the desired 88% size. In IE5 the text has reverted to default 100% size

Surely I don't need to creae different stylesheets for IE5 and IE6 and how do you detect for different versions of IE?

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Problem with nested elements

OK got it!

The text size in the lists is actually 88% of 88% of 88% -- 68% or so. The sizes are cascading down properly.

Listing the elements that shrunk the text, on the page that wasn't working there was:
BODY TD LI (68%)
On the other page that was, you had:
BODY TD TD LI (59%)

The way to get round this is give the second TD in the second page a class, ie.<table><tr><td class="noshrink">with the css .noshrink { font-size : 100% } which will override the font-size in the TD.

A bare-bones example is attached (based on the original code), with some text around so you can see how much it's shrinking. Blue boxes represent an LI element, red a P element (just so I could see what was affecting what!)

Hope that helps, if you need it clarifying more, don't hesitate to ask!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Problem with nested elements

Was scribbling that as you posted Laughing out loud

I don't have IE5 to hand, but as mentioned about that page in IE6 is 68% font size... god only knows what IE5 is doing!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

stu20001
stu20001's picture
Offline
Regular
Last seen: 13 years 28 weeks ago
Joined: 2003-06-23
Posts: 30
Points: 0

Problem with nested elements

Your suggestion seems to be pretty much working. There is still a difference between IE6 and 5....

In IE6 text is like this

but IE5 text is like this

.....but at least all the text on the page is the same size.

Many thanks for your help and taking the time to look into this in such detail. Have a virtual pint on me

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Problem with nested elements

Is all the text a little larger in IE5 that IE6? I think IE5 ignores the DOCTYPE and renders text one size larger than IE6.

Don't know why I didn't remember that before...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

stu20001
stu20001's picture
Offline
Regular
Last seen: 13 years 28 weeks ago
Joined: 2003-06-23
Posts: 30
Points: 0

Problem with nested elements

Yeah it is and yes, I think it is something to do with the DOCTYPE declaration. I'm using:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd" >

...which I thought was the right thing to do but since I implemented that I've read things which have caused me to question that decision.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Problem with nested elements

The DOCTYPE is fine, it's a good thing to have one of course - it's just that IE won't actually take heed that you're using a DOCTYPE, so do things slighlty differently. Moz displays it fine, I have nothing else to test it in.

What did you read that was bad?

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.