CSS, Tables, and weird Errors... (DailyTunes)

Discussion in 'Web Design and Development (archive)' started by arn, Oct 28, 2003.

  1. arn
    Expand Collapse
    macrumors god

    arn

    Staff Member

    Joined:
    Apr 9, 2001
    #1
    Hey all..

    i'll be the first to admit that I'm a CSS novice. I don't know what the heck is going on.

    Anyhow... there are some weird problems I've been having with the interaction between CSS div's and tables.

    I've got <div>'s which make up the center portion of the Dailytunes site.

    And Table's embeeded in the divs.

    If I set the table at 100% width, it does some strange things on Windows IE.

    compare:

    http://www.dailytunes.com/

    http://www.dailytunes.com/winie.php

    The only diff is that winie has the first table with 100% width -- which is what I want actually. I managed to work around the problem on this page... but have been told of similar problems on other pages.

    My solution for this page was to set the first <td> to 100% instead, and the <table> without a width (so it was auto).

    But in other pages, I can't set the first <td> to 100%... it messes up the way the table looks.

    arn
     
  2. Rower_CPU
    Expand Collapse
    Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #2
    Have you tried replacing the table with <div>s? The only catch would be floating the album cover right, since you'd get rid of the <td> that puts it over there.

    In my experience, using 100% width on tables or parts of tables is interpreted in very different ways by browsers. Some just take 100% of the area they are, some want 100% of the whole browser window.

    If you want some help trying it out, let me know. I'll be home all day (work cancelled again due to the fires).
     
  3. Rower_CPU
    Expand Collapse
    Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #3
    Have you had any luck fixing it up, yet?

    I know you've been busy on it. ;)
     
  4. Lz0
    Expand Collapse
    macrumors regular

    Joined:
    Jul 20, 2002
    Location:
    Melbourne
    #4
    Placing a table width of 100% in a layer will throw IE (Mac & Win) out every time, I'm not sure why, but almost certainly it's a bug.

    The only work around is to use pixel widths - not much help to you if you want a liquid page.

    But then I can't see why you would want to use div tags in your design.
     
  5. Rower_CPU
    Expand Collapse
    Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #5
    Well, if you're trying to replace tables, you use divs and CSS.
     
  6. putmanh
    Expand Collapse
    macrumors newbie

    Joined:
    Nov 19, 2003
    #6
    Workaround: add a div...

    Setting the table width=100% doesn't work right in Internet Explorer on Windows. But if you wrap the table in a div and set that width to 100% and the table width to 100%, it seems to work...
     
  7. Punboy
    Expand Collapse
    macrumors newbie

    Joined:
    Nov 3, 2003
    Location:
    Seattle, WA
    #7
    In the table's tag, put "style='width:100;'"

    That may work
     
  8. Rower_CPU
    Expand Collapse
    Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #8
    You need some sort of size parameter (px, %, etc.) on widths. The only number that doesn't need (and shouldn't have) a unit measure is 0.
     
  9. Punboy
    Expand Collapse
    macrumors newbie

    Joined:
    Nov 3, 2003
    Location:
    Seattle, WA
    #9
    ya, whoops :p forgot the % sign

    put THIS "style='width:100%;'"

    Sorry 'bout that
     
  10. Codemonkey
    Expand Collapse
    macrumors 6502

    Joined:
    Apr 22, 2002
    Location:
    Edmonton
    #10
    Arn - any closer?

    Doesn't look like it based on those links...

    Anyway, it's a fairly well known bug, iirc. Try changing your width to something other than 100% and see if that fixes it. If so, can you live with 99%? :p

    Also, as stated before, try style="width:100%" in the offending tag - that should do it.
     

Share This Page