Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    667
    Rep Power
    6

    Inline works, but not CSS


    Anyone know why the first way works, but not the second? I see no way the 5px spacing I have up top for the whole page can affect a definition pointed straight at this object.

    Code:
    <TABLE class="listing" style="border-spacing: 0px;">
    Code:
    CSS:
    .listing {
        border-spacing: 0px;
    }
    HTML:
    <TABLE class="listing">
    The lines below are working just fine making the borders. Just can't get the spacing to work in the stylesheet instead of in-line.

    Code:
    .listing tbody tr td:first-child {
        border-left: #000 1px solid;
    }
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  2. #2
  3. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,174
    Rep Power
    1469
    As a general rule, if inline styling works, and your regular CSS does not, then you need to make your selectors more specific. It means that there is another rule that is overriding what you are trying to do, or it is inheriting a more specific rule from a parent.

    A quick test is to add !important to your rule and see if it starts working.

    In other words, we can't help you without seeing the rest of your CSS. You should also try Firebug or some other CSS inspector and see which rules are being applied to your element.
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    667
    Rep Power
    6
    Here's the CSS. It is usually rather rare of me to use general selected rules. The closest is usually visual presentation of text, and even that is usually class-based.
    Code:
    #heading { width: 100%; }
    
    #function td {
      height: 50px;
      vertical-align: top;
      text-align: right;
    }
    
    #profile td {
      text-align: left;
    }
    
    h3 {
      display: inline;
    }
    
    #outer {
      border: thin solid black;
      height: 500px;
      padding-top: 20px;
      position: relative;
    }
    
    #inner {
      height: 500px;
      overflow: auto;
      overflow-x: hidden;
    }
    #table {
      table-layout: fixed;
      width: 733px;
    }
    
    #table thead tr {
      border-bottom: thin solid black;
      position: absolute;
      top: 0px;
    }
    
    #table thead tr th {
      cursor: pointer;
      font-weight: bold;
    }
    
    #table td {
      overflow: hidden;
      text-align: left;
      white-space: nowrap;
    }
    
    .highlightable:hover{
      background-color: lightgray;
    }
    
    /*                              */
    /*      Detailed View Page      */
    /*                              */
    
    #content div table {
      border-spacing: 5px;
    }
    
    #printer td {
      text-align: right;
      padding-right: 5px;
    }
    
    #printer td+td {
      text-align: left;
    }
    
    #RIP td {
      text-align: right;
      padding-right: 5px;
    }
    
    #RIP td+td {
      text-align: left;
    }
    
    #installTime td {
      text-align: right;
      padding-right: 5px;
    }
    
    #prepReport td {
      text-align: right;
      padding-right: 10px;
    }
    
    #prepReport td+td {
      text-align: left;
    }
    
    #prepReport tr td:nth-child(2) {
      border: #E0E0E0 1px solid;
      padding-left: 5px;
      vertical-align: bottom;
    }
    
    #transportation td {
      text-align: right;
      padding-right: 10px;
    }
    
    #transportation td+td {
      text-align: left;
    }
    
    #transportation tr td:nth-child(2) {
      border: #E0E0E0 1px solid;
      padding-left: 5px;
      vertical-align: bottom;
    }
    
    #installation td {
      text-align: right;
      padding-right: 10px;
    }
    
    #installation td+td {
      text-align: left;
    }
    
    #installation tr td:nth-child(2) {
      border: #E0E0E0 1px solid;
      padding-left: 5px;
      vertical-align: bottom;
    }
    
    #supply td {
      text-align: right;
      padding-right: 10px;
    }
    
    #supply td+td {
      text-align: left;
    }
    
    .listing {
        border-spacing: 0px;
    }
    
    .listing tbody tr td:first-child {
        border-left: #000 1px solid;
    }
    
    .listing tbody tr td:last-child {
        border-right: #000 1px solid;
    }
    
    .listing tbody tr:first-child td {
        border-top: #000 1px solid;
    }
    
    .listing tbody tr:last-child td {
        border-bottom: #000 1px solid;
    }
    And just for the sake of tossin it out there...
    The HTML:
    Code:
                        <?php
                          if(1 == 2) { ?><TABLE id="profile">
                          <TR id="function">
                            <TD style="text-align: right;">ID: <INPUT type="text" value="<?php echo (isset($_GET['id']) ? $_GET['id'] : " (New) "); ?>" /><INPUT type="button" value=" Cancel " style="margin-left:350px;" onClick="parent.location='?loc=ifrs'" /></TD>
                          </TR>
                          <TR>
                            <TD style="font-size: 80%; color: red;">*If you cannot find the customer, the name may be different. Please search in the Customers section from the Main Menu.</TD>
                          </TR>
                          <TR>
                            <TD>
                              <H3>Select Customer: </H3>
                              <SELECT name="CID" id="CID" onchange="getMID(this.value);">
    <?php buildCompany(); ?>
                              </SELECT>
                            </TD>
                          </TR>
                          <TR><TD>&nbsp;</TD></TR>
                          <TR>
                            <TD style="font-size: 80%; color: red;">*If the printer does not appear below, talk to Jeff to add it to the list.</TD>
                          </TR>
                          <TR>
                            <TD>
                              <H3>Select Printer: </H3>
                              <SELECT name="MID" id="MID">
    <?php buildSerial($var['CID'],$var['MID']); ?>
                              </SELECT>
                            </TD>
                          </TR>
                          <TR><TD>&nbsp;</TD></TR>
                          <TR>
                            <TD style="text-align: center;"><INPUT type="button" value=" Continue " /></TD>
                          </TR>
                        </TABLE><?php } ?>
                        <DIV id="customer">
                          <H3>Customer Information</H3>
                          <HR />
                          <TABLE>
                            <TR>
                              <TD colspan="2">Selected Customer: <SELECT><OPTION>To be...</OPTION></SELECT></TD>
                              <TD colspan="3" style="text-align: left;">Autofill link?</TD>
                            </TR>
                            <TR>
                              <TD>Owner: <INPUT name="owner" type="text" /></TD>
                              <TD>E-mail: <INPUT name="email" type="text" /></TD>
                              <TD colspan="3">Address: <INPUT name="address" type="text" /></TD>
                            </TR>
                            <TR>
                              <TD>Production Manager: <INPUT name="prodmgr" type="text" /></TD>
                              <TD>Telephone: <INPUT name="phone" type="text" /></TD>
                              <TD>City: <INPUT name="city" type="text" /></TD>
                              <TD>State: <INPUT name="state" type="text" /></TD>
                              <TD>ZIP: <INPUT name="zip" type="text" /></TD>
                            </TR>
                            <TR>
                              <TD>Distributor: <INPUT name="distrib" type="text" /></TD>
                              <TD>Fax: <INPUT name="fax" type="text" /></TD>
                              <TD>Country: <INPUT name="country" type="text" /></TD>
                              <TD colspan="2"></TD>
                              <TD></TD>
                            </TR>
                          </TABLE>
                        </DIV>
                        <DIV id="printer">
                          <H3>Printer Information</H3>
                          <HR />
                          <TABLE>
                            <TR>
                              <TD>Select Printer: </TD>
                              <TD><SELECT><OPTION>To be...</OPTION></SELECT></TD>
                            </TR>
                            <TR>
                              <TD>Software Version: </TD>
                              <TD><INPUT name="softVer" type="text" /></TD>
                            </TR>
                            <TR>
                              <TD>Hasp Serial #: </TD>
                              <TD><INPUT name="serial" type="text" /></TD>
                            </TR>
                            <TR>
                              <TD>Hasp Expiration: </TD>
                              <TD><INPUT name="expire" type="text" /></TD>
                            </TR>
                            <TR>
                              <TD>Hasp 8-bit Expiration: </TD>
                              <TD><INPUT name="8bit" type="text" /></TD>
                            </TR>
                          </TABLE>
                        </DIV>
                        <DIV id="printHead">
                          <H3>Print Head Information</H3>
                          <HR />
                          <TABLE>
                            <TR>
                              <TD style="padding-right:50px;">
                                Head 1: <SELECT><OPTION>W</OPTION></SELECT><INPUT name="head1" type="text" />
                              </TD>
                              <TD>
                                Head 8: &nbsp;&nbsp;<SELECT><OPTION>W</OPTION></SELECT><INPUT name="head8" type="text" />
                              </TD>
                            </TR>
                            <TR>
                              <TD>
                                Head 2: <SELECT><OPTION>W</OPTION></SELECT><INPUT name="head2" type="text" />
                              </TD>
                              <TD>
                                Head 9: &nbsp;&nbsp;<SELECT><OPTION>W</OPTION></SELECT><INPUT name="head9" type="text" />
                              </TD>
                            </TR>
                            <TR>
                              <TD>
                                Head 3: <SELECT><OPTION>W</OPTION></SELECT><INPUT name="head3" type="text" />
                              </TD>
                              <TD>
                                Head 10: <SELECT><OPTION>W</OPTION></SELECT><INPUT name="head10" type="text" />
                              </TD>
                            </TR>
                            <TR>
                              <TD>
                                Head 4: <SELECT><OPTION>W</OPTION></SELECT><INPUT name="head4" type="text" />
                              </TD>
                              <TD>
                                Head 11: <SELECT><OPTION>W</OPTION></SELECT><INPUT name="head11" type="text" />
                              </TD>
                            </TR>
                            <TR>
                              <TD>
                                Head 5: <SELECT><OPTION>W</OPTION></SELECT><INPUT name="head5" type="text" />
                              </TD>
                              <TD>
                                Head 12: <SELECT><OPTION>W</OPTION></SELECT><INPUT name="head12" type="text" />
                              </TD>
                            </TR>
                            <TR>
                              <TD>
                                Head 6: <SELECT><OPTION>W</OPTION></SELECT><INPUT name="head6" type="text" />
                              </TD>
                              <TD>
                                Head 13: <SELECT><OPTION>W</OPTION></SELECT><INPUT name="head13" type="text" />
                              </TD>
                            </TR>
                            <TR>
                              <TD>
                                Head 7: <SELECT><OPTION>W</OPTION></SELECT><INPUT name="head7" type="text" />
                              </TD>
                              <TD>
                                Head 14: <SELECT><OPTION>W</OPTION></SELECT><INPUT name="head14" type="text" />
                              </TD>
                            </TR>
                          </TABLE>
                        </DIV>
                        <DIV id="RIP">
                          <H3>RIP Information</H3>
                          <HR />
                          <TABLE>
                            <TR>
                              <TD>
                                RIP Type: 
                              </TD>
                              <TD>
                                <SELECT><OPTION>To be...</OPTION></SELECT>
                              </TD>
                            </TR>
                            <TR>
                              <TD>
                                RIP Version: 
                              </TD>
                              <TD>
                                <INPUT name="RIPVer" type="text" />
                              </TD>
                            </TR>
                            <TR>
                              <TD>
                                RIP Dongle: 
                              </TD>
                              <TD>
                                <INPUT name="dongle" type="text" />
                              </TD>
                            </TR>
                          </TABLE>
                        </DIV>
                        <DIV id="installTime">
                          <H3>Installation Time</H3>
                          <HR />
                          <TABLE>
                            <TR>
                              <TD>
                                Start Date: 
                              </TD>
                              <TD>
                                <INPUT name="start" type="text" />
                              </TD>
                            </TR>
                            <TR>
                              <TD>
                                Finish Date: 
                              </TD>
                              <TD>
                                <INPUT name="finish" type="text" />
                              </TD>
                            </TR>
                            <TR>
                              <TD>
                                COI: 
                              </TD>
                              <TD>
                                <INPUT name="coi" type="text" />
                              </TD>
                            </TR>
                          </TABLE>
                        </DIV>
                        <DIV id="prepReport">
                          <H3>Site Preparation Report</H3>
                          <HR />
                          <TABLE>
                            <THEAD>
                              <TR>
                                <TH colspan="2"></TH>
                                <TH>Comments</TH>
                              </TR>
                            </THEAD>
                            <TBODY>
                              <TR>
                                <TD>Location (Clearance, Floor):</TD>
                                <TD><INPUT name="location" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="location" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="locComment" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>Environment (Temp, Humidity, Ventilation):</TD>
                                <TD><INPUT name="environment" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="environment" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="envComment" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>Electricity:</TD>
                                <TD><INPUT name="electricity" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="electricity" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="eleComment" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>Pneumatics:</TD>
                                <TD><INPUT name="pneumatics" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="pneumatics" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="pnuComment" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>Network:</TD>
                                <TD><INPUT name="network" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="network" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="netComment" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>Modem Line:</TD>
                                <TD><INPUT name="modem" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="modem" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="modComment" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>Emergency Eyewash Station:</TD>
                                <TD><INPUT name="eyewash" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="eyewash" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="eyeComment" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>Ink & Solvent Storage:</TD>
                                <TD><INPUT name="storage" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="storage" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="stoComment" type="text" /></TD>
                              </TR>
                            </TBODY>
                          </TABLE>
                        </DIV>
                        <DIV id="transportation">
                          <H3>Transportation</H3>
                          <HR />
                          <TABLE>
                            <THEAD>
                              <TR>
                                <TH colspan="2"></TH>
                                <TH>Comments</TH>
                              </TR>
                            </THEAD>
                            <TBODY>
                              <TR>
                                <TD>Printer Package Condition:</TD>
                                <TD><INPUT name="packCond" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="packCond" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="pacComment" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>Printer General Condition:</TD>
                                <TD><INPUT name="genCond" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="genCond" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="genComment" type="text" /></TD>
                              </TR>
                            </TBODY>
                          </TABLE>
                        </DIV>
                        <DIV id="installation">
                          <H3>Installation</H3>
                          <HR />
                          <TABLE>
                            <THEAD>
                              <TR>
                                <TH colspan="2"></TH>
                                <TH>Comments</TH>
                                <TH>Repair Time</TH>
                              </TR>
                            </THEAD>
                            <TBODY>
                              <TR>
                                <TD>Ink System:</TD>
                                <TD><INPUT name="inkSys" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="inkSys" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="inkComment" type="text" /></TD>
                                <TD><INPUT name="inkTime" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>Motion System:</TD>
                                <TD><INPUT name="motion" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="motion" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="motComment" type="text" /></TD>
                                <TD><INPUT name="motTime" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>Mechanics & Pneumatic System:</TD>
                                <TD><INPUT name="mechSys" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="mechSys" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="mechComment" type="text" /></TD>
                                <TD><INPUT name="mechTime" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>Heating:</TD>
                                <TD><INPUT name="heating" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="heating" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="heatComment" type="text" /></TD>
                                <TD><INPUT name="heatTime" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>Computer & Software:</TD>
                                <TD><INPUT name="compSoft" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="compSoft" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="compComment" type="text" /></TD>
                                <TD><INPUT name="compTime" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>Electronics & Electricity:</TD>
                                <TD><INPUT name="elec" type="radio" value="1" /> OK &nbsp;&nbsp;&nbsp; <INPUT name="elec" type="radio" value="0" /> NOT OK</TD>
                                <TD><INPUT name="elecComment" type="text" /></TD>
                                <TD><INPUT name="elecTime" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>Pallets Types Installed:</TD>
                                <TD colspan="3" style="border: none;padding-left: 0px;"><INPUT name="palType" type="text" /></TD>
                              </TR>
                            </TBODY>
                          </TABLE>
                        </DIV>
                        <DIV id="problemSolution">
                          <H3>Detailed Problem & Solution Description</H3>
                          <HR />
                          <TEXTAREA name="probSolution" style="overflow-y: auto;"></TEXTAREA>
                        </DIV>
                        <DIV id="supply">
                          <H3>Supply to the Machine</H3>
                          <HR />
                          <TABLE>
                            <THEAD>
                              <TR>
                                <TH>Electrical Supply (ref neutral)</TH>
                                <TH>Voltage</TH>
                                <TH>Coments</TH>
                              </TR>
                            </THEAD>
                            <TBODY>
                              <TR>
                                <TD>Earth:</TD>
                                <TD><INPUT name="earthV" type="text" /></TD>
                                <TD><INPUT name="earthC" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>L1:</TD>
                                <TD><INPUT name="l1V" type="text" /></TD>
                                <TD><INPUT name="l1C" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>L2:</TD>
                                <TD><INPUT name="l2V" type="text" /></TD>
                                <TD><INPUT name="l2C" type="text" /></TD>
                              </TR>
                              <TR>
                                <TD>L3:</TD>
                                <TD><INPUT name="l3V" type="text" /></TD>
                                <TD><INPUT name="l3C" type="text" /></TD>
                              </TR>
                            </TBODY>
                          </TABLE>
                        </DIV>
                        <DIV id="DoA">
                          <H3>Parts Damaged On Arrival</H3>
                          <HR />
                          Were their parts damaged on arrival? &nbsp;
                          <DIV style="border: #E0E0E0 1px solid;display: inline-block;">
                            &nbsp;<INPUT name="doa" type="radio" value="1" /> Yes&nbsp;
                            &nbsp;<INPUT name="doa" type="radio" value="0" /> No&nbsp;
                          </DIV>
                          <BR />
                          <TABLE class="listing" style="border-spacing: 0px;">
                            <THEAD>
                              <TR>
                                <TH>Part Number</TH>
                                <TH>Description</TH>
                                <TH>Serial Number</TH>
                                <TH>Qty</TH>
                              </TR>
                            </THEAD>
                            <TBODY>
                              <TR>
                                <TD>This</TD>
                                <TD>part</TD>
                                <TD>is a</TD>
                                <TD>list</TD>
                              </TR>
                              <TR>
                                <TD>This</TD>
                                <TD>part</TD>
                                <TD>is a</TD>
                                <TD>list</TD>
                              </TR>
                              <TR>
                                <TD>This</TD>
                                <TD>part</TD>
                                <TD>is a</TD>
                                <TD>list</TD>
                              </TR>
                              <TR>
                                <TD>This</TD>
                                <TD>part</TD>
                                <TD>is a</TD>
                                <TD>list</TD>
                              </TR>
                              <TR>
                                <TD>This</TD>
                                <TD>part</TD>
                                <TD>is a</TD>
                                <TD>list</TD>
                              </TR>
                            </TBODY>
                          </TABLE>
                        </DIV>
                        <DIV id="missing">
                          <H3>Parts Missing</H3>
                          <HR />
                          Were their parts missing? &nbsp;
                          <DIV style="border: #E0E0E0 1px solid;display: inline-block;">
                            &nbsp;<INPUT name="doa" type="radio" value="1" /> Yes&nbsp;
                            &nbsp;<INPUT name="doa" type="radio" value="0" /> No&nbsp;
                          </DIV>
                          <BR />
                          <TABLE class="listing">
                            <THEAD>
                              <TR>
                                <TH>Part Number</TH>
                                <TH>Description</TH>
                                <TH>Serial Number</TH>
                                <TH>Qty</TH>
                              </TR>
                            </THEAD>
                            <TBODY>
                              <TR>
                                <TD>This</TD>
                                <TD>part</TD>
                                <TD>is a</TD>
                                <TD>list</TD>
                              </TR>
                            </TBODY>
                          </TABLE>
                        </DIV>
                        <DIV id="replacedConsumed">
                          <H3>Replaced / Consumed Parts & Materials</H3> Add Replaced / Consumed Part (Visible to all?)
                          <HR />
                          <TABLE class="listing">
                            <THEAD>
                              <TR>
                                <TH>Part Number</TH>
                                <TH>Description</TH>
                                <TH>Serial Number</TH>
                                <TH>Qty</TH>
                              </TR>
                            </THEAD>
                            <TBODY>
                              <TR>
                                <TD>This</TD>
                                <TD>part</TD>
                                <TD>is a</TD>
                                <TD>list</TD>
                              </TR>
                            </TBODY>
                          </TABLE>
                        </DIV>
    Last edited by Triple_Nothing; December 26th, 2013 at 09:31 PM.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  6. #4
  7. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,174
    Rep Power
    1469
    Ok, I see a few things here.

    First, I see you using #table a lot in your CSS, but I don't see any element with an id of "table". Are you sure that shouldn't just be "table" without the #?

    Second, you're using tables for layout. You should really be doing this with CSS.

    As for your borders, I don't see any glaring problems, but with the other possible CSS problems, I might just be missing it. Do you have this page live anywhere where I can see it? You're best best is to use Firebug or another tool to inspect the table element and see what border rules are being applied and where they are coming from.
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    667
    Rep Power
    6
    All links are at bottom. I am currently writing this viewing via IE9, and the business may be running IE8. Also CSS UNKNOWNs found via IE9 built-in Developer Tools.

    This is a module, and the CSS covers each view. The particular one we're looking at now is under the 'Detailed View Page' noting. I know I should really be getting away from tables, but since it's the way I started, tis kinda hard to move away from what one has always done. As far as "the other CSS problems", the only question was the #table, which is fine, but ya, I should've chosen a better name.

    The CSS rules w/ nth-child(2) in them, such as:
    Code:
    #prepReport tr td:nth-child(2) {
      border: #E0E0E0 1px solid;
      padding-left: 5px;
      vertical-align: bottom;
    }
    all appear as:
    Code:
    UNKNOWN {
      BORDER-BOTTOM: #e0e0e0 1px solid;
      BORDER-LEFT: #e0e0e0 1px solid;
      PADDING-LEFT: 5px;
      VERTICAL-ALIGN: bottom;
      BORDER-TOP: #e0e0e0 1px solid;
      BORDER-RIGHT: #e0e0e0 1px solid
    }
    As well as the last-child, but NOT first-child:
    Code:
    .listing tbody tr td:last-child {
        border-right: #000 1px solid;
    }
    all appear as:
    Code:
    .listing TBODY TR TD:unknown {
    	BORDER-RIGHT: #000 1px solid
    }
    One thing I did note is this is not drawing the lines when viewing the file directly, but does at least draw lines fine, other than cell spacing, when viewed thru the full site. As far as the CSS, all it really gets used for is text color/size, and alignment, really. The links below should offer access to most everything. This border is to land around the last 3 sections at the bottom. I set each one up differently. 1st border-spacing is in-line w/ the TABLE tag. Next referenced via ID. Last referenced via CLASS.

    Direct Page: http://kdna.jtgcomputers.com/modules/ifrs/profile.php
    Module CSS: http://kdna.jtgcomputers.com/modules/ifrs/ifrs.css
    Site/Theme CSS: http://kdna.jtgcomputers.com/includes/kdna.css
    jQuery CSS: http://kdna.jtgcomputers.com/include...custom.min.css

    The jQuery CSS is mostly for calendar items throughout the site.
    Last edited by Triple_Nothing; December 27th, 2013 at 09:51 AM.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  10. #6
  11. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,174
    Rep Power
    1469
    I'm at work at the moment so I can't take a closer look right now. I did want to say though, that nth-child support in IE is sketchy, especially in version earlier than IE9. Anytime you are using CSS3 in IE, you should use something like Selectivizr.
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  12. #7
  13. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,174
    Rep Power
    1469
    Ok, all of this CSS doesn't work:
    Code:
    .listing {
        border-spacing: 0px;
    }
    
    .listing tbody tr td:first-child {
        border-left: #000 1px solid;
    }
    
    .listing tbody tr td:last-child {
        border-right: #000 1px solid;
    }
    
    .listing tbody tr:first-child td {
        border-top: #000 1px solid;
    }
    
    .listing tbody tr:last-child td {
        border-bottom: #000 1px solid;
    }
    Your CSS is referencing a class called "listing", but the HTML in your page has a table with an id of "listing". Try this:
    Code:
    #listing {
        border-spacing: 0px;
    }
    
    #listing tbody tr td:first-child {
        border-left: #000 1px solid;
    }
    
    #listing tbody tr td:last-child {
        border-right: #000 1px solid;
    }
    
    #listing tbody tr:first-child td {
        border-top: #000 1px solid;
    }
    
    #listing tbody tr:last-child td {
        border-bottom: #000 1px solid;
    }
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  14. #8
  15. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,174
    Rep Power
    1469
    Also, when you have CSS like this:
    Code:
    #listing tbody tr td:first-child {
        border-left: #000 1px solid;
    }
    You don't to be so specific when creating a general rule. Since the TD is a child of the TABLE, you do not need to list the intermediate elements. This will work just fine.
    Code:
    #listing td:first-child {
        border-left: #000 1px solid;
    }
    It's easier on you and it will also help keep your file size down.
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    667
    Rep Power
    6
    Originally Posted by Nilpo
    Your CSS is referencing a class called "listing", but the HTML in your page has a table with an id of "listing".
    The period(.) is to define class. That is the intent. Of the last 3 tables on the page, they are each set diff. ID, CLASS, IN-LINE. So, 1 is set class to note the CSS.

    And the select[ivizr] sounds rather helpful. I'll be looking into that. Thank you.
    Last edited by Triple_Nothing; December 27th, 2013 at 08:48 PM.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  18. #10
  19. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,174
    Rep Power
    1469
    Originally Posted by Triple_Nothing
    The period(.) is to define class. That is the intent.
    Obviously I know what a period means. I'm trying to tell you that your CSS is using one convention (classes) and your HTML is using a different convention (IDs). This will never work unless they are the same. Choose classes or IDs, but the CSS and corresponding HTML elements must use the same thing. Yours do not.
    Originally Posted by Triple_Nothing
    Of the last 3 tables on the page, they are each set diff. ID, CLASS, IN-LINE. So, 1 is set class to note the CSS.
    I'm not understanding what you mean by that.
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    667
    Rep Power
    6
    The intent in the end is classes. The only reason each of the tables is defined differently at the moment is meerly for the troubleshooting. Once all is figure out, each table will only hold the class="listing" and not the id= or in-line.

    I gonna toss a copy of the listing items in CSS as IDs so all can be viewed at once.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  22. #12
  23. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,174
    Rep Power
    1469
    Originally Posted by Triple_Nothing
    The intent in the end is classes. The only reason each of the tables is defined differently at the moment is meerly for the troubleshooting. Once all is figure out, each table will only hold the class="listing" and not the id= or in-line.
    I'm following now.
    Originally Posted by Triple_Nothing
    I gonna toss a copy of the listing items in CSS as IDs so all can be viewed at once.
    Ok, but that's probably a waste of time. Why not code your HTML and CSS the way you like so we can fix the code you intend on using. If necessary, do another quick example that only contains the table as you wish it to appear (using whatever means you must.) Then I can help you get the working example into your real page.

    Basically, you're getting an overridden rule somewhere, but I can't find it because there are too many opposing rules. If you show me the page coded exactly as you want it to be, it should be easier to find.
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    667
    Rep Power
    6
    I broke it down clean to just the 3 items I'd be using it on. I still left each of the 3 defined differently, but do have the last one defined as desired.

    Page: http://projects.hellzoneinc.com/devshed/bordering.html
    CSS: http://projects.hellzoneinc.com/devshed/bordering.css
    Last edited by Triple_Nothing; December 28th, 2013 at 11:26 AM.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
  26. #14
  27. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,174
    Rep Power
    1469
    Ok, and what do you want it to look like? All three are rendering the same for me.
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    667
    Rep Power
    6
    Only the first one draws lines around the "This is a list" items. I try viewing it both IE9 and IE8 w/ no success on the 2nd and 3rd.

    EDIT: Firefox displays all 3 borders, as well as the built-in browser for the steam client.
    Last edited by Triple_Nothing; December 29th, 2013 at 10:17 AM.
    He who knows not and knows not he knows not: he is a fool - shun him. He who knows not and knows he knows not: he is simple - teach him. He who knows and knows not he knows: he is asleep - wake him. He who knows and knows he knows: he is wise - follow him
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo