I'm a Firebird user, and I develope sites that need to look good in all browsers, especially IE,
I've editted the <h5> tag to give me a specific style for that header, but when I display it in the different browsers I get different results, here's my code
Now IE displays the text in a BOLD state, where as FB displays it normally, can anyone explain why this is, or perhaps point me to somewhere I can find out about it, even a solution would be usefull!
Personally, I avoid such things, as the differences are subtle and open to varied interpretation on different browsers, platforms, and - of course - screen resolutions.
I find much simpler to stick with 'bold' or 'normal' and leave it at that =)
I think the "font-weight: lighter" is what's causing the problem. The the relative weight values aren't supported by all browsers. Furthermore, some fonts (most of them actually) only have two weights: "normal" and "bold". So even though CSS gives you this ability, font designers might not.
Generally, you should only use "normal" and "bold" values to convey any important information, because they arethe only ones guaranteed to work.
Thanks for the reply's but I'm still having problems, let me try and explain...
When I set the font weight to normal; IE displays Bold, NS6 (Mozilla FB) displays Normal
When I set the font weight to 100 / Lighter; IE displays Bold, NS6 displays Normal
When I set the font weight to Bold; IE displays TOO bold, NS6 displays Bold
So it's like IE has a default bold attribute for the H5 tag. am I right to assume this, or is there a workaround I'm failing to see here?
Any 'default' setting is over ridden when you specify the attribute in CSS.
The 'font-size:medium;' could very well be part of the problem as well. Once again, this is an arbitrary measurement that is dependent on the user agent. There will be differences in how different agents render such things.
Try using either px or em units to specify size, and stick to 'bold' or 'normal' for weight, and see how it turns out.
{{edit -
also, as a side note, your "padding:0px;" will overide your previous settings for 'padding-left' and 'padding-right'.
There are several ways to go about having left and right padding, but not top and bottom. Using your current method, you would have to reverse the order - put the 'padding:0' first, and then specify the left and right.
An easier method though would be this:
'padding:0 10px;'
the first value applies to top/bottom and the second value to right/left.
If you wanted different amounts for each, you could specify all four in the same manner:
'padding:0 10px 20px 10px;'
they apply in this order: top, right, bottom, left.
}}
[This message has been edited by DL-44 (edited 07-07-2003).]
I read somewhere that the best idea for decalring font sizes wasn't to use exact measurements (px, points etc...) but to use variable alterations, such as +10%, that way when a user has set up their browser to display fonts exactly to their liking, the CSS won't interfere too much with their display.
A good example of this would be for users that have sight problems, they might have set their browser to display text in a large format, if I set my fonts to 9px instead of small or -30% then it will make it impossible for them to read.
All browsers except IE allow users to adjust even absolute font sizes (ie, those set in pixels, etc.). Since a lot of people use IE, and IE is probably not going to change for quite some time, I prefer to stick with ems. 1 em is the default text size, and is equivalent to 100%. 1.5 em, therefore would be equivalent to 150%.
The only difference between percentages and ems is the relationship to the parent element's font size (and I could very well be wrong on this, so someone correct me if I am). The way I understand it, a percentage value will be a percentage of the parent value. Thus, if I set the body font size to 125% (for example) and then set the font size in a certain paragraph class to 100%, the font size will be 125% of the user's default size. Ems always refer to the default font size with no regard for inheritance. To use the above example, if I set the body font size to 1.25 em and the paragraph class to 1 em, you will see a difference (namely, the body font size will be 25% larger). [Edit: so, in effect, using 100% is like leaving the font-size out, whereas using 1 em is like resetting the size to the default. Just trying to make sure this makes sense.]
I will admit that I am pretty much going on gut instinct and vague memories, but I will run over to the W3C and see if I can't find solid evidence for this. At any rate, I would personally recommend relative text sizes, at least until the day that the most widely used browser supports user changing of absolute font sizes (notice I did not say "IE"--one can always hope). Of the two options of percentages and ems, I find ems to be less confusing and more aesthetically and semantically pleasing. But that's just me, and I've been known for being weird.
[Edit: This from the W3C under "percentage" in the "font size" section: "A percentage value specifies an absolute font size relative to the parent element's font size. Use of percentage values, or values in 'em's, leads to more robust and cascadable style sheets." (complete text)
As I mentioned above, ems refer to a "fixed" unit (the default font size), and thus are not dependent on the parent element's font size. That's why I use ems.]
To sum up Suho's verbose and informative reply - Yes, you are correct.
Which is why I listed both px and em as an option - em will allow the viewer to set the specific size, but should work out better than 'medium' or other such measures.
Actually, I prefer to use percentage font sizes over ems.
The reason for this is after I discoverd a bug... er, "feature", of IE that causes ems to be radically resized using the browser controls.
I'm not sure if this affects any other browsers but... if you set your fonts to ems and then use IE's "View -> Text Size -> Larger", then the fonts end up ridiculously big, and if you select "smaller", they become almost unreadable. After a bit of experimentation, I realized that switching to %s allows font sizes to be resized much more moderately.
suho: I hate to burst your bubble, but... ems and percentages work exactly the same way. They both resize fonts relative to the parent element.
So if and object was set to 2em and an object within was also set to 2em, the final result would be 4ems.
This is the same as 200% and 200% being 400%.
As to why the W3C would specify two unit of measures that work exactly the same way, I have no idea ;-)
The only discrepancy between them, I have explained in the post above this one.
oz: Heh, no worries. I had no bubble to burst, so no damage done (and I did ask someone to correct me if I was wrong, which apparently I was). The funny thing, though, is that I use percentages for my font sizes too... I don't know what made me think I was specifying them in ems. In fact, I think I switched over to percentages for the same reason you cited.
I do use ems, but not for fonts. What I use them for is things like margins, padding, indents, etc, so that these will all be relative to the user's font size. If I had had my head on straight when I wrote that first post, that's what I probably would have told you. In fact, looking through my style sheets, the only place I use pixels is for borders. I guess you could call me a relativity freak.
And what is up with percentages and ems being the same anyway? An em is the default text size, no? So it should technically work the way I thought it worked. I suppose you could argue that defining the text size in ems in the parent changes the default size, but why have two separate units if they're only going to do the same thing? Sometimes the W3C baffles me...
Well, I've taken a look at the page... you should check it out in Opera if you want to see really bold headings.
To be honest with you, though, the difference is not something I would really sweat about (if it were my page). As long as you can tell they are headings, I don't really see the problem. I know that's probably not the answer you were looking for, but, honestly, fussing over this doesn't seem to be worth it. Then again, I take a rather Taoist approach to things like this (go with the flow, basically).
Well, for starters, yo ustill have 'lighter' and 'medium' inthere, which as we've said is going to cause some issues. Set them as we've suggested and see what happens.
Secondly, I'm rather confused as to why you are using <h5>'s at all, when in reality they should be h1 or h2 tags, and why you haven't specified any style attributes for h1 - h4?
Mmm... good points, especially about the header tags. Semantically speaking, your largest header on the page should be <h1>, and then you should work your way down from there. I guess you're using <h5> and <h6> for the small sizes, rather than their semantic value... but that's what we have CSS for, so you can specify your sizes. Header tags are for delineating structure, not controlling font sizes.
Well I agree that I should probably be using h1 and h2 tags instead of h5, but I don't see how this would effect anything visually, surely it's just an organisational and standardised thing?
Thus I haven't set attributes for h1-h4 because I don't intent to use them.
I had previously removed the lighter and medium settings, and they didn't seem to effect anything, although I know that's not any good if you guys want to look at it, so I'll change that right away! 'scuse me!
I originally intended to try and implement as much 'correct' usage of CSS as possible but I'm finding it more difficult than I first expected, what with not having enough time to do research, not being able to find a nice site for resources and finding the w3c site to be the biggest dog of a site to read through and find anything on.
quote:Well I agree that I should probably be using h1 and h2 tags instead of h5, but I don't see how this would effect anything visually, surely it's just an organisational and standardised thing?
I must admit that this sort of thinking baffles me. So, you understand that you can accomplish the same thing with h1 and h2 tags that you can with h5 and h6 tags, yet you'd rather disregard standards, use the semantically incorrect tags and have a skewed page architecture? Maybe I'm missing something, but that just doesn't make sense to me. Why not just replace all h5 tags with h1 tags and all h6 tags with h2 tags? I don't know if it will have any effect on the problems you are having, but it certainly won't be any worse, and at least it will be correct usage.
Believe me, the very minor problem you are having with font weight is the least of your worries. And who knows? Maybe in the process of switching over to more standard code the problem will solve itself. Don't just treat the symptoms, cure the disease.
[Edit: Another analogy, just because I happen to love analogies (what, you couldn't tell?). I have worked with a lot of non-native English speaking students on English composition. Generally, the first compositions they hand in are absolutely riddled with grammatical errors and spelling mistakes. I do not, however, point out a single one of those mistakes. Why? Because the compositions are lacking in such basic things as unity, coherence, and support. I try to deal with the major problems first, and then work my way down to the smaller problems. The same thing goes for Web design.]
quote:I originally intended to try and implement as much 'correct' usage of CSS as possible but I'm finding it more difficult than I first expected, what with not having enough time to do research, not being able to find a nice site for resources and finding the w3c site to be the biggest dog of a site to read through and find anything on.
I'm sure that's just me though right?
No, it's not just you. Trying to learn CSS from the W3C site is like trying to learn English from the Encyclopedia Britannica. There are plenty of good sites out there that help you get a grip on CSS, and if you want to see some of them just pop into the Asylum FAQ and do a search on "CSS". There are a few different pages with lists of links--look through everything you can find there and I'm sure that will give you a solid grounding.
[This message has been edited by Suho1004 (edited 07-09-2003).]
Well, I've replaced the h5 and h6 tags for h1 and h2, set the properties as they were before, as far as I can tell I'm not doing anything incorrectly here, nor am I using any method that I've read not to do.
Perhaps I should just forget about it, but I don't like to give up, and no matter what I've looked up there doesn't seem to be any help out there to do with this problem, nor any recognition of it, with my specific problem, I'm well aware of slight differences between browsers and their CSS translation.
Well thanks to everyone for your help anyway, I have had a look at some sites that talk about CSS such as CSS Zen Garden, Chunky Soup, and BlueRobot, has anyone got any other favourite CSS references or resources they could also recommend?
I think most of the good CSS references are mentioned somewhere or other in the FAQ, so I don't think I have anything to add.
Again, I wouldn't beat my head against a wall over this display problem. You're never going to get the page looking exactly the same in different browsers. A little variation, within reason, is acceptable, I think. Not ideal, of course, but acceptable.
Well, I still don't know, but agian, looking at the CSS, you have font-weight:400, and font-size: medium; specified...that just bugs me a little, and I can't help but still think that has something to do with it.
The only other thing that comes to mind is that fact that the headers are inside a table cell. Perhaps IE doesn't like that somehow? It's a longshot, but try (for the hell of it) specifying in your stylesheet -
posted 07-04-2003 07:53
