SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Member
    Join Date
    May 2003
    Location
    NYC
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Tables in Netscape/Mozilla

    Hello all,

    I am redesigning my website to be XHTML 1.0 Strict.

    I am coming along fine except for this:
    I am still using tables.....old school. My Nav Table has a background image all set up thru CSS. Even the table height and width is set thru CSS. It looks exactly the way I want it to on IE 5+, however, Netscape and Mozilla don't preview correctly.

    Below is the code, and help would be greatly appreciated:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>

    <!-- This is the start of my CSS style sheet -->
    <style type="text/css">
    body {background-color: #e3e0dd}
    h1 {font-family: verdana}
    h1 {font-size: 11px}
    h1 {color: #333333}
    h1 {background-color: #e3e0dd}
    p.nav {font-family: verdana}
    p.nav {font-size: 10px}
    p.nav {color: #FFFFFF}
    p.nav {font-style: normal}
    p {font-family: verdana}
    p {font-size: 10px}
    p {color: #333333}
    P {font-style: normal}
    p {background-color: transparent}
    a {font-family: verdana}
    a {font-size: 10px}
    a {color: #333333}
    a {font-style: normal}
    a {background-color: #e3e0dd}
    table.nav {height: 26px; width: 760px}
    td.nav1 {background-image : url("images/midnav.png" ); background-repeat: no-repeat}
    td.nav1 {height: 26px}
    td.nav2 {height: 26px; width: 11px}
    td.nav3 {height: 26px; width: 207px}
    </style>
    <!-- This is the end of my CSS style sheet -->

    </head>

    <body>
    <!-- Start Main Layout Table -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td align="center" valign="top">
    <!-- Start Logo and Search -->
    <table width="760" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td align="left" valign="bottom"><img src="images/logo.gif" alt="logo"/></td>
    <td align="right" valign="middle"><p>TESTING</p></td>
    </tr>
    </table>
    <!-- End Logo and Search -->
    <!-- Start Navigation -->
    <table class= "nav" border="0" cellspacing="0" cellpadding="0">
    <tr align="center" valign="middle">
    <td class= "nav2"><img src="images/leftnav2.png" alt="leftnav" /></td>
    <td class= "nav1"><p class="nav">home</p></td>
    <td class= "nav1"><p class="nav">l</p></td>
    <td class= "nav1"><p class="nav">about us</p></td>
    <td class= "nav1"><p class="nav">l</p></td>
    <td class= "nav1"><p class="nav">networks</p></td>
    <td class= "nav1"><p class="nav">l</p></td>
    <td class= "nav1"><p class="nav">web</p></td>
    <td class= "nav1"><p class="nav">l</p></td>
    <td class= "nav1"><p class="nav">computer</p></td>
    <td class= "nav1"><p class="nav">l</p></td>
    <td class= "nav1"><p class="nav">media</p></td>
    <td class= "nav1"><p class="nav">l</p></td>
    <td class= "nav1"><p class="nav">support</p></td>
    <td class= "nav1"><p class="nav">l</p></td>
    <td class= "nav1"><p class="nav">contact us</p></td>
    <td class= "nav2"><p class="nav"><img src="images/rightnav.png" alt="rightnav" /></p></td>
    <td class= "nav3"><img src="images/shopnav.png" alt="shop"/></td>
    </tr>
    </table>
    <!-- End Navigation -->
    </td>
    </tr>
    </table>
    <!-- End Main Layout Table -->
    </body>
    </html>

    Thanks in advance!!
    -RRD

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, but...there's no real point in going strict if you're still using tables for layout...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please post the URL for your site, so I can see how the images are laid out.

    I didn’t glean much from copy-and-pasting your code into my editor I’m afraid.
    Of course, that's just my opinion. I could be wrong.

  4. #4
    SitePoint Member
    Join Date
    May 2003
    Location
    NYC
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the temporary link

    http://www.djemnet.com/xhtmlTEST/main.htm

  5. #5
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by redux
    sorry, but...there's no real point in going strict if you're still using tables for layout...
    Can divs, do everything a table can?
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  6. #6
    SitePoint Member ImCat's Avatar
    Join Date
    May 2003
    Location
    Vilnius, Lithuania
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try to remove DTD and see what happens. Without DTD
    Mozilla renders in quirk mode, and it looks ok. DTD causes to enter strict mode. You get extra space rendered for your <p>. To fix this problem quickly you have to do 2 things: add margin: 0px property to your p.nav and take rightnav.png out of surrounding <p> tags (just like leftnav.png). That should be sufficient to fix it. Still I would recommend you to make more rational
    markup, for example you don't have to repeat css selector very time, e.g. p.nav can be defined like this:
    p.nav {
    font-family: verdana;
    font-size: 10px;
    color: #FFFFFF;
    font-style: normal;
    margin: 0px;
    }

    one selector with css properties separated by semicolon. I'd add that those <p class="nav"> shoud be thrown away altogather...

    Regards,
    ic
    Last edited by ImCat; May 23, 2003 at 19:06.

  7. #7
    SitePoint Member
    Join Date
    May 2003
    Location
    NYC
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a bunch.....will try out a few options including the ones stated here. Appreciate all your help thus far.

  8. #8
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by The New Guy
    Can divs, do everything a table can?
    Try not to think of it in this way. Tables exist for the purpose of displaying relational tabular data. A page layout does not fit this description, and therefore the use of tables for describing page layouts is semantically incorrect.

    CSS is used to style and position elements on your page. Its capabilities far exceed that of restrictive table-based layouts, and generally result in easier to read markup, smaller file-sizes, increased accessibility, and site redesigns are far quicker.

    Of course, even the best tools can be abused in the hands of a poor workman, so take the time to verse yourself in CSS and XHTML by reading sites such as www.alistapart.com, www.zeldman.com, www.bluerobot.com, www.glish.com, and www.mezzoblue.com/zengarden (there are also other valuable links on these very sites).
    Of course, that's just my opinion. I could be wrong.

  9. #9
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I seen those designs, but have yet to see a CSS layout that had a 3 column (or more) in which if one column was larger then the other, each column would grow to that length, similar to a table layout. I have, attempted this and you have to make workarounds for certain (not just NN4) browsers, and even then.

    If you can, or anyone, can show me a good way of doing this, I will bow before you.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  10. #10
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of course, that's just my opinion. I could be wrong.

  11. #11
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Nope.

    For Example, look at http://www.thenoodleincident.com/tut.../basic3_4.html

    Now the left and the right should grow according to how the center one grows. Therefore all equal in height.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  12. #12
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooh, height. Sorry, I read “column” but my brain said “row”.

    Anyway, I’m reasonably sure I’ve come across that one before. I’ll be back later with or without an answer.
    Of course, that's just my opinion. I could be wrong.

  13. #13
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can divs, do everything a table can?
    No. But can tables do everything CSS can?

  14. #14
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Tables can do everything a div can when it comes to CSS. Whats your point?
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  15. #15
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The New Guy > See my previous post.

    It is not a question of whether or not tables can “do” layout; semantically, they are wrong for the purpose.

    By all means continue to create table layouts. It’s not my time.
    Of course, that's just my opinion. I could be wrong.

  16. #16
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With CSS-P alone there's no practical way to make 3 equally heigh colums. With some added Javascript it can be done. That's how Sitepoint is doing it. Keep in mind, however, that over 10% of users has Javascript disabled.

    One other trick is to set the backgound color of the body to what you want for your short colums, your longest column having it's own background color.

    Or what I recommend is, learn to use CSS-P properly. It really requires a shift in ones thinking. There's so many things one can do with CSS-P that can't even be dreamt of with tables. I'm on that road now, one book that I can really recommend for this is Eric Meyer On CSS. A little warning, before you read this book you should already be fairly familiar with how CSS works.

    Or if your goal is to 'copy' as accurately as possible a old table based design then I would recommend that you stick with your basic tables for your 3 colums and make them as lean as possible using CSS with div's etc within those 3 table cells.

    Just my 2c

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  17. #17
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tables can do everything a div can when it comes to CSS.
    Oh yeah? Show me a table that can do this. For the full effect, resize your browser, or change the font size a bit.

    For some more flashy examples, go look at the CSS Zen Garden You can't do that with tables, either.

  18. #18
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Ok with some minor CSS editing, and simple replacement of divs with table tags. The first site look the same.

    I not going to bother with Zen Garden, its best feature is its ability to change, using tables, I admit would be very hard, but I could easy change one design at a time to a table form. But I am not going to bother. (it would be like turning gamespot into divs )

    Trust me I see the advantages of using divs. I think Zoef said it best.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  19. #19
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok with some minor CSS editing, and simple replacement of divs with table tags. The first site look the same.
    with text flowing around the navbar and everything? even when you resize text or the window? I'm skeptical.
    I not going to bother with Zen Garden, its best feature is its ability to change, using tables, I admit would be very hard, but I could easy change one design at a time to a table form.
    One of the main principles of CSS (and that site as a demo of CSS) is that you don't have to do every design as a separate page.

    Zoef is spot on. Yes, there are things tables can do that CSS can't, but the reverse is also true. Some of the things that CSS does and tables can't are so useful that I, for one, can live without tables.

  20. #20
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I understand, that CSS is more powerful then tables. Thats the way it should be, natural progression suggests. I guess I am just a little frustrated. It would be nice to be able to do my design without using tables.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  21. #21
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by The New Guy
    (it would be like turning gamespot into divs )
    Challenge accepted!
    Of course, that's just my opinion. I could be wrong.

  22. #22
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by The New Guy
    I think Zoef said it best.
    Quote Originally Posted by blufive
    Zoef is spot on.
    Well thank you guys! Just like to add that I do believe one should code to standards

    But don't forget that this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    ...is also a standard.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  23. #23
    SitePoint Member
    Join Date
    May 2003
    Location
    NYC
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Progress Update

    Hey all again,

    Since I started this thread I have been reading and visiting links posted by some very helpful people. I have a re-design in progress based on XHTML Strict 1.0 and CSS and I would link to get some feedback. Here is the link: Sample of Page.

    Below is what my external style sheet looks like:
    body
    {
    background-color: #b0a9a2;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    }

    #leftcontent
    {
    position: absolute;
    left: 0px;
    top: 100px;
    width: 100px;
    background:#c9c4be;
    border-right: 1px dotted #ffffcc;
    border-bottom: 1px dotted #ffffcc;
    padding-top: 8px;
    padding-left: 8px;
    padding-bottom: 10px;
    text-align: center;
    }

    img
    {
    float: right;
    margin-right: 0px;
    margin-top: 0px;
    }

    img.logo
    {
    float: left;
    margin-right: 0px;
    margin-top: 0px;
    }

    h1
    {
    font-family: verdana;
    font-size: 11px;
    color: #333333;
    background-color: #e3e0dd;
    }

    p
    {
    font-family: verdana;
    font-size: 10px;
    color: #333333;
    font-style: normal;
    background-color: transparent;
    }

    p.nav
    {
    font-family: verdana;
    font-size: 10px;
    color: #ffffff;
    }

    a
    {
    font-family: verdana;
    font-size: 10px;
    color: #333333;
    font-style: normal;
    background-color: #e3e0dd;
    }

    #banner
    {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width:100%;
    background-image : url("images/toporange.jpg" ); background-repeat: repeat-x;
    height: 100px;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 100px;
    }

    #logo
    {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width:100%;
    height: 100px;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 100px;
    }

    #nav
    {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 80px;
    width:100%;
    background: #333366;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    height: 20px;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 20px;
    }

    #navin
    {
    position: absolute;
    background: transparent;
    height: 10px;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 10px;
    }

    Hope to hear back from y'all.
    -RRD

  24. #24
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first thing I notice is that you have a half-implemented version of Tantek Celik’s box-model hack.
    Code:
    height: 20px;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 20px;
    I say half-implemented, because you are suppose to have the dedicated IE width/height values above the “voice-family” lines, and the non-IE (standards compliant) width/height values below. As it is, both of your height values are exactly the same, so the hack is made redundant.

    Personally, I do not use the hack, since you can use a very simple style to force Mozilla/Netscape6+ and Opera to use the same box-model that IE does. Put this at the top of your style-sheet:
    Code:
    html * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    IE’s box-model is not the same as the W3C recommended box-model, but it does make much more sense. This hack will force all modern browsers to use the IE method.

    For more information on the box-model, visit: http://www.xs4all.nl/~ppk/css2tests/index.html?box.html
    Of course, that's just my opinion. I could be wrong.

  25. #25
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Zoef
    [img]images/smilies/blush.gif[/img]Well thank you guys! [img]images/smilies/blush.gif[/img]Just like to add that I do believe one should code to standards

    But don't forget that this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    ...is also a standard.

    Rik
    Take this to heart. HTML 4.01 is still a valid standard to use layout tables on. However Zoef, you only put up a partial DOCTYPE. A full listing of validating DOCTYPEs can be found here. ramdje, I suggest you go with either HTML 4.01 loose/strict, or XHTML 1.0 Transitional. Your design does not call for XHTML 1.0 Strict or XHTML 1.1. [img]images/smilies/smile.gif[/img]


Bookmarks

Posting Permissions

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