SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Melbourne
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS div table issues...

    Hey guys,

    My site is pretty much 100% div/css driven as i refuse to use tables at all costs, but i am having a problem with making spanable tables with div/css.

    I have made 2 instances of these, 1 with 2 columns and 3 to 5 rows, and another with 3 columns and 5 rows.

    with each one, in IE6 and Firefox, occasionally when i load the page instead of all lining up they go haywire and the offender always seems to be 1 row in which instead of having all the columns lined up there will be a gap and then the "table cell" will be another column across which shouldnt really exist.

    Because of this the whole table gets thrown out of shape and looks quite ugly.

    It is always a randow row and there is no real consistency to the problem, it happens approx 1 in 10 times and when it does there is no consistency to which cell in which row will skip a place and throw everything out.

    here is my css for the 2 column issue, hopefully the fix for this one will fix the 3 column issue too.

    Code:
    .tablediv { display:table;width:100%}
    .rowdiv{display:table-row; width:auto;}
    .celltopic { float:left; display:table-cell; width:50%;	height:85px; overflow:hidden; background-color:#eeeeee;}
    
    <div class='tablediv'>  
      <div class='rowdiv'>
        <div class='cellTopic'>
          <!-- content here -->
        </div>
        <div class='cellTopic'>
          <!-- content here -->
        </div>
      </div>
      <div class='rowdiv'>
        <div class='cellTopic'>  
          <!-- content here -->
        </div>
        <div class='cellTopic'>
          <!-- content here -->
        </div>
      </div>
    </div>
    If you want an example of the error try refreshing this page a few times and that will hopefully give you an example of the bug on the 3 column example.

    I have tried so many things, i am sure it must be a basic error but i just cant figure it out :\
    -----------------------------------
    ClubsGuide.com.au
    Melbourne's Nightlife Online
    -----------------------------------

  2. #2
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Melbourne
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry just to add another thing...

    it seems to be much much more common in Firefox than IE, not sure why...
    Its usually the other way around.
    -----------------------------------
    ClubsGuide.com.au
    Melbourne's Nightlife Online
    -----------------------------------

  3. #3
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    What are you displaying? It may be more valid to use a table...
    Ryan B | My Blog | Twitter

  4. #4
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Melbourne
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi rguy,

    if you click on the link in my 1st post it will take you to the online photo gallery i built.

    As each of these divs contains a photo/link/text i didnt really think this could be classified as tabular data.

    because of that i took this approach.

    Thank you for taking the time to read the problem, i hope you can help.
    -----------------------------------
    ClubsGuide.com.au
    Melbourne's Nightlife Online
    -----------------------------------

  5. #5
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Sorry I didn't see your link till after my post. Anyhow, I could not replicate the effect. Anyhow i would use a table here.
    Ryan B | My Blog | Twitter

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Removing display: table-row from .rowdiv seems to correct the problem in FF.

  7. #7
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Melbourne
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks tyssen...

    ill give it a go when i get home tonight
    -----------------------------------
    ClubsGuide.com.au
    Melbourne's Nightlife Online
    -----------------------------------


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
  •