Help with text font size throughout page [Archive] - SpeedGuide.net Broadband Community

View Full Version : Help with text font size throughout page

Ghosthunter

07-23-04, 09:08 AM

http://www.nnjpr.org/Chester.htm

If you look at the text like under Activity Reported and then under Investigation summation, it is different and happens through out the pages

I cannot figure out how or why it is doing that?

Any ideas? I want the text font to look uniform.

Thanks

cyberskye

07-23-04, 12:29 PM

It's because the Activity reported section is using inline styles (which only effect til the closing tag, since that's the tag the style is applied to) and the next section is using straight HTML markup. Pick one and run with it.

You could define a CSS class for your tags: p.main {font: xx; font-family= xx; etc } --this could be external CSS sheet or defined at the top of the page.

Then in your page, you make the tag and that formatting would apply to this paragraph

Activity Reported:  Built circa 1850, the family residing
in the house has reported feeling several presences.  Visitors to the
house have felt a heaviness in certain rooms, while some overnight guests
have been physically touched.  One family member has heard the voice
of a woman saying, "I'm lonely".  Objects have been known to move as
well as sounds of footsteps and water mysteriously appearing in the middle
of the floor.

 


Investigation Summation: 
Along with the clients, we were honored to have <a href="http://www.donnareis.com/index.html">Donna Reis</a>,
author of 

Skye

Ghosthunter

07-23-04, 12:32 PM

thanks i will work on that i already have a css sheet so will just add that

cyberskye

07-23-04, 12:35 PM

Good deal - one word of warning...you may want to remove your inline styles if you are using an external sheet (refering to your <p style= tag). You will run into precedence issues.

EDIT -- if you are using styles, it's generally less confusing to do ALL formatting in styles. For cleanliness sake, you want to stick with one or the other as much as possible. Much easier to maintain that way. You can always add specific tags/styles inline if you are sure it's necessary.

Skye

TonyT

07-23-04, 03:35 PM

Those pafrticular inline styles do NOT affect how that text is displayed, as far as text size goes. Those inline styles above only will affect the position of the text insude the paragraphs.

The real reason that your text in the 2 paragraphs l;ooks different is because in the paragreph: "Activity Reported" the text size is NOT specified and in the paragraph: "Investigation Summation" you have SIZE="2".

Thus the paragraphs will display differently. If using a style sheet for text sizes the remove the SIZE="2" an dall will be fine, else add a SIZE="2" to the 'Activity' paragraph.

cyberskye

07-23-04, 04:32 PM

Hi Tony,

Those pafrticular inline styles do NOT affect how that text is displayed, as far as text size goes. Those inline styles above only will affect the position of the text insude the paragraphs.
I understand that he made no font-size style inline in this example - but if he had done so, it would affect the font size, correct?

I ask to make sure that my advice of using either inline or external CSS for all formatting was sound or off base. In other words, can you not affect font size via inline styles if you so desired?

Thanks,

Skye

TonyT

07-23-04, 06:34 PM

Skye-

If he had used inline font styles, then yes, it will affect sizes if specified.

Your advice was sound.

Plus, one can use an external style sheet AND inline css at same time. Sometimes it's better to do it that way, esp when the inline is used for form elements or is used infrequently on site's pages, or when one wants to overide the declarations in the external style sheet.

There are 4 types of CSS: (Cascading Order)
1. Browser default
2. External Style Sheet
3. Internal Style Sheet (inside the <head> tag)
4. Inline Style (inside HTML element)

The seniority of styles is ranked inverse of the list above. Inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value). If no Inline Style is used, then CSS in the <head> is senior and will overide other lower ranked style sources.

of interest:

Benefits of the "Browser Wars" (IE vs Netscape) of years past:

HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, , <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium responsible for standardizing HTML - created STYLES in addition to HTML 4.0.

cyberskye

07-23-04, 08:42 PM

Cool - thanks.

As I said before (in your MySQL posts), I am learning CSS - it has gone into overdrive lately. With my HTML background, the formatting part is coming through pretty easy. Next step is to get away from tables and use CSS for layout as well. Any tips or tricks there - stuff that is terribly browser specific to stay away from? I imagine that it will be much more interesting based on my experiences with xbrowser tables...

I plan on having a go this weekend and seeing what I can figure out. If i hit a snag, I'll give GH his post back and start my own:)

Skye

TonyT

07-23-04, 09:08 PM

I still use tables with CSS because it's faster to create the pages. Otherwise, you can use CSS positioning for all page elements and objects, but this takes more time in proportion to the amount of objects on a page and the complexity of elements.

CSS positioning is actually pretty easy once you get the hang of it, objects can be positioned relatively or absolutely. And they can be positioned in exact pixel dimensions or % of window.

Absolute positioned pages do not scale to fit the browser window unless dimensions are set as %, and then one has the same issues as when using tables.

One trick I do is to create the page using Notepad or W32Pad (free txt editor with numbered lines and built in format saving as txt, html,php etc). At the same time I have the page opened in my browser and as I make changes, I refresh the browser window to see the new edits. Then I do screen caps and open in a graphics app so as to see exact dimensions of the layout and objects, and then adjsut the cells and objects as needed. This way the pages will scale to fit all browser windows and all resolutions.

I stick to the CSS guides at w3schools.com and their CSS list of properties supported by each IE & Netscape.
http://www.w3schools.com/css/css_reference.asp

TonyT

07-23-04, 09:10 PM

http://www.w3.org/Style/CSS/

here's another good css reference & tips
http://cssvault.com/resources.php

cyberskye

07-23-04, 09:31 PM

TonyT

07-24-04, 08:33 AM

Thanks for the tips!

I am interested in seeing how the 'fixed' positioning will work for my NAV bar - one page is blog-like and the main text areas run pretty long.

I am pretty much anti-frames for several reasons.

I use phpdev (free) on my workstation - bundles Apache/PHP/MySQL into a single w32 installer. That and Dreamweaver make editing/testing a snap.

Ever tried it?
Nope. I have a linux box w/ apache\php\mysql so I just ftp any php pages to the server and test there. Of course, I can still preview the php [ages in IE as I create them. (*.php files w/ html content)

My site at http://members.cox.net/aturrisi uses fixed positions for some elements and % for others.

Check out http://coolpagehelp.com I made using Cool Page, which uses absolute positioning for all pbjects and elements except the 'thumb icon' in top right frame (float: right;).

Cool Page is a good app for making such pages and then you can export as html and edit in another editor. Try it. Make a basic page and edit it in your txt editor and change the exact pixel posintioning to % here & there to see the differences.