05-26-2005, 12:01 PM
What aetherfox is, somewhat bluntly, suggesting is that code is more apt to run in more browsers, and be easier to edit if you separate your content from your style. Stuffing CSS code into "style" attributes clouds up a web page more than using plain HTML. This has little to do with code running in one browser vs. another, but it's generally more likely to work in all browsers if you follow proper standards and are aware of CSS bugs that exist in either browser. There is a wealth of cross-browser, standards-compliant code on the web.
e.g.
Can be edited more efficiently. Also, it takes less time to download, because style.css would be used across multiple pages and that could would not have to be re-downloaded.
style.css would contain:
This practice isn't some elistist way of designing web pages... it consistently produces smaller pages that are easier to edit, and can change styles on the fly. THAT is good code, not necessarily "working" code.
Furthermore, anybody actually interested in obtaining your web page source can easily disable right-click and get the source, or just use the menu to view it. But if you want it there, you don't want to clout up the web page with it. Stuff the code into window.onload and stick that into a separate javascript file, called from the page in a <script language="javascript" src="mysrc.js"></script>.
the reason "font weight: 900" does not work in firefox is because the CSS property is "font-weight", not "font weight". IE is slightly better at dealing with broken code and firefox. Generally, you'll want to stick to keywords such as "font-weight: bold" though, as neither browser supports variable font weights. "font-weight: 800" looks just like "font-weight: 900" and "font-weight: bold".
Also, "filter" is a proprietary IE property. It's ugly, and it breaks other browsers, and it will never become a de-facto standard with the advent of CSS3's opacity property. If you can, stay away from them. But for what you use them for, it breaks in an acceptible manner in other browsers if you really want to use them.
Margins as a result of stacking div's are a major pain in the butt for me too. Usually, though, you can find a way that works in both browsers.
e.g.
Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="title">Title of Page</div>
<div id="somefield">Bloopity blah blah blah</div>
<div class="text">
<p>blah blah blah</p>
<p>blah blah blah</p>
</div>
</body>
</html>Can be edited more efficiently. Also, it takes less time to download, because style.css would be used across multiple pages and that could would not have to be re-downloaded.
style.css would contain:
Code:
#title {
/*stuff*/
}
.text {
/* more stuff */
}This practice isn't some elistist way of designing web pages... it consistently produces smaller pages that are easier to edit, and can change styles on the fly. THAT is good code, not necessarily "working" code.
Furthermore, anybody actually interested in obtaining your web page source can easily disable right-click and get the source, or just use the menu to view it. But if you want it there, you don't want to clout up the web page with it. Stuff the code into window.onload and stick that into a separate javascript file, called from the page in a <script language="javascript" src="mysrc.js"></script>.
the reason "font weight: 900" does not work in firefox is because the CSS property is "font-weight", not "font weight". IE is slightly better at dealing with broken code and firefox. Generally, you'll want to stick to keywords such as "font-weight: bold" though, as neither browser supports variable font weights. "font-weight: 800" looks just like "font-weight: 900" and "font-weight: bold".
Also, "filter" is a proprietary IE property. It's ugly, and it breaks other browsers, and it will never become a de-facto standard with the advent of CSS3's opacity property. If you can, stay away from them. But for what you use them for, it breaks in an acceptible manner in other browsers if you really want to use them.
Margins as a result of stacking div's are a major pain in the butt for me too. Usually, though, you can find a way that works in both browsers.