Web Browser and CSS problem

[ccindy]

:confused:

Hi, Safari's default font settings are to display Times at a size of 16. Hovering over the Safari's Select button for the Standard font box states that these settings will only be used if no font and font size are specified in the loaded webpage.

However, Safari goes back on its wording there and displays almost every page with its own settings, despite the pages specifying their own web standard fonts and size.

I am seeing this problem with my site, http://www.maccompanion.com, I use an external CSS style sheet to specify the font and size, I use size 12, and the font of Verdana, so everything is specified, however, Safari refuses to recognize that these settings are specified, I have tried defining the styles as inline to no avail as well, and I even tried moving the link code to my external sheet up further in the source as I thought that maybe Safari isn't loading the CSS sheet first. I thought this might be the case because Safari's activity monitor window shows the CSS file as loaded last.

No matter what I do, I cannot get Safari to load the site with the proper font and size. This is a problem because Safari bumping the size to 16 causes the text to bleed over the right hand border of the site, if you decrease the size via Safari's make Text Smaller command, everything fits, if you change Safari's preferences to the settings of font Verdana and size 12, everything fits, but with Safari bumping the size to 16, some of the pages bleed.

I am using Dreamweaver MX not (MX 2004) to create the site and the CSS file, and I am using a template based system. Does anyone have any idea's as to why Safari is not recognizing that I have specified a font and size via CSS, it seems to recognize everything else.

Is it a problem with using templates, is it because the CSS file isn't loaded first, if so, how do I make it load first? An ideas or suggestions to solve this problem would be appreciated.

Also, Netscape 7 also has a default of 16 size and font of Times, anybody know why browsers have defaulted to these settings? I see this same problem with other pages being loaded with Safari's defaults instead as well.

Any idea and help would be appreciated, Thanks.

[davecuse]

You could just define the overall font size for the page by adding the CSS below to your file.


body {
font: .9em Verdana, Arial, Helvetica, sans-serif;
}

[mnkeybsness]

yeah... you really shouldn't define the font family and size for every element like that. look into how inheritance works in CSS. basically, if you define something as davecuse showed for the body, it will be inherited for every element inside the body tag.

I also noticed that you have quite a few errors on your page... see the results (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.maccompanion.com%2F)... You've also got some bad css (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.maccompanion.com%2Fstyle.css&usermedium=all)

[Nspace]

I had a weird problem once where I defined the overall typeface and size to be used for the whole site at the top, and it worked everywhere on the site. Except I had an iframe that was generated from a db with php, and the data was to be displayed in tables. Unfortunately for some reason, my text would show in the right font but not the right size. As a result I had to define the proper size for tables to get it to display properly.

Really weird stuff I am interested to see how this one gets solved.

[ccindy]

Hi, thanks for the responses. davecuse, I do have something similar to that in my external CSS sheet:

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #000199}

I also further down have the p tag redone, but only with one property:

p {
line-height: .2in;
}

I also have another style defined to change the size of the font in a table I have on the left hand of the page:

.tablesmalltext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}

Hmm, maybe I need to remove the font family from that as its being inherited form the body style.

My body style isn't the first thing defined in the external CSS sheet, would that help?

mnkeybsness, thanks for your responce as well. yes, I see that I don't validate, and I am trying to figure out how to make it validate, I just don't see why it wouldn't.

Thank for the suggestions all, I appreciate it, if you have other ideas, please let me know, thanks.

[davecuse]

I think part of your problem may be from over-repetition. It can get confusing after a while, I would recommend that you simply define the overall font face, style, size etc.. in the body tag. Once you have that done there is no need to repeat the same style cues throughout the css sheet.

You might want to look into the w3schools, read up on CSS and the best way to get your style across without bloating the code. The leaner your code is, the easier it is to troubleshoot problems, and update things when the time comes.

Also you should stay away from defining the size as PX, or PT as this prevents people from resizing the text with their browser. It's a big accessibility no no. To do what you are attempting try this.



body {
color: #000199;
font: .9em Verdana, Arial, Helvetica, sans-serif;
}

.tablesmalltext {
font: 90%
}

[ccindy]

davecuse, again, thanks for the reply, where do you see defining px or pt in a CSS sheet to not let a browser resize the font? I have never had any problem with it, I decrease and enlarge the font on the site via browser commands (not the preferences) often, and I have never had a problem.

[ccindy]

Ok all, i have got it where the CSS sheet and the site validates, which is a good thing, I tried the em thing that was suggested, and it just screwed up all my margins because Safari is still bumping my font and size up to Times 16, plus it also moved my layout further down the page.

I have never had any problems with the browser resizing the page when the settings were for px and not em. By the way, DW lists em as ems, I assume they are the same thing correct?

Any other ideas would be appreciated please, thanks!

[davecuse]

I'm not a big fan of Dreamweaver... You may want to check out an alternative for making your CSS. I prefer CSSEdit

http://macrabbit.com/cssedit/

[ccindy]

I just want to say thank you to all who have replied to my post, this is why I love forums and the Mac Community, reading others experiences and reading ideas and suggestions is a great help.

Thanks to ya'll's links, I was able to get the site, and the CSS sheet validated, and after rereading all of the posts, I saw something in Nspace 's post that solved the problem, of course it was a simple solution, aren't they always? :rolleyes:

What I had to do was define the font and size in CSS for the table tag, since all my content is in a table, that solved the problem.

Thank you all again, I appreciate it greatly!
:) :D