SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning checkboxes with out updating the global CSS

    I was unable to align the thead(head level) check box 'managersSelected' to left (OR) align the row level check boxes to center with out changing the global CSS in the head section. I want to add inline style element to align the checkboxes.

    Any thoughts?

    Here is the code for html pag
    Code:
    <html>
    <head>
       <style> 
        <!--
        table.mgr-table {
            text-align: left;
            padding: 10px;
            border: 1px solid #8C6B3E;
            width: 100&#37;
        }
    
        table.mgr-table th, table.mgr-table td {
            padding: 5px;
        }
    
        table.mgr-table thead tr {
            background-color: #EFEFE7;
            color: #7A481B;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 3px;
            padding-right: 3px;
            border-bottom: #8C6B3E 1px solid;
            border-left: #CECCB6 1px solid;
            border-right: #FFFFFF 2px solid;
            text-align: center;
        }
    
        table.mgr-table th.sorted {
            padding-right:20px;
        }
    
        table.mgr-table th.sortable a {
          white-space: normal;
        }
    
        table.mgr-table th.order1 {
            background-image: url(../images/ascending.gif);
            background-repeat: no-repeat;
            background-position: right;
        }
    
        table.mgr-table th.order2 {
            background-image: url(../images/descending.gif);
            background-repeat: no-repeat;
            background-position: right;
        }
    
        table.mgr-table tr.odd {
            background: url("../images/table_blue_row_bg.gif") repeat-x top #d3e1f0;
        }
    
        table.mgr-table tr.tableRowEven,table.mgr-table tr.even {
            background: #FFFFFF;
        }
    
        table.mgr-table tr.odd td {
            padding: 5px;
            border-left: #D3E1F0 1px solid;
            border-right: #D3E1F0 0px solid;
            vertical-align: top;
        }
    
        table.mgr-table tr.even td {
            background: #FFFFFF;
            border-left: #FFFFFF 1px solid;
            border-right: #FFFFFF 0px solid;
            padding: 5px;
            vertical-align: top;
        }
        -->
       </style>
    
    </head>
    <body>
        <div id="table_wrapper">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <h3>Add Managers</h3>
                <tr>
                    <td>
                    <table class="mgr-table" id="managerTable">
                        <thead>
                            <tr>
                                <th><input type='checkbox' name='managersSelected'  id='managersSelected' onClick='toggleCheckboxes();'/></th>
                                <th>Name</th>
                                <th>Phone</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="odd">
                                <td><input name="selectedName" type="checkbox" value="1234"/></td>
                                <td>MICHAEL MOORE</td>
                                <td>(573) 747-9447</td>
                            </tr>
                            <tr class="even">
                                <td><input name="selectedName1" type="checkbox" value="7658"/></td>
                                <td>RICK BALBOA</td>
                                <td>(572) 742-9447</td>
                            </tr>
                        </tbody>
                    </table>
                    </td>
                 </tr >
            </table>
        </div>
    </body>
    </html>
    Last edited by Paul O'B; Jan 26, 2010 at 12:45. Reason: code tags added

  2. #2
    SitePoint Member 3dy's Avatar
    Join Date
    Jan 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wonder why there is a CODE tag on SitePoint.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure why you have to have the styles inline but I'll assume you have good reason

    You can force the issue like this:

    Code:
    <table border="0" cellpadding="0" cellspacing="0" width="100&#37;">
            <tr>
                <td><table class="mgr-table" id="managerTable">
                        <thead>
                            <tr>
                                <th style="text-align:left!important"><input type='checkbox' name='managersSelected'  id='managersSelected' onClick='toggleCheckboxes();'/></th>
                                <th>Name</th>
                                <th>Phone</th>
                            </tr>

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I'll aslo assume you don't have a doctype for a good reason
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •