Can I drop tables and use CSS?

@James_L_Nov 30.2002

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.

to post a comment

CSS

9 Comments(s) _↴

@plusonetwoNov 30.2002 — #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: http://webstandards.org/act/campaign/buc/

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'.

- Michael

@Rick_BullNov 30.2002 — #I 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:

<i>
 </i>/*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

<i>
 </i>&lt;body&gt;
 &lt;p&gt;Main Body Contents...&lt;/p&gt;
 &lt;div id="menu"&gt;
 &lt;h2 id="nav"&gt;Navigation&lt;/h2&gt;
 &lt;p&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt; &lt;span class="hideme"&gt;|&lt;/span&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt; &lt;span class="hideme"&gt;|&lt;/span&gt;
 &lt;a href="#"&gt;Etc.&lt;/a&gt; &lt;span class="hideme"&gt;|&lt;/span&gt;
 &lt;/p&gt;
 &lt;/div&gt;
 &lt;/body&gt;

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.

@StefanNov 30.2002 — #[i]Originally posted by James L. [/i]

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! [/QUOTE]

If you post a link we can find what you did wrong so you can fix it ?

@StefanNov 30.2002 — #[i]Originally posted by Rick Bull [/i]

CSS:

<i>
 </i>/*Hide from NS 4.x*/
 @media all {

[/QUOTE]

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">



</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.

@James_L_authorNov 30.2002 — #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.

@StefanNov 30.2002 — #[i]Originally posted by James L. [/i]

"Eric Meyer on CSS". [/QUOTE]

That is one of the CSS Gurus that really DOES know what CSS is about, so I'm sure it's a great book ?

@Rick_BullDec 01.2002 — #[i]Originally posted by Stefan [/i]

[B]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.

[/B][/QUOTE]

@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?

@StefanDec 01.2002 — #[i]Originally posted by Rick Bull [/i]

[B]@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? [/B][/QUOTE]

Yepp, think so ?

@Rick_BullDec 02.2002 — #Ah OK, that's good because that's what I have on my site :p

Also in #CSS _↴

heading background increment with text Margin displays wider in Firefox than IE?about positioning and float -property

Success!

Help @James_L_ spread the word by sharing this article on Twitter...

Tweet This

Can I drop tables and use CSS?

9 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Can I drop tables and use CSS?

9 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #CSS _↴