473,399 Members | 3,832 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,399 software developers and data experts.

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

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

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

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

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

..main {
float: left;
width: 90%;
background: #ffd
}

</style>

</head>
<body>
<div class="center_narrow">

Inside of CENTER <br>Inside of CENTER <brInside of CENTER <br>
Inside of CENTER <br>
<div class="main">

Inside of MAIN <br>Inside of MAIN <br>Inside of MAIN <br>Inside of
MAIN <br>Inside of MAIN <br>

</div<!-- closing .main -->

Nav

</div<!-- closing .center_narrow -->

Jun 15 '07 #1
4 4003
Su************@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_narrow" 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.

http://www.w3.org/TR/CSS21/visuren.h...ock-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
http://www.LittleWorksStudio.com
Jun 16 '07 #2
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/

Jun 16 '07 #3
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 }'

http://www.w3.org/TR/CSS21/fonts.htm...ef-font-family
>
And if you suggest Helvetica, spell it right.
Yep I mistakenly dropped the 'L'.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 16 '07 #4
Su************@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)
Because you designed it against IE 7 and IE 7 is broken.
Jun 17 '07 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: ioneabu | last post by:
I am trying to do the basic task of setting a text field from the choice made from a select box. I learned how to code it from my O'Reilly Javascript reference which is a few years old. The code...
6
by: dpodkuik | last post by:
I have a simple function that does submit for me: <script language="javascript" type="text/javascript"> function sort() { //selected item value from the drop down list var...
1
by: steakhaus | last post by:
I just put up a new website that won't work in Firefox, but works fine in Safari. Are there any known problems? I designed it in Dreamweaver and the navigation bar has flash buttons that should...
2
by: JDeats | last post by:
>From my development envrionment (i.e. a single WinXP notebook PC) I have a basic AJAX application that is making the call to a Windows Form page that just returns the request back to the AJAX...
1
by: Gretsch | last post by:
I have modelled my program on the std code below (from http://www.w3schools.com/dom/dom_parser.asp).. It works in IE & Firefox, but does not work with Safari - nor does Safari issue the alert...
3
by: Arodicus | last post by:
I have a static class method, MyObject.MySub.MyMethod(), which points to a handler in a Flash SWF (but I think that's inconsequential). In reality, the path is a lot longer, so I'd like to make a...
5
by: rosaryshop | last post by:
I'm working a jewelry/rosary design web site at http://www.rosaryshop.com/rosariesAndKits2.php. As the user makes selections, it updates images of various parts, giving them a preview of the...
6
by: raknin | last post by:
I am creating a dynamic list on the server using php file,when I run the PHP script in all 4 browsers (IE 6, Firefox 2, opera and safari 3) every think go Ok and the list is created. but when I call...
4
by: AG | last post by:
Using ASP.NET 3.5 I have been using a standard menu control bound to a sitemapdatasource using a web.sitemap file. The menus work fine in IE and Firefox, but in Safari, they render horribly and...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.