SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    lost faith in tableless css

    i'm sorry, but I was really excited to do a complete layout in css. I finished, got my css2 validated and xhtml validated. It looked great on my mac and every other browser other than IE. IE messed everything up. If I changed something to better fit IE then my layout looked bad in the other browser. What a disappointment, I hate microsoft. Back to table layouts
    Free Science Homework Help
    http://www.physicsforums.com

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2003
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    God - not the tables! What are you trying to achieve? Link? Maybe we can help...

  3. #3
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah - i'm using total CSS layouts for some experimental stuff, but I still use some tables for most client sites due to the fact they're more stable and you can generally tell how they will work out Not sure what others thoughts on this are?

  4. #4
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I am working on my first site with a purely CSS driven layout. It has been difficult because of the way some things are handled.

    For instance, if a DIV (layer) is floated, it no longer belongs to its parent. This is the hardest thing to get over.

    Articles such as Practical CSS Layout and Flexible layouts with CSS Positioning and others from A List Apart are helping a lot.

    My new site isn't pixel perfect nor do I ever expect it to be and I have run into some snags along the way but it is progressing and the XHTML code is a lot easier to read and follow than any tabled design. Personally, I will move forward and hope to have all my sites (including a couple of vBulletin forums) be purely CSS formatted by the end of the year.
    Wayne Luke
    ------------


  5. #5
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the link:
    http://www.topfloortech.com/clients/.../products.html

    I have a css file called products.css that is validated and makes the site look great in everything but IE

    I also have a css file not used but in the directory that is called products_IE.css that makes the site look good in IE, but nothing else.
    Free Science Homework Help
    http://www.physicsforums.com

  6. #6
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by platinum
    Yeah - i'm using total CSS layouts for some experimental stuff, but I still use some tables for most client sites due to the fact they're more stable and you can generally tell how they will work out Not sure what others thoughts on this are?
    I agree. Though I love the simplicity of a CSS layout, I opted to stay with a tabled layout for the moment even after getting a CSS layout that validated and looked OK in IE and NN (except 4x). The CSS mock-up is at http://www.saynotogmos.org/finalcss.html and the tabled version at www.saynotogmos.org if you're interested.

  7. #7
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    excellent colour sceme earther.. very "earthy" (no pun intended ) but I like it
    oh - and the CSS is great too - lookin' good in moz.

  8. #8
    SitePoint Enthusiast jessegavin's Avatar
    Join Date
    May 2003
    Location
    Minneapolis, MN USA
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what is the problem in IE? it looks fine to me

  9. #9
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,251
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jessegavin
    what is the problem in IE? it looks fine to me
    I would agree. What version of IE and what platform? Looks fine on IE6 in win2K
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  10. #10
    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)
    if it's only an issue in 5.5, you may want to use the box model hack...or is it far more severe than this ?
    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

  11. #11
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well I just got it to "work" using an IE hack:

    Code:
    <link rel="stylesheet" href="products.css" type="text/css">
    
    <!--[if IE]>
    <link rel="stylesheet" href="products_IE.css" type="text/css">
    <![endif]-->
    I'm forced to use two slightly different css files
    Free Science Homework Help
    http://www.physicsforums.com

  12. #12
    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)
    ok, so from what i can see the only difference between the two is the difference in width/height for #itemcontent1 and #itemcontent2

    and yes, this can be easily solved with tantek's box model hack. http://www.tantek.com/CSS/Examples/boxmodelhack.html
    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

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The CSS mock-up is at http://www.saynotogmos.org/finalcss.html and the tabled version at http://www.saynotogmos.org if you're interested.
    I've got to laugh (lol) your css version is almost perfect in Opera 6 but your (reliable) table version is completely up the twist. Things are not always as black and white as they seem [img]images/smilies/smile.gif[/img]

    Paul

    (PS I like the CSS design)

  14. #14
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I've got to laugh (lol) your css version is almost perfect in Opera 6 but your (reliable) table version is completely up the twist. Things are not always as black and white as they seem [img]images/smilies/smile.gif[/img]

    Paul

    (PS I like the CSS design)
    Well, I'm not LOL! Care to share just what's going on with it?? For the moment though, I'd still rather have the 10% of my visitors using NN 4x see an acceptable tabled version than have the .25% of Opera visitors see a clean CSS version. In the meantime, I'll keep plugging away at trying to find a way to make NN 4x play nice with my layout - got some good suggestions in another thread and finally have the time to follow up. Glad you like the design, at least!

  15. #15
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dethfire
    well I just got it to "work" using an IE hack:
    I'm forced to use two slightly different css files
    It's almost there. Only thing is that the yellow and black lines are out of sync. See attached.
    Attached Images Attached Images

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Care to share just what's going on with it??
    Sorry didn't mean to upset you It's something to do with the widths in the tables either they are out of sync or they don't add up or it might be that Opera just doesn't like it.

    I loaded your table into DW and selected the main outer table and clicked on clear widths. The table just popped back into place. All that was needed was to give a width to the left column to get it back to where it was. It then diplayed perfectly in Opera 6 and was also fine in IE6 and Mozila 1.2.

    I can't tell you which widths to change as DW did all the work as I hate looking through nested tables (they drive me mad).

    As you say Opera's share of the browser market is small (but growing) so it's probably better to look after your main customers. (However I think you can do both if you want to spend more time on it.)

    Hope this helps a little bit

    Paul

  17. #17
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Sorry didn't mean to upset you It's something to do with the widths in the tables either they are out of sync or they don't add up or it might be that Opera just doesn't like it.

    I loaded your table into DW and selected the main outer table and clicked on clear widths. The table just popped back into place. All that was needed was to give a width to the left column to get it back to where it was. It then diplayed perfectly in Opera 6 and was also fine in IE6 and Mozila 1.2.

    I can't tell you which widths to change as DW did all the work as I hate looking through nested tables (they drive me mad).

    As you say Opera's share of the browser market is small (but growing) so it's probably better to look after your main customers. (However I think you can do both if you want to spend more time on it.)

    Hope this helps a little bit

    Paul
    *EDIT* Well, I downloaded Opera to see the problem for myself. It took about two seconds to find the little bugger! Actually the problem was the RH main content table which had an "open" width. I put a percentage in there and bingo. Check out the corrected index page It should look OK in your Opera browser now (and it looks good in NN 4x too!). I'll have to correct the rest of the pages tomorrow - won't take long but will be tedious.
    Last edited by earther; May 23, 2003 at 22:49.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It took about two seconds to find the little bugger!
    Looks great now, glad you sorted it

  19. #19
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Looks great now, glad you sorted it
    Thanks for letting me know and providing incentive to download Opera!


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
  •