SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Table Not Aligning to the Left in Article

    Hello, New Version of SitePoint!

    I'm back again with another brain buster! For some reason, the tables on my landing pages align well to the right side, but they appear to have trouble fitting on the left side.

    Here are the styles in question (lines 175-287):
    Code:
    /* -------------------------------------------- *\
        table .rating
    \* -------------------------------------------- */
    .tablewrap {
        display:table;
    	padding:8px 0 16px;
    }
    table.categories {
        border-spacing:0;   /* border-spacing: is the equivalent of the cellspacing attribute only better. */
        border-left:2px solid #ccc;    /* specifiying border properties (esp. color) makes them cross-browser consistent... */
        border-top:2px solid #ccc;     /* the shading of border-style: inset, outset, groove, and ridge vary considerably between browsers */
        border-right:2px solid #999;
        border-bottom:2px solid #999;
        margin:0 auto;
        width:70%;
    }
    .categories th,
    .categories td {    /* these borders are also applied to the cells in the .rating (inner) table. */
        border-left:2px solid #999;
        border-top:2px solid #999;
        border-right:2px solid #ccc;
        border-bottom:2px solid #ccc;
     /* FYI: if {padding:0;} were applied here, it would be the equivalent of the cellpadding="0" attribute except that it would apply to all cells in both tables. */
    }
    .categories th {     /* Styles the title bar */
        font-size:1.5em;
        font-family:Georgia,serif;
        padding:6px 0;
    }
    .categories td.catcol1,    /* the .catcols are .categories columns */
    .categories td.catcol2 {
        vertical-align:middle;
        font-weight:bold;
        font-family:Arial,sans-serif;
        text-align:center;
        padding:0 6px;
    }
    .categories td.catcol1 {
        border-right:0;    /* removes a border in .catcol1 that was globally applied. */
    }
    .categories td.catcol2 {
        border-left:1px dotted #aaa;    /* alters a border in .catcol2 that was globally applied. */
    }
    .categories td.catcol3 {
        border:0;    /* removes the borders inside .catcol3 that were globally applied. */
        background-color:#999;   /* background-color in case .ratings lifts from bottom because text wraps or is zoomed excessively. */
        padding:0;
    }
    .catcol2 {
        height:68px;    /* table-cells treat height as min-height.  This value is applied to approximately "equalize" the height of the .categories rows *because* Opera and Chrome will not equalize the height of these cells *because* the table height is set by the contents of the taller 3rd column cell that uses rowspan. */
        height:60px;    /* (Yes, this value overrides the one above it.  Comment out or delete this one to try the previous.  Experiment.)  At 60px, the bottom row is a little taller than the top 3 in Opera and Chrome but this will allow a little more text to wrap or zoom larger before the .ratings table lifts from the bottom. */
    }
    .catcol3 {
        vertical-align:top;
    /*    width:40%;    /* Set a default width for table.ratings at wider .categories widths. The min-width applied to .ratings td {min-width:4.125em} will win at narrow widths. */
    }
    
    /* This is the inner table with the graphs */
    table.ratings {
        width:100%;
        border-spacing:0;   /* border-spacing is the equivalent of the cellspacing attribute only better */
        font-weight:bold;
        font-family:Arial,sans-serif;
    }
    .ratings td {
        background-color:#fff;   /* background-color of the .rating cells, if desired. */
        text-align:center;
        min-width:4.125em;   /* if desired; value depends on min width allocated to text in .ratrow1 */
        width:33.3%;    /* Equalizes the width of the .ratings columns.  !IMPORTANT! This number MUST be adjusted to match the number of graphs!!! 4 graphs at 25% each, 3 graphs at 33% each, etc. */
    }
    
    /* .ratrow1 td cells hold the name of the graph. */
    .ratingrow1 td {
        height:40px;       /* the minimum height of the .quality row */
        padding-bottom:2px;
        border-bottom:0;    /* this deletes the bottom border from the .quality cells */
    }
    
    /* .ratrow1 td span allows the rating number to be styled uniquely */
    .ratingrow1 td span {
        display:block;
        font-size:1.2em;    /* set the size of the numerical rating here */
    }
    
    /* ratrow2 td cells hold the graph elements. */
    .ratingrow2 td {
        border-top:0;    /* this deletes the top border from the .graph cells */
        vertical-align:bottom;
    }
    
    /* These are the graph elements */
    .graph {
        height:240px;      /* same as the height of the colored bar and yaxis images */
    	width:54px;
        position:relative;   /* creates a stacking context for the elements inside the .ratings table cells (because table cells cannot be positioned). */
        overflow:hidden;
    }
    .yaxis {
        position:absolute;
        left:0;
        top:0;
        right:0;
        bottom:0;
        background:url('yaxis.gif') no-repeat 100% 100%;   /* 180x240 */
    }
    .bar {
        width:100%;
        height:100%;
        position:absolute;
        right:25px;    /* offsets the right edge of the colored bar */
        bottom:0;
        background:url('bar.gif') repeat-x 0 100%;
    }

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    RE: http://www.worldreviewgroup.com/dati...rsreview2.html

    The table with the graphs is centered in FF and Chrome. How are you viewing it?

    What happens if you delete {display:table} and add {clear:both}?
    Code:
    .tablewrap {
        display: table;
        clear:both;
        padding: 8px 0 16px;
    }

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Now, the table just hangs out at the bottom of the image on both of the landing pages, when it would nicely wrap to the text at wide viewport lengths, and then it would shrink a little bit and go to the bottom of the image when the viewport is narrow.

    Code:
    .tablewrap {
    	clear:both;
    	padding:8px 0 16px;
    }

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    RE: http://www.worldreviewgroup.com/dati...rsreview2.html
    This is what I see in FF:
    https://www.dropbox.com/s/omzsxguuub...ablegraph1.gif

    Hey, Ty,

    The y-axis grid-lines image is not being loaded... not found.
    You have a horizontal graph colored gradient image instead of a vertical one and the .bar code seems to be for a horizontal image, too. Somethings wrong at home plate, bud.
    Last edited by ronpat; Aug 29, 2013 at 22:18. Reason: Add message.

  5. #5
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Cool

    It should be much better now. I didn't have the bar and y-axis images uploaded. Oops!

    That's how I see the table positioned, when I think it should wrap at wide viewport lengths. I tried adding width:50%; to .tablewrap , but it still doesn't wrap like it was doing.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Ok, now I understand what you're doing. Change {clear:both} back to {display:table}.

    You can change the width of table.categories to 90 or even 100% if you wish to try that.

  7. #7
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ron!

  8. #8
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I guess the default display value of inline does not allow the table to flex and adjust while display:table; does?

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by etidd View Post
    I guess the default display value of inline does not allow the table to flex and adjust while display:table; does?
    If you're talking about div.tablewrap, the default value of a div is block, that that would not have worked. display:table hugs its contents so it conforms to the width of table.categories.


Tags for this Thread

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
  •