CSS Help Please :) Text looks HUGE on some pc's?

[Prana]

Hi,

This is my 1st website trying to use css and I recently found out that my text is huge on some computers. I love the effects ive seen people do with css but getting it all to work is another story. ;)

Any help would be greatly appreciated.

Thanks,
Anna

[edited by: SuzyUK at 4:33 pm (utc) on Aug. 20, 2004]
[edit reason] no signatures please- tos [webmasterworld.com] [/edit]

[coho75]

Prana,

Perhaps you could post some of the CSS you are using, or try to explain what you are using with some examples. It will be easier to get some help if people see what you are trying to do.

coho75

[jdMorgan]

Find out what browser those machines are using. If the browser is Netscape 4.x and the user has disabled JavaScript, then CSS won't work and the page will be rendered without styles.

Font size settings are available in CSS, in HTML, in the browser settings, and in the system settings. Therefore they are often confusing and inconsistent across platforms and even among machines using the same OS. Your best bet is to find out all you can about the machines that render your page incorrectly, and then set up a machine to duplicate that environment. This might be as simple as downloading and testing using a copy of the browser that they are using.

Jim

[bigbobby73]

What are you using for your font-size?

ems? pixels? percentages?

[drbrain]

Can you give a short, simple example of the CSS and HTML you are using, and which browsers you see normal size and huge text?

[createErrorMsg]

user has disabled JavaScript, then CSS won't work

?

[MatthewHSE]

user has disabled JavaScript, then CSS won't work

?

Disabling JavaScript in NN4 also turns off CSS support. Somehow the two are tied together in that browser.

Prana, by "HUGE," how huge do you mean?

[jetboy_70]

It's worth pointing out that some PC users have their font DPI settings larger than normal, offered as an option when Windows is installed. This trumps any on-site settings and can often be the cause of problems.

You can check (at least on XP) by going to Control panel; Display; Advanced, General.

Normal size is 96 dpi.

[Receptional Andy]

I think the problem is using the H1 tag to enclose all of the body text ;)

[Prana]

Wow thanks so much for all the ultra-quick responses!

Here is the css code I use and site is in profile. It is probably something simple but I have messed with it for several days now and am at wits end!

BODY,
a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #663399; text-decoration: underline}
a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #663399; text-decoration: underline}
a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #9966FF; text-decoration: none}
a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #663399; text-decoration: none}

BODY {scrollbar-face-color:#666699 ; scrollbar-darkshadow-color: #666699; scrollbar-shadow-color: #9966FF; scrollbar-highlight-color: #666699; scrollbar-3dlight-color: #9999cc; scrollbar-track-color: #9999cc; scrollbar-arrow-color: #9999cc; }

a.top:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #9999FF; text-decoration: none}
a.top:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #9999FF; text-decoration: none}
a.top:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #9966FF; text-decoration: none}
a.top:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #663399; text-decoration: none}

a.box:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #333333; text-decoration: none}
a.box:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; text-decoration: none}
a.box:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #663399; text-decoration: underline}
a.box:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; text-decoration: none}

.darktext { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration: none; font-size: 11px}
a.bot:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-decoration: none}
a.bot:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-decoration: none}
a.bot:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #9999cc
; text-decoration: none}
#000000 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #487490} text-decoration: underline}
.sitetext { font-family: Verdana; font-size: 12px; color: #333333}
.titles { font-family: Verdana; font-size: 12px; color: #FFFFFF ; font-weight: bold}
.names { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small; font-style: normal; font-weight: bold; text-decoration: none}

Thanks again for all of your assistance!

[crazybass]

Your code looks fine. The 'px' sizing will lock the font size (best to use 'ems' for better accesibility), so the normal browser text sizing won't work. So I'm baffled. It may be as earlier responses say, NS4 or some click happy bod reset the dpi.

A note to help you in the future, as soon as anyone mentions error on one of your sites, get the Op System, version, browser etc. Helps eliminate variables.

[Prana]

Hi,

I received this search engine submission spam email that has it with huge text also: <snip>

This css stuff can be pretty frustrating then getting spammed to show me my mistakes to rub it in!

Thanks again and I hope image helps.

[edited by: SuzyUK at 4:37 pm (utc) on Aug. 20, 2004]
[edit reason] oops no URLS per TOS #13 [webmasterworld.com] [/edit]

[Hester]

You don't need to set the font on every new line of CSS either. Just style it once on the body, or <a> tag, then it will 'cascade' down to the rest of your stylesheet. (Or if you don't care about Netscape 4, use

* {font-family...}

and it will style everything at once.

The trick with CSS is then to override anything you want a different font or style by applying it separately to some elements later on. Er, I mean, like this:

* {font-family:Arial;}
em {font-family:Georgia;}

This would make your site in Arial except for any text between <em> tags.

Sorry if this is offtopic, just tryin' to help.

[coho75]

Prana,

I checked out the site you posted, and it seems that the font that is large is contained in <h1> tags. So, I don't think the problem is with the CSS. If you remove the h1 tags everything should be fine.

coho75

[TheDoctor]

If you view fonts sized using px at a low resolution, then the font size will increase (assuming a constant screen size).

Is this the problem?

[Prana]

Thanks for all of your assistance and great suggestions and sorry about link Suzi.

Next visit to the dentist I will check it out since I removed the H1 tags and hope it works! Dentist usually means pain and not my favorite place to visit if ya know what I mean :P

So much to learn w/ CSS and DW and I am still trying to figure out if the newer version DW 2004 MX is much better than my DW 4?

I know in 4 it seems I can't change anything in the "head" section when using a template and if the newer versions allow this for changing my keywords for search engines.

So much to learn and so little time!

Thanks again and stay happy & healthy. :)