Forum Discussion

IvanWeiss's avatar
IvanWeiss
Qrew Captain
5 years ago

HTML formatting issue on a code page

I am working on a code page to use as a widget on my dashboards for my users.  My intention is to nest the quick action buttons and a nice table showing all of my reports to allow the entire think to be collapsible for better use of the real estate.  My problem is I am getting the underlines for the hyperlinks to still show and I cannot seem to get rid of them.  Must be something with my css so hoping someone can help me here.  Below is the code and I also uploaded a screenshot:

<!DOCTYPE html>
<html>
<head>
<style>
.button-row {
border: none;
color: white;
padding: 8px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: #009ace;
}

.button-row:hover {
background-color: #3eb1c8;
color: white;
}

.button-row a {
color:white;
text-decoration: none;
}

.reports-table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 70%;
margin-left:15%;
margin-right:15%;
}

.reports-table td, .reports-table th {
border: 1px solid #ddd;
padding: 8px;
}

.reports-table tr:nth-child(even){background-color: #f2f2f2;}

.reports-table td:hover {background-color: #ddd;}

.reports-table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #e89923;
color: white;
}

.reports-table td {
font-size: 14px;
}

.reports-table a:link, .reports-table a:visited {
color: black;
text-decoration: none;
}


</style>

</head>
<body>

<center>
<button class="button-row"><a href="https://elitestudioe.quickbase.com/db/bpmnebm3f?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23" target="_blank">New Company</button>
<button class="button-row"><a href="https://elitestudioe.quickbase.com/db/bpmnei9mh?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23" target="_blank">New Contact</button>
<button class="button-row"><a href="https://elitestudioe.quickbase.com/db/bqmxz7abt?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23" target="_blank">New Note</button>
<button class="button-row"><a href="https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23" target="_blank">New Project</button>
<button class="button-row"><a href="https://elitestudioe.quickbase.com/db/bpmv2s5ny?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23" target="_blank">New Task</button>
<button class="button-row"><a href="https://elitestudioe.quickbase.com/db/bprnnztku?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23" target="_blank">New Marketing Request</button>
<button class="button-row"><a href="https://elitestudioe.quickbase.com/db/bp7q4pxw8?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23" target="_blank">New Policy & Procedure</button>
</center><br>
<table class="reports-table">
<tr>
<th>Financial Reports </th>
<th>Sales Reports </th>
<th>Scheduling </th>
<th>Tasks </th>
</tr>
<tr>
<td><a href="https://elitestudioe.quickbase.com/db/bpqcqx84k?a=q&qid=5" target="_blank">Active Contracts</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=q&qid=62" target="_blank">Ivan's Radar List</td>
<td><a href="https://elitestudioe.quickbase.com/db/bp64hriid?a=q&qid=5" target="_blank">Fabricators and Installers Schedule</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmv2s5ny?a=q&qid=12" target="_blank">My Task Calendar</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bptmsnx84?a=q&qid=8" target="_blank">Current Month Invoicing</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmncb6rr?a=q&qid=29" target="_blank">Opportunities Closing This Month</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=q&qid=49" target="_blank">Installation Calendar</td>
<td><a href="https://elitestudioe.quickbase.com/db/bpmv2s5ny?a=q&qid=23" target="_blank">My Two Week Look Ahead</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bptmzzumc?a=q&qid=10" target="_blank">Non-Billable Charges</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bptmsxsau?a=q&qid=8" target="_blank">Open Order Balance</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bqnvc9nai?a=q&qid=5" target="_blank">Open Proposals</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=q&qid=61" target="_blank">Project Value Alignment Report</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsbsnt?a=showpage&pageid=35" target="_blank">Sales Goals</td>
</tr><tr>
<td><a href="https://elitestudioe.quickbase.com/db/bpmjsbsnt?a=showpage&pageid=6" target="_blank">Sales Reports</td>
</tr>
</table>

</body>
</html>

------------------------------
Ivan Weiss
------------------------------
APIs and custom code
  • IvanWeiss's avatar
    IvanWeiss
    Qrew Captain
    5 years ago
    Nevermind I rewrote a bunch of the css and figured it out!  Had to do with the combo of button and links which was a mistake so now that I have the buttons right on the opening row much better!

    ------------------------------
    Ivan Weiss
    ------------------------------
    • JakeRattner1's avatar
      JakeRattner1
      Qrew Cadet
      5 years ago
      Can you post your solution?  Thanks!

      ------------------------------
      Jake R
      ------------------------------
      • IvanWeiss's avatar
        IvanWeiss
        Qrew Captain
        5 years ago
        Sure, here you go!  My users are thrilled with it.  I also posted the final screenshot as I added some formatting ot make it look a bit better


        <!DOCTYPE html>
        <html>
        <head>
        <style>
        .button-row {
        border: none;
        color: white;
        padding: 8px 24px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        transition-duration: 0.4s;
        cursor: pointer;
        background-color: #009ace;
        border-radius: 5px 5px 5px 5px;
        }

        .button-row:hover {
        background-color: #3eb1c8;
        color: white;
        }

        .reports-table {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 70%;
        margin-left:15%;
        margin-right:15%;
        border-radius: 10px 10px 0 0;
        overflow: hidden;
        box-shadow: 0 0 20px rgba(0,0,0,0.15);
        }

        .reports-table td, .reports-table th {
        border: 1px solid #ddd;
        padding: 8px;
        }

        .reports-table tr:nth-child(even){background-color: #f2f2f2;}

        .reports-table td:hover {background-color: #ddd;}

        .reports-table th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #e89923;
        color: white;
        }

        .reports-table td {
        font-size: 14px;
        }

        .reports-table a:link, .reports-table a:visited {
        color: black;
        text-decoration: none;
        }


        </style>

        </head>
        <body>

        <center>
        <button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bpmnebm3f?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Company</button>
        <button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bpmnei9mh?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Contact</button>
        <button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bqmxz7abt?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Note</button>
        <button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Project</button>
        <button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bpmv2s5ny?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Task</button>
        <button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bprnnztku?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Marketing Request</button>
        <button class="button-row" onclick="window.open('https://elitestudioe.quickbase.com/db/bp7q4pxw8?a=nwr&nexturl=%2Fdb%2Fbpmjsbsnt%3Fa%3Dshowpage%26pageid%3D23','_blank')">New Policy & Procedure</button>
        </center><br>
        <table class="reports-table">
        <thead><tr>
        <th>Financial Reports </th>
        <th>Sales Reports </th>
        <th>Scheduling </th>
        <th>Tasks </th>
        </tr></thead>
        <tbody><tr>
        <td><a href="https://elitestudioe.quickbase.com/db/bpqcqx84k?a=q&qid=5" target="_blank">Active Contracts</td>
        <td><a href="https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=q&qid=62" target="_blank">Ivan's Radar List</td>
        <td><a href="https://elitestudioe.quickbase.com/db/bp64hriid?a=q&qid=5" target="_blank">Fabricators and Installers Schedule</td>
        <td><a href="https://elitestudioe.quickbase.com/db/bpmv2s5ny?a=q&qid=12" target="_blank">My Task Calendar</td>
        </tr><tr>
        <td><a href="https://elitestudioe.quickbase.com/db/bptmsnx84?a=q&qid=8" target="_blank">Current Month Invoicing</td>
        <td><a href="https://elitestudioe.quickbase.com/db/bpmncb6rr?a=q&qid=29" target="_blank">Opportunities Closing This Month</td>
        <td><a href="https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=q&qid=49" target="_blank">Installation Calendar</td>
        <td><a href="https://elitestudioe.quickbase.com/db/bpmv2s5ny?a=q&qid=23" target="_blank">My Two Week Look Ahead</td>
        </tr><tr>
        <td><a href="https://elitestudioe.quickbase.com/db/bptmzzumc?a=q&qid=10" target="_blank">Non-Billable Charges</td>
        </tr><tr>
        <td><a href="https://elitestudioe.quickbase.com/db/bptmsxsau?a=q&qid=8" target="_blank">Open Order Balance</td>
        </tr><tr>
        <td><a href="https://elitestudioe.quickbase.com/db/bqnvc9nai?a=q&qid=5" target="_blank">Open Proposals</td>
        </tr><tr>
        <td><a href="https://elitestudioe.quickbase.com/db/bpmjsdpxg?a=q&qid=61" target="_blank">Project Value Alignment Report</td>
        </tr><tr>
        <td><a href="https://elitestudioe.quickbase.com/db/bpmjsbsnt?a=showpage&pageid=35" target="_blank">Sales Goals</td>
        </tr><tr>
        <td><a href="https://elitestudioe.quickbase.com/db/bpmjsbsnt?a=showpage&pageid=6" target="_blank">Sales Reports</td>
        </tr></tbody>
        </table>

        </body>
        </html>

        ------------------------------
        Ivan Weiss
        ------------------------------