www.webdeveloper.com
Results 1 to 10 of 10

Thread: Can I drop tables and use CSS?

  1. #1
    Join Date
    Nov 2002
    Posts
    204

    Can I drop tables and use CSS?

    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.

  2. #2
    Join Date
    Nov 2002
    Location
    Houston
    Posts
    5
    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

  3. #3
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    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:
    Code:
    /*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
    Code:
    <body>
      <p>Main Body Contents...</p>
      <div id="menu">
        <h2 id="nav">Navigation</h2>
        <p>
          <a href="#">Link</a> <span class="hideme">|</span>
          <a href="#">Link</a> <span class="hideme">|</span>
          <a href="#">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.

  4. #4
    Join Date
    Nov 2002
    Posts
    984

    Re: Can I drop tables and use CSS?

    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
    // Stefan Huszics

  5. #5
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by Rick Bull

    CSS:
    Code:
    /*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="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.
    // Stefan Huszics

  6. #6
    Join Date
    Nov 2002
    Posts
    204
    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.

  7. #7
    Join Date
    Nov 2002
    Posts
    984
    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
    // Stefan Huszics

  8. #8
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    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?

  9. #9
    Join Date
    Nov 2002
    Posts
    984
    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
    // Stefan Huszics

  10. #10
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    Ah OK, that's good because that's what I have on my site

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles