hey all,
My question is simple... I want to get away from using tables for page layout and go to CSS, as advocated by the W3. The only thing holding me back though is whether or not the compatibility is there. I CAN'T create pages that will only work in version 6 and 7 browsers, I need to be able to go back several versions.
For example, I currently use the a:hover attribute for a site that I designed (it was my first commercial site actually). It works fine on my Mac in IE, but in Netscape version 7 it doesn't even work! As a matter of fact none of the CSS link attributes seem to work and I had to duplicate them in the HTML, which obviously I don't want to do.
In order to go with more straight CSS I am curious how well the positioning attributes work across the various browsers and versions. I imagine these are used in place of tables and the hover attribute is used in place of javascript rollovers... is that right?
Any help would be appreciated.Hi James,
I had been wondering the same thing for a while and was inspired by the recent redesign of wired.com. It's all XHTML and CSS. I viewed the site in IE6, Netscape 7 and Mozilla on XP and everything looks consistent. I also viewed the site in Netscape 4.7 and, while you still have access to all the content, it doesn't look pretty. They have a link, viewable by browsers that don't support the new standards, that explains things for confused users: <!-- m --><a class="postlink" href="http://webstandards.org/act/campaign/buc/">http://webstandards.org/act/campaign/buc/</a><!-- m -->
I'm currently in the process of renovating my portfolio to at least XHTML 1.0 Transitional which means I'm still relying on tables (until I learn CSS positioning a little better) and some CSS positioning for page content. The ultimate goal is to just use CSS for everything.
If your biggest concern is backwards compatibility, using solely CSS for positioning would not be the best option at this point.
Just my two cents for ya'.
- MichaelI think the thing to do is not create identical pages for older browser, but just make them use able. You can for example use browser workarounds to stop older browsers using certain CSS code.
CSS:
/*Hide from NS 4.x*/
@media all {
body {
margin-left:10em;
}
#menu {
position:absolute;
top:1em;
left:1em;
width:8em;
}
#menu a {
display:block;
}
.hideme {
display:none;
}
}
/*Other CSS that all browser should see...*/
HTML
<body>
<p>Main Body Contents...</p>
<div id="menu">
<h2 id="nav">Navigation</h2>
<p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link</a> <span class="hideme">|</span>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link</a> <span class="hideme">|</span>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Etc.</a> <span class="hideme">|</span>
</p>
</div>
</body>
Which should make the menu absolutely positioned in modern browsers, with links that take up the whole line, but in old browsers the links will be at the bottom, with seperators between them.
And also if a:hover didn't work in NS6/7 I think you were probably doing something wrong, like putting them in the wrong order or something.Originally posted by James L.
I currently use the a:hover attribute for a site that I designed (it was my first commercial site actually). It works fine on my Mac in IE, but in Netscape version 7 it doesn't even work!
If you post a link we can find what you did wrong so you can fix it
Originally posted by Rick Bull
CSS:
/*Hide from NS 4.x*/
@media all {
Unfortunately I've heard (don't have a Mac to verify on) that @media rules also hides it from IE/Mac.
That is rather unfortunate since IE/Mac (in contrast to IE/Win) is one of the best CSS browsers out there.
A perhaps better solution to hide CSS from NS4 is probably to use something like this
<script type="text/javascript">
<!--
//Since NN4 requires Javascript to be on for CSS to work at all this method is 100% safe.
if (document.layers) { document.write('<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"ns4.css" />'); }
-->
</script>
<style title="Default" type="text/css" media="screen">
@import "main.css";
</style>
This requires 2 .css files, but since NS 4 is pretty much broken everywhere in regard to CSS you will probably have to make a pretty specialazed CSS file for it anyway.Thanks for the answers!
I WAS doing something wrong with my styles sheets, the hover command, and netscape 7... what a surprise!
I am working through a book that I just got called "Eric Meyer on CSS". I think that's the title anyway, don't have it right in front of me. I am amazed how easy things become with CSS, can't wait until we are at the point where compatibility problems are gone.Originally posted by James L.
"Eric Meyer on CSS".
That is one of the CSS Gurus that really DOES know what CSS is about, so I'm sure it's a great bookOriginally posted by Stefan
Unfortunately I've heard (don't have a Mac to verify on) that @media rules also hides it from IE/Mac.
That is rather unfortunate since IE/Mac (in contrast to IE/Win) is one of the best CSS browsers out there.
@import works fine on IE Mac doesn't it? So it would be OK to use basically the method I showed but put all the @media stuff in another file and use @import instead wouldn't it?Originally posted by Rick Bull
@import works fine on IE Mac doesn't it? So it would be OK to use basically the method I showed but put all the @media stuff in another file and use @import instead wouldn't it?
Yepp, think soAh OK, that's good because that's what I have on my site 
My question is simple... I want to get away from using tables for page layout and go to CSS, as advocated by the W3. The only thing holding me back though is whether or not the compatibility is there. I CAN'T create pages that will only work in version 6 and 7 browsers, I need to be able to go back several versions.
For example, I currently use the a:hover attribute for a site that I designed (it was my first commercial site actually). It works fine on my Mac in IE, but in Netscape version 7 it doesn't even work! As a matter of fact none of the CSS link attributes seem to work and I had to duplicate them in the HTML, which obviously I don't want to do.
In order to go with more straight CSS I am curious how well the positioning attributes work across the various browsers and versions. I imagine these are used in place of tables and the hover attribute is used in place of javascript rollovers... is that right?
Any help would be appreciated.Hi James,
I had been wondering the same thing for a while and was inspired by the recent redesign of wired.com. It's all XHTML and CSS. I viewed the site in IE6, Netscape 7 and Mozilla on XP and everything looks consistent. I also viewed the site in Netscape 4.7 and, while you still have access to all the content, it doesn't look pretty. They have a link, viewable by browsers that don't support the new standards, that explains things for confused users: <!-- m --><a class="postlink" href="http://webstandards.org/act/campaign/buc/">http://webstandards.org/act/campaign/buc/</a><!-- m -->
I'm currently in the process of renovating my portfolio to at least XHTML 1.0 Transitional which means I'm still relying on tables (until I learn CSS positioning a little better) and some CSS positioning for page content. The ultimate goal is to just use CSS for everything.
If your biggest concern is backwards compatibility, using solely CSS for positioning would not be the best option at this point.
Just my two cents for ya'.
- MichaelI think the thing to do is not create identical pages for older browser, but just make them use able. You can for example use browser workarounds to stop older browsers using certain CSS code.
CSS:
/*Hide from NS 4.x*/
@media all {
body {
margin-left:10em;
}
#menu {
position:absolute;
top:1em;
left:1em;
width:8em;
}
#menu a {
display:block;
}
.hideme {
display:none;
}
}
/*Other CSS that all browser should see...*/
HTML
<body>
<p>Main Body Contents...</p>
<div id="menu">
<h2 id="nav">Navigation</h2>
<p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link</a> <span class="hideme">|</span>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link</a> <span class="hideme">|</span>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Etc.</a> <span class="hideme">|</span>
</p>
</div>
</body>
Which should make the menu absolutely positioned in modern browsers, with links that take up the whole line, but in old browsers the links will be at the bottom, with seperators between them.
And also if a:hover didn't work in NS6/7 I think you were probably doing something wrong, like putting them in the wrong order or something.Originally posted by James L.
I currently use the a:hover attribute for a site that I designed (it was my first commercial site actually). It works fine on my Mac in IE, but in Netscape version 7 it doesn't even work!
If you post a link we can find what you did wrong so you can fix it
Originally posted by Rick Bull CSS:
/*Hide from NS 4.x*/
@media all {
Unfortunately I've heard (don't have a Mac to verify on) that @media rules also hides it from IE/Mac.
That is rather unfortunate since IE/Mac (in contrast to IE/Win) is one of the best CSS browsers out there.
A perhaps better solution to hide CSS from NS4 is probably to use something like this
<script type="text/javascript">
<!--
//Since NN4 requires Javascript to be on for CSS to work at all this method is 100% safe.
if (document.layers) { document.write('<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"ns4.css" />'); }
-->
</script>
<style title="Default" type="text/css" media="screen">
@import "main.css";
</style>
This requires 2 .css files, but since NS 4 is pretty much broken everywhere in regard to CSS you will probably have to make a pretty specialazed CSS file for it anyway.Thanks for the answers!
I WAS doing something wrong with my styles sheets, the hover command, and netscape 7... what a surprise!
I am working through a book that I just got called "Eric Meyer on CSS". I think that's the title anyway, don't have it right in front of me. I am amazed how easy things become with CSS, can't wait until we are at the point where compatibility problems are gone.Originally posted by James L.
"Eric Meyer on CSS".
That is one of the CSS Gurus that really DOES know what CSS is about, so I'm sure it's a great book
Originally posted by Stefan Unfortunately I've heard (don't have a Mac to verify on) that @media rules also hides it from IE/Mac.
That is rather unfortunate since IE/Mac (in contrast to IE/Win) is one of the best CSS browsers out there.
@import works fine on IE Mac doesn't it? So it would be OK to use basically the method I showed but put all the @media stuff in another file and use @import instead wouldn't it?Originally posted by Rick Bull
@import works fine on IE Mac doesn't it? So it would be OK to use basically the method I showed but put all the @media stuff in another file and use @import instead wouldn't it?
Yepp, think so
Ah OK, that's good because that's what I have on my site