why this CSS works in IE 7 but not Firefox or Safari?

**Jonathan N. Little** · Jun 16 '07, 12:55 AM

Re: why this CSS works in IE 7 but not Firefox or Safari?

Summercoolness@ gmail.com wrote:

does anyone know why this CSS works in IE 7 but not Firefox or Safari?
(it works weird in Firefox and Safari)
>

"works weird", now is that a technical term? Let me guess, do your mean
way does MSIE show "center_nar row" expanding to contain the floated
"main" and the other do not? Because MSIE is wrong. Floats are not
supposed to contained normally by parent blocks in normal flow.

Visual formatting model

http://www.w3.org/TR/CSS21/visuren.html#block-formatting

>
>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">

Firstly, for new projects and display consistency you should use strict
doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

>
<html>
<head>
<title></title>
<style type="text/css">
body { background-color: #996; font: 20px/1.2 Trebuchet MS; color:
#003; }

Next Trebuchet MS is an MS only font, you should provide alternates
otherwise the default a serif font will be substituted. Also Trebuchet
MS font name has embedded space and should be quoted:

font: 20px/1.2 "Trebuchet MS", hevetica, "Vera Sans", sans-serif;

One way to get center_narrow to contain a float is to set the overflow
to hidden or auto...

>
.center_narrow {
width: 600px;
margin-left: auto;
margin-right: auto;
padding: 36px;
background: #fff

overflow: hidden;

}

Or your could follow the floated "main" element with an element with the
"clear" property set...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com

**Jukka K. Korpela** · Jun 16 '07, 01:55 PM

Re: why this CSS works in IE 7 but not Firefox or Safari?

Scripsit Jonathan N. Little:

"works weird", now is that a technical term?

Well, not telling what the problem is (in the OP's opinion) is compatible
with not posting a URL. It's usually pointless to answer such requests,
since the OP is making it difficult to help him, and the symptoms suggest
that he wouldn't take the best part of advice anyway.

But I couldn't help noticing this comment of yours, which I cannot really
agree with:

>body { background-color: #996; font: 20px/1.2 Trebuchet MS; color:
>#003; }

>
Next Trebuchet MS is an MS only font, you should provide alternates
otherwise the default a serif font will be substituted.

Why would that be a problem?

Contrary to popular superstition, it is not necessary to specify any
alternate fonts. If you say font-family: Trebuchet MS, you only say that
Trebuchet MS is preferred. When it is not available, the browser uses its
default font, which is what happens if you say nothing about font-family.
You _can_ add a generic font family name, sans-serif in this case, but only
because you think that it might do some good, not because someone told you
to do so. And you shouldn't add list of specific font names just because you
can copy it from somewhere. Oddly enough, people often suggest fonts that
they never saw in action, or never saw as applied to the page they suggest
it for!

If you really think that your page looks better in a sans-serif font, you
can use a declaration like
font-family: Trebuchet MS, sans-serif;
But adding "alternates " (specific font names) to it is mostly waste of time.

Besides, if we comment at all on style sheets like that, can we really
comment on such minor issues only? It could easily be construed as accepting
the part that is not commented. Yet the style sheet sets font size in
pixels, sets a slightly too small (for the font suggested) line height, and
uses color and background with insufficient contrast ("The difference in
colour between the two colours is not sufficient. The threshold is 500, and
the result of the foreground and background colours is 357.", says
http://juicystudio.com/services/colo...ast.php#result )

Also
Trebuchet MS font name has embedded space and should be quoted:
>
font: 20px/1.2 "Trebuchet MS", hevetica, "Vera Sans", sans-serif;

Contrary to popular belief, it need not be quoted in most situations. It
might be a good idea to quote it, for simplicity, but an unqualified
"should" is misleading, especially in a context where the style sheet has
much more serious problems.

And if you suggest Helvetica, spell it right.

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/

**Jonathan N. Little** · Jun 16 '07, 02:35 PM

Re: why this CSS works in IE 7 but not Firefox or Safari?

Jukka K. Korpela wrote:

Scripsit Jonathan N. Little:

>Next Trebuchet MS is an MS only font, you should provide alternates
>otherwise the default a serif font will be substituted.

>
Why would that be a problem?
>
Contrary to popular superstition, it is not necessary to specify any
alternate fonts. If you say font-family: Trebuchet MS, you only say that
Trebuchet MS is preferred. When it is not available, the browser uses
its default font, which is what happens if you say nothing about
font-family. You _can_ add a generic font family name, sans-serif in
this case, but only because you think that it might do some good, not
because someone told you to do so. And you shouldn't add list of
specific font names just because you can copy it from somewhere. Oddly
enough, people often suggest fonts that they never saw in action, or
never saw as applied to the page they suggest it for!
>
If you really think that your page looks better in a sans-serif font,
you can use a declaration like
font-family: Trebuchet MS, sans-serif;
But adding "alternates " (specific font names) to it is mostly waste of
time.

Since we are being picky here because I believe the real issue the OP
was alluding to was containment of a float, I did say "should" not
"must" provide alternates. I am assuming that if the OP chose a
sans-serif font that he wish to have the page viewed without serifs.
Now, yes it can *always* be overridden, but I would say that it would be
good practice to at least provide an analogous generic font family.

Yes picking dissimilar fonts as alternates, a sloppy practice by many
"designers" can lead to unexpected results most notably grouping the
oversize Verdana with Helvetica (yes I made a typo originally) and other
sans-serif fonts that are the correct size, then styling the base font
size to 90% to compensate for Verdana creating the infamous micro-font
issue most discussed here.

>
Besides, if we comment at all on style sheets like that, can we really
comment on such minor issues only? It could easily be construed as
accepting the part that is not commented. Yet the style sheet sets font
size in pixels, sets a slightly too small (for the font suggested) line
height, and uses color and background with insufficient contrast ("The
difference in colour between the two colours is not sufficient. The
threshold is 500, and the result of the foreground and background
colours is 357.", says
http://juicystudio.com/services/colo...ast.php#result )

Yep, I have to agree that one could make the case for nitpicking, I do
find it funny to be call on it by you.

>

>Also
>Trebuchet MS font name has embedded space and should be quoted:
>>
>font: 20px/1.2 "Trebuchet MS", hevetica, "Vera Sans", sans-serif;

>
Contrary to popular belief, it need not be quoted in most situations. It
might be a good idea to quote it, for simplicity, but an unqualified
"should" is misleading, especially in a context where the style sheet
has much more serious problems.

Yes, many UA's can pick out the names with embedded spaces, and the
recommendation does use the word "should" and not "must":

'If an unquoted font family name contains parentheses, brackets, and/or
braces, they must still be escaped per CSS grammar rules. Similarly,
quotation marks (both single and double), semicolons, exclamation marks,
commas, and leading slashes within unquoted font family names must be
escaped. Font names containing any such characters or whitespace should
be quoted:

body { font-family: "New Century Schoolbook", serif }'

Fonts

http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family

>
And if you suggest Helvetica, spell it right.
>

Yep I mistakenly dropped the 'L'.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com