7 replies [Last post]
EdAROC
Offline
Regular
Rochester NY USA
Last seen: 16 years 45 weeks ago
Rochester NY USA
Joined: 2003-12-10
Posts: 19
Points: 0

:?

I'm a newbie and really striving to become proficient with css. Learning by working on a project converting/revamping our church's website www.asburyfirstumc.org

I give up (after a day and a half). The css was working before, now it's not. (I know I must have changed something ... just cannot find it.)

Objective: The submenus (upper left and upper right) are to be in a smaller font size (8 pt). I defined the <table width="140"...> so that "For More Information:" fits on 1 line (no wrap).

The files are attached and I uploaded them to my isp:

http://home.rochester.rr.com/edaroc/afwebsite/insert.html

Help? Cool

P.S. Any tips and advise are always welcome.

Life is a party...
Sometimes you host
Sometimes you're the guest

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

css - font size in class &quot;stopped&quot; working

Hi

I'll leave aside anything else I observed, coz the site is 'under development' (just like the one I'm doing for my local group of churches, you can see what I mean by going here www.cornerstonechurches.org.uk - I stopped working on it to get a stable css layout instead of the tables I used).

Your problem is threefold:

1. Font sizes. Using points rules out inheritence. For screen use, put font-size:100% the the body tag like this:

body {
font-size:100%;
}

Then ALL screen font sizes should be in ems, like:

.mystyle {
font-size: .6em;
}

2. Inheritence. Given you change to my above recommendations on ems. If you have a div with a font-size set, and another inside it with another font-size set, they sort of multiply (like, if it were %'s, 70% of 80% is 56%).

3. You have a div (submenu1) set to 8pt, but inside that you have a td which holds the menus, set at 10pt. Instead, change the <a tag to the submenu1 class:

<tr><td><a href="http://home.rochester.rr.com/edaroc/afwebsite/news.html" class="submenu1">News</a></td></tr>

As an aside, I wouldn't use tables to make a menu, use an unordered list instead, see www.alistapart.com/articles/taminglists/

Trevor

EdAROC
Offline
Regular
Rochester NY USA
Last seen: 16 years 45 weeks ago
Rochester NY USA
Joined: 2003-12-10
Posts: 19
Points: 0

css - font size in class &quot;stopped&quot; working

Hi Trevor,

LOL - I'll tell you why I'm laughing later.

OK, let me see if I get this correct:

The class specs in the <table ...> tag, which I expected to be in effect until </table>, are "superceded" by the td used in the
body, div, p, th, td, li, dd {... font-size:...} statement.

Tested by changing that 1st statement, using just body { ... } and then things worked OK. Therefore, I must have added the others (div, p, ...) this week - copying from something I read on a tutorial.

The issue of units has been a merry go round. ems, px, "small", pt. As I undertand how the "ems" works is that inheritance takes place and things become relative. For example: revised css using ems and fussed with sizes until they were what I wanted to see. BUT, when I then wanted to tweak the general body text size a little bigger, the submenu1 class got larger.

??? What is best technique to avoid this "inheritance" problem?

Is this correct ... If I want to control the font sizes throughout, then I set the body size to a specific px then everything else, defined in ems, would be relative?

OK, the LOL ... you opened your reply by stating you were going to deal with just my question because you understood this stuff is all in development. Then at the end you suggested using unordered lists and css for the submenu. Smile That will be the end product approach. I am using tables now in order to convert the webpages to the new design - using the horizontal nav for major areas and the submenu for local links. Once I get the layout converted I'm going back to convert the tables to the unordered lists/css technique. I'm laughing because you are "one step ahead of me" - it felt good to be "confirmed" on where I was heading.

Take care, and thanks again,
Ed

Life is a party...
Sometimes you host
Sometimes you're the guest

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

css - font size in class &quot;stopped&quot; working

EdAROC wrote:
The issue of units has been a merry go round. ems, px, "small", pt. As I undertand how the "ems" works is that inheritance takes place and things become relative. For example: revised css using ems and fussed with sizes until they were what I wanted to see. BUT, when I then wanted to tweak the general body text size a little bigger, the submenu1 class got larger.

??? What is best technique to avoid this "inheritance" problem?

Hi

Initially I seem to have done what you are doing, only about 18 months ago! Tongue

I too went backwards and forwards, but eventually I got the message.

DON'T set FONT SIZES on HTML tags (TD, IMG, TR, TABLE, LI, UL, FORM, INPUT etc).

Instead, all content inside these should be in divs, to which you either attach a class or make them a unique id. That way, no inheritance occurs. This route has another advantage, as now you have very tight control over the style.

It does add to the coding a bit, but gets easy after that.

ALSO (coz you will find out the hard way otherwsie):

1. design for xhtml strict
2. having a paragraph in italics gives IE problems. Be warned it gets padding wrong, but you can fix it quite easily.
3. having a paragraph justified same again on problems with IE, just give the text some elbow room.
4. NEVER have text inside a div. Always put it in a structural (are these called block?) tag like <p> (which, following my guidelines, you WON'T have styled). MAC IE throws a fit sometimes if you don't do this.
5. Be aware of the many IE bugs (and for that matter the classic clearing div closing hack for mozilla/opera) for position, overflow and floats.
6. To center content on a page, there are 3 different browser methods to do this, and one surefire way to do it in one set of code (search for a post I made on this on this forum).
7. Keep fonts simple for accesibility (font-family:verdana, arial, sans-serif)
8. Get a good editor and do it by hand (quite a few folks agree with me that WebCoder 4 is excellent, and free!)

www.positioniseverything has excellent guidance, notes, tips, etc. on hacks/bugs

And finally, keep smiling Laughing out loud

Trevor

EdAROC
Offline
Regular
Rochester NY USA
Last seen: 16 years 45 weeks ago
Rochester NY USA
Joined: 2003-12-10
Posts: 19
Points: 0

css - font size in class &quot;stopped&quot; working

Hi Trevor,

There is so much information in your reply !!! THANKS! (Yes, I am shouting it.) You have made so many little "important but never explicitly said" comments...

So that you have a reference point - our church's website is asburyfirstumc.org

I inherited it with: frames, very loose html coding, and no css. Frames:
....header.... logo & mission statement
nav content content frame named "edit"
.....footer.....
The end product will replace frames with DIVs, xhtml/css, minimum javascript. DIVs:
.........banner.........
............nav...........
.........header......... path to webpage last updated / Page Heading
submenu content
..........footer..........

This morning I installed the horizontal nav bar (into the header frame) and removed the old one along the left side. (You missed it.)

Sounds like what I learned yesterday by changing the css statement from
body, div, p, td, {... font-family: verdana, arial, sans-serif; font-size:10pt;...} to just body { ... }.

Question then: Since "99%" of the website will be verdana (etc.) and "10pt", can I specify it (once so I don't have to repeat it throughout):
body { ... font-family: verdana, arial, sans-serif; font-size: (? use px or what unit? ...}. A better question - what do you recommend I specify in the body statement, or "put at the beginning"?

You comment "all content ... in divs to which ... class or id". This is a case of the right words at the right time - I fully understand what that means.

"Extra coding" OK if it means I can deal with 1 variable at a time. (Inheritcance introduces multiple variables ... tweaking something that is a parent will change the child.

1. "xhtml strict" - I am coding strict and DOCTYPE-ing transitional. (Too many old pages out there.)
4. "NEVER have text inside a div" goes along with coding strict. Yes, these would be block level tags.
5. Be aware of the many IE bugs ... to which I add "and idiosyncracies among the various browsers". This, to me, is the nightmare of webdesign - handling the browsers' shortcomings to W3C specs.
6. "... center content on a page ..." - I am seriously thinking the end product sized to width of 700. Found when printing (with 1/2" page margins) the text flows the same. I will be researching this, for sure!
7. "Keep fonts simple..." - is your example what you have adopted? It's the same as what I am adopting.
8. Editor - using Notepad+ and like it. Will check out WebCoder 4.

My next step on our website is to go through the pages and get the DIVs in place for the header, submenu and main content. (Clean up from installing the new css).

Then I will convert the submenus to unordered lists with css.

Then totally eliminate the frames.

Thanks again - you're a good teacher. I have learned so much in the last 24 hours.

Ed

Life is a party...
Sometimes you host
Sometimes you're the guest

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

css - font size in class &quot;stopped&quot; working

EdAROC wrote:
So that you have a reference point - our church's website is asburyfirstumc.org

Yes, I saw that Tongue

Quote:
Question then: Since "99%" of the website will be verdana (etc.) and "10pt", can I specify it (once so I don't have to repeat it throughout):
body { ... font-family: verdana, arial, sans-serif; font-size: (? use px or what unit? ...}. A better question - what do you recommend I specify in the body statement, or "put at the beginning"?

Put the font-family in the body tag, remember to use the one I gave, as (amazingly) some 10% of web users have either one or the other of Verdana and Arial, but not both.

Also put font-size:100% here and see what it looks like on unstyled text. Drop it by 5% blocks until it looks right for your default. Now you don't have to set those again for divs where the default is good to go.

Quote:
Found when printing (with 1/2" page margins) the text flows the same. I will be researching this, for sure!

Set a print stylesheet (you should anyway, if you expect folk to print pages). You should set fonts to point sizes, and you can set margins, etc. You can also specify different colors so it prints OK, and switch off background images, menu's etc.

Quote:
"Keep fonts simple..." - is your example what you have adopted? It's the same as what I am adopting.

Whenever I can Laughing out loud

Quote:
8. Editor - using Notepad+ and like it. Will check out WebCoder 4.

Get it now, registration is free, tonight, here: www.tsware.net
Seriously, you will never look back.

Trevor

EdAROC
Offline
Regular
Rochester NY USA
Last seen: 16 years 45 weeks ago
Rochester NY USA
Joined: 2003-12-10
Posts: 19
Points: 0

css - font size in class &quot;stopped&quot; working

Quote:
Also put font-size:100% here and see what it looks like on unstyled text. Drop it by 5% blocks until it looks right for your default. Now you don't have to set those again for divs where the default is good to go.

So, that's the secret. OK, so, now I think I'm "losing the concept" for font-size's: Let's say I know what size I want for submenu's so that I can define the width of "the box" to be 140 pixels. The main content is a gray area. If I use tweak the body to what's best (at the moment) then change it later, maybe a tad bigger, won't the submenu size change?

:? I was hoping to be able to use the same stylesheet for both screen and monitor.

Thanks again for your time and advise. Some day I hope to use that line from "My Fair Lady", "I think I've got it!"

Ed

Life is a party...
Sometimes you host
Sometimes you're the guest

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

css - font size in class &quot;stopped&quot; working

Hi

Sadly, you are right, if you change it, you will affect all elements.

Unless you decide to give the body area a class that doesn't exist (in which case it has no effect).

Then, should you chose to so do, you can modify its font-size by simply adding that class to the style sheet.

Trevor