ok, i have seen both html>body and @import multiple times and not sure what they fully do. I have seen @import the most so am mostly interested in that one thx all@import imports an external file for use on the page. Usually, this is a CSS file, used to style the page. Therefor, it would normally look something like this:<style type="text/css">
@import "/styles.css";
</style>
html>body is completely different from @import. html>body is another "hack" to fix layout issues in IE when using a CSS-based layout. Since IE does not understand html>body, it will not use it, but standards browsers (Firefox, Mozilla, Opera, Netscape, etc.) will. Here is an example:<html>
<head>
<title>CSS Hack Test</title>
<style type="text/css">
#box {
width: 300px;
height: 100px;
color: #fff;
font-weight: bold;
margin: 0;
padding: 5px;
background-color: #f00;
}
html>body #box {
width: 300px;
height: 100px;
color: #fff;
font-weight: bold;
margin: 0;
padding: 5px;
background-color: #00f;
}
</style>
</head>
<body>
<div id="box">In standards browsers, this box will be blue, but in IE, it will be red.</div>
</body>
</html>
In standards browsers, #box will be blue, but in IE, it will be red. However, it is nto recommended to use hacks for crucial purposes, as you never know what future browsers/versions will/won't support.The @import rule is also quite handy as Netscape 4.x doesn't provide support for it. This means your CSS won't get totally mangled in this browser; they'll just get accessible, unstyled content.i understand the html>body part now, thx
and i guess i understand what the @import does but dont understand why use it. What makes that any better then using something like:
<link rel="StyleSheet" href=http://www.webdeveloper.com/forum/archive/index.php/"./styl.css" type="text/css" media="screen">
or whatever. thx Originally posted by pawky
and i guess i understand what the @import does but dont understand why use it. What makes that any better then using something like:
<link rel="StyleSheet" href=http://www.webdeveloper.com/forum/archive/index.php/"./styl.css" type="text/css" media="screen">
or whatever. thx fredmv's post explains that Originally posted by Daniel T
fredmv's post explains that
ok, so it wont work in netscape 4.x so is it used as another hack like thing as is html>body is for IE? if so, then i guess i understand but still dont really see when i would use this. but that's ok i guess Originally posted by pawky
ok, so it wont work in netscape 4.x so is it used as another hack like thing as is html>body is for IE? if so, then i guess i understand but still dont really see when i would use this. but that's ok i guess Support for the CSS box model in older browsers is poor. Therefor, instead of using the <link> method of calling a stylesheet (which would import it in all browsers), you could use @import, and that way you can prevent older browsers, such as NS4, from displaying styles and totally screwing up the layout. See this (<!-- m --><a class="postlink" href="http://centricle.com/ref/css/filters/">http://centricle.com/ref/css/filters/</a><!-- m -->) for a list of different methods of @import you can use to affect different browsers (scroll down to where it gets into the @import's in the right-hand column).
@import "/styles.css";
</style>
html>body is completely different from @import. html>body is another "hack" to fix layout issues in IE when using a CSS-based layout. Since IE does not understand html>body, it will not use it, but standards browsers (Firefox, Mozilla, Opera, Netscape, etc.) will. Here is an example:<html>
<head>
<title>CSS Hack Test</title>
<style type="text/css">
#box {
width: 300px;
height: 100px;
color: #fff;
font-weight: bold;
margin: 0;
padding: 5px;
background-color: #f00;
}
html>body #box {
width: 300px;
height: 100px;
color: #fff;
font-weight: bold;
margin: 0;
padding: 5px;
background-color: #00f;
}
</style>
</head>
<body>
<div id="box">In standards browsers, this box will be blue, but in IE, it will be red.</div>
</body>
</html>
In standards browsers, #box will be blue, but in IE, it will be red. However, it is nto recommended to use hacks for crucial purposes, as you never know what future browsers/versions will/won't support.The @import rule is also quite handy as Netscape 4.x doesn't provide support for it. This means your CSS won't get totally mangled in this browser; they'll just get accessible, unstyled content.i understand the html>body part now, thx
and i guess i understand what the @import does but dont understand why use it. What makes that any better then using something like:
<link rel="StyleSheet" href=http://www.webdeveloper.com/forum/archive/index.php/"./styl.css" type="text/css" media="screen">
or whatever. thx Originally posted by pawky
and i guess i understand what the @import does but dont understand why use it. What makes that any better then using something like:
<link rel="StyleSheet" href=http://www.webdeveloper.com/forum/archive/index.php/"./styl.css" type="text/css" media="screen">
or whatever. thx fredmv's post explains that Originally posted by Daniel T
fredmv's post explains that
ok, so it wont work in netscape 4.x so is it used as another hack like thing as is html>body is for IE? if so, then i guess i understand but still dont really see when i would use this. but that's ok i guess Originally posted by pawky
ok, so it wont work in netscape 4.x so is it used as another hack like thing as is html>body is for IE? if so, then i guess i understand but still dont really see when i would use this. but that's ok i guess Support for the CSS box model in older browsers is poor. Therefor, instead of using the <link> method of calling a stylesheet (which would import it in all browsers), you could use @import, and that way you can prevent older browsers, such as NS4, from displaying styles and totally screwing up the layout. See this (<!-- m --><a class="postlink" href="http://centricle.com/ref/css/filters/">http://centricle.com/ref/css/filters/</a><!-- m -->) for a list of different methods of @import you can use to affect different browsers (scroll down to where it gets into the @import's in the right-hand column).