I'm sending an activation email. The user must click a button to activate their account, but the link boundaries are extending beyond the button. How do I fix this problem without inserting the a tags inside the main element? Then, the text would be clickable, but not the parent div.
<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td align='center'>
<div style='border: 1px solid #CCC;width:538px;font-family:Helvetica; padding: 30px'>
<span style='font-size: 30px;text-align: center;color: #606060;font-weight: bold;'> Just one more step... </span>
<br> <br> <br>
<a href='#' style='text-decoration: none'> <div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;'> Activate Account </div> </a> </div>
</td>
</tr>
</table>
Use display:inline-block ...
<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td align='center'>
<div style='border: 1px solid #CCC;width:538px;font-family:Helvetica; padding: 30px'>
<span style='font-size: 30px;text-align: center;color: #606060;font-weight: bold;'> Just one more step... </span>
<br> <br> <br>
<a href='#' style='text-decoration: none'> <div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;display:inline-block;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;'> Activate Account </div> </a> </div>
</td>
</tr>
</table>
Set position:absolute of div that is inside of anchor and increase main div height.
<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td align='center'>
<div style='border: 1px solid #CCC;width:538px;font-family:Helvetica; padding: 30px;height:160px;position:relative;'>
<span style='font-size: 30px;text-align: center;color: #606060;font-weight: bold;'> Just one more step... </span>
<br> <br> <br>
<div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;position:absolute;left:170px;'> Activate Account </div>
</div>
</td>
</tr>
</table>
Setting display:inline-block of inner div inside anchor tag too will work.
<div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;display:inline-block;'> Activate Account </div>
Related
Please note that I have no access to the HTML itself so I can't make any changes that way.
What I'm trying to do is hide only .openBullet leaving .lowerAlpha, .numeral, and .bullet black.
The issue I'm running into is that the transparent coloration of the marker for .openBullet is cascading down if it has children that are another marker type.
<body>
<p style="font-size: 9px; text-align: right;"><span style="color: #10265f;">Submit manual improvement suggestions here.</span></p>
<div style="text-align: right;">
<table cellspacing="0" cellpadding="6" style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 100%; border-top: hidden; border-left: hidden; border-right:hidden; border-bottom: 6px solid #007db6;">
<p style="text-align: right;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMsAAAArCAYAAADWv3yxAAAACXBIWXMAAC4jAAAuIwF4pT92AAAFJWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgMTE2LjE2NDc2NiwgMjAyMS8wMi8xOS0yMzoxMDowNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMC0wOS0wOVQxNDoxNDo0MS0wNDowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDQtMTNUMTY6MTE6MjUtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDQtMTNUMTY6MTE6MjUtMDQ6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjViOGNlMDQtMDA4Zi00YTRjLTljMWMtNTc4MzRmNGZiODAyIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6MmM5YWVlYzUtMjQ2My1lMzQzLWI0NjAtZDI2Mzc2ODViZjM2IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NjViOGNlMDQtMDA4Zi00YTRjLTljMWMtNTc4MzRmNGZiODAyIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo2NWI4Y2UwNC0wMDhmLTRhNGMtOWMxYy01NzgzNGY0ZmI4MDIiIHN0RXZ0OndoZW49IjIwMjAtMDktMDlUMTQ6MTQ6NDEtMDQ6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4yIChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5j81SbAAAt5UlEQVR4nO19d5Bkx33e190vTZ7d2Zz3wt7t5YgMAkQkAYigRckiJbFEk7RsWbLl7LIll+WSpXKQTZdJybJkUZIVaEkWRYIUokghHIA74IDLAXe3OYfJ4cXu9h9v3uzM7uwuAEqyqnxfFQrk7Hv9Ov3S9/t1g5y8/wEEsGyLnDh2/DMH9o0ed13XBgCmKNS2bPtrv/PbX79y+fIFVVVrz0spoaoqUu3tkEKgHoRS+vSnPvUTO4aG+x3XFYwxrVwuT1mm+buE0mzwXMgwcPbsWXzrT74OIxypvc85R3t7e8vf+Xt/7+9Go9Gk67ocHxCGYegvf/e7Z7/9zW98TdW0tX4LCUoJWlIpiLp+CyHwxJNP/fiBQ4d2uK4rmrX5QSClRDgcVq9fvTq3vLz0VUVRCsHfdF3HlctXcPHiRei6XnvHdRwMDQ/3fO6LX/zbCmNhz/O4oigkm80W/9t/+S9fEtwz138jGk+AMQYpZe33SrmCJ77vyR+56557jtmWbX/QfmuaxhaXl1dKpdKvU0rzAEAAMFXF2TOnceHdd2EYBgCAC4FoNJb4gR/8wb87ODSUMk3TI4R8mClrgKZp9OqVK9cF579V6xuASDiMP/j938PKygoAgFIKKSUOHT2K9s4u9PX1JRbm5u5MJJOPDwwMnghHwr3JZDIqpYRpmlZ6dTUrhFjKZDI3s7nchdWVlXdVTZ2cmZgoTk5MuJRSJJLJ3QcOH3kqHoulmaIkrl25PKNYxXytc2alktQY/XHDMB4IJp5SikQigZG9owNXr1z5opSytmmDZxRVbdh01feiyUTy55iitClSIhaL4fq1ay9fu3btD7W6jasoChYXFqAZITDG6lcMTFGGFEX5RUVRGjbC+wGlFIQQRGKxXx/cuftrRsiozbaUAqVCHhIAZUrtHc49raOz618xxgY/6Peaobrp4HJ+ynLc31eErAkLBwGXEoqigClr4xacgTK6nzH6c1pViHRdh2lZE+FY9Evr51lKibaODmiq2igsphlva2v/O5qq3c+9D6ZnpJQIhUIoFwrnVpaWf48pLA8AqqJiemYKly5eRCQW83cuAHCOUCjU09be/ouUUlqvUL8XKIoC13V/36sTFkoplldX4bjuhj5blqXFYrEnQqHQP3r8iSc+oqkqOOcQQoBzfw7C4TDiO3YMQkrsHhl5nHMOz/MwNzd7Yey99/4BY+zVUChs7N6794nlhYX3IpHwnnKhMheJRvuUgcEh/2sEKJfKXZFotLV+0oUQIAQ4fPTII6ffeP3Ywvz82/WddFwXRjiM9QvCGGs3DMMIFlcCKFcq13PZbCbQSAAQaKDu7m4QSmu/c89DR3t7TzQarQ20fmK2AyEEtmVx0zQvdXR2QFGUYJgQQjRtg3PeaYSM0GZ/30xbbtkfQpBJp8/Pz87m6zcRpRSe56Gzuwu0btyO4yLV3t4dMkJwqxuCUoZcJvNOKpVy1n+LUoqe3j6s36DlUrkrFA4n11v896UEqs8USsXz6WymoKr+3FHG4Dgu4vE4WIOS4QiHIx26rlPP8/5C5o4QAiklFhbm3/Y8r9avSDSKU6+8gnwuV3tWCAFN06IDg4P/+t777//nkVAIpmnCNM1aW4H1kVLCcZyG70ajUbS0tHaHolE5MDiIZCq11zLNMcexS3tG9336wrlzzy8vLr6iLC8v1wYcj8e7YrFYx/oBOI6Djo7OvgOHDn1/Pp9/OxQyqvMpoekGIpEoXNdpeIcx1meEQmEpZW1jlIrF2WKp5Lp1WkFICV3X0dbR0eDKcc5JsrV1uKpdar+Hw2EwRcF2UFUVuVxOUkoWRkZ2B+sPQgDuceia7ktOHQQX+zo6Ozs0VYOQG70wIQQq5XJtoqWUUFQVoVCo6WYgIDAMHZzzBdtudIUkAIUxJBKJhnccx6XRaHSQMYa1VySKpdLN0X37Rf13GGVYXllCNpNp+D7nHPFEvDcajbaLurVUFAWhcHjbuSMAwpEI8tns3PzsrBl4AhISqqKgr68PjQqVo62t/UB7Rwcsy2raJvc8VCqVtfFLCU3XUa8460Gr47Edd9yr7i3KFExNTG74BqVUe+zjH/+Fp7//+/+BaVooFos1z0I3DFBC4LouXNeFYRg1D8ZxHPCqcF+/du2VYrH0VjQSRnp1Jd/Z2XU0y/nCxPj4mdXV5fcYY0IZGx8HAFimiSNHjnTG4vHUek3OOQchBEeOHfuB2ZmZr1Yq5k3/gxKEUAjOkUwmIcXaBFJGh1RFged5UBiD57rI5XJThXwedt0Ecc7R3tGBjo4OeHVCwYVQWpLJnYFGoJSCUoqLFy68nl5dnSCEMGwByhitlMur42NjF9YLFwF812edUpNSVl7+7nf+FyFEg2z8q5BChkOhyL4DBz+uqKomhYCqacjncpmzb505Zdt2nhLa8CFKfNy88d6r6Uymwc30XA89vb3o7x9oGLfHvVBbW/tgoFkpIRBSYnVl5WapVJL1QqEoCiYnJ1AoFBqsk2VZOHrsWGckEmkLLDulFOnV1alrV6++TCld84ObgFBCFKayyxcufndpcVEE8ycERyyeQEdXZ4O1l0IQIeTCi88/94euszG2FFLy1taW7j17Rx/22xFQVRWL8/NzY2O3TkkpOUGjtiGEEM49Pjszc1FwfwyKqmB+dhZmpeJbnuqz+w4cePpjTz71U2bFhG3btbkIhUKYnpqanZub+zaA6109vfb4zfdaVU0f6ujoONjb13eipbVV4Z6H+fn5M5l02rYqZUghJg0j5PT09R/LpNO/3dbWMRwOR+5RRNXEcc+Dpml9mqYpvPpbsFEBwDRNDA/v3NXe0fnUpQsXvhRoKNfzoOkaRkf3wnHWFl1C7qCEUCklqKKgXCqVVpeXFwvZDFR9TVhc10Vnezt6e3trZrM6oZphGCP1sZOUEs8/++zPuI5zVjd0gq3dH8I9zi3brmzQ+lLCsTdqQCnlmXw+d04KQVAvSgQQXEjP4zv37B19SNM0jQPQNQ0L8/NvvXHq1E9KITK0fsfCFxYhJdLZTNlxvYZvWZaFnr4+dHV1NWhKz/NCkUhkRzBuQihcx8Hy8vJ4MZ8HZY06QlUUpFpbUb/XLNNEW1tbn67rSrCpGaXi6rVr3zh75vS/ZIrCtpo7QgihlJHFhYWSaVYa/uY4DmyzgnqLJaWUqqo+W8jl/ox73gaTbNmWSLS0fuzAocMPB4pB03WMjY8/89abb/wrQpm33i4TQojreSKfL5Tl2m9wHCf4JgBAN4yWhx5+5J+rikLz5bK/T+DHee+8/fbXuRA/d+3q1evhSMSNJZK4euUKKFO0HTt3dl27fn24va3t6Vg0enR+bva1gf4BlEsFWJYli/n8M6qqndizZ89wJpt1Z6en/1AZHBoCANiWha7u7kFKKZyqJXEcx2aKolJCKOccjFEcPnLks+NjY39UKZdnKaWQQqBcrmBiahqBkEkpsWdkZCjYpARAPp9fGN65c3V4586ay8AoRTaXw8T4OF4/dapGElQDY+XJp54a9qqLrSgK0plMuljITyfiiXIoFNro70pZ2zSEEHiuB686lvXPSbExCJVSOoZhbIgLhBBIJFtAKevRDUMVVUsnpUQ2m53lQsxGwuEN36FV66AUVXhc1P4upUQ8Hkcuk8Frr7xS23hSCEQiEeOJp54a4oFFYBSlUrlIgFnKWIMFkVJC10NgjTIKAoJYNDpIKYXruiCEgAvhVSqVKwNDw+by0qJv5ermq+F9QsAoq8V5wTellGCMbSB0qqyoFQqFrFp8Ufe3cCyOtra2XkVR4Ni2bxWEQCaTuRZvSeU8ZyNZRwiB4nkolSu1WENVVUTCYQjBa+sSTyT3D+/ceaIcCIqUMMJhXL148fTs7OxP9g8OLuq6DlVVQSmFruugTHFUVZ2emZ2dtkzzzc6OjqTruJlIJAqzUvK/T2kxl8u9DIJEuVyySqWSpeh61R+VIm4Yei+rflDXdZw/d+5FVVXV4ydOfKxSqaBcLmPP6OjRtra2B8dzud9VVBVSCHiui2KxCFHd2IJzpNrbB4IFVxQF+Vx2cXFhYSkcCdcCSEIpzIoJIQRydQGblBJGKNQSiUZ7gjYppchlMtMPPfqYQynFlUsXG9mzKrgQG2js7wV+EN6NltYUQHCQUqoIIYCqH+xxPq8ZITBVg+c6NV97M0gpoTCGaCQKx3EarIqvkFhLNBrtEnVKIpfLzgHIq6raIJAB2+a7SWsCzqWIGka4J6CTCSHwPM9bWlgYo4xB03Rw7kHRNKy3MFwICM5BSaMAfhhQStHR2Q0QoqdaW0dJtc9BDFssFKbL5TIYpWCUbEoCAL7CjcViaK2j+4UQiMZiB1VVrc0jIQQUwNitW7+VzeUW672V9e0rigJVVR3G2DIhpBmjKwHkAoJA6e7qBgBYltUai8Z66we6srL8zuT4xOmjx459jFLqLyaluPPuu784MT72batSzoEQSEjQDKv5sZzzsKoo3UEHpZQolytLmWw2XU/5E0LAuefnGdZtAkPX+8LhcCIYAKMUuVxuPJPJlAmAkb2jGNm7t8EahcNhvHH6NOanp0BBIKXrC04Ty7IdApNv2TamJqcwdmsMD370ozsZY4oQIshryNmpqalb165CM0IAgOHhoaZCXN+uEQpB1/UNlpFzjnAk0huJREK8XknkshN7943alLK6diSkbO6J2paVam1t7Q7aIITANE3HNM1JKSUE5zh+xx3YuWtXza3x10JgbHwM4zeug0hSI1bqN5Hruhs21frxCSHgOA527h5BJBKBEEJLtaV2BhaUMgrLsrzV5eXplZUVMEqhaTra2lrXh5EAAM910d3bi7vuux/1PImUghia3sLXWzMAiqoyVVXhOA7Gx8Zw9PgJWOvYsQ8KhVQtSSQWa4knEr2BGeWcw3W9Bce2Tl+5fPnMkaNH7ywWizBNE/v273+gvb397pnp6ecIISAAEskkFObnQzjnHbFYrNWnnQkE5zBNc86xLYfRdUIRCmPn7t2NAaOUMAxjWKkSBIHAFUulqcWlxfLg0HCDoDTOlESsNQUiAZFeRSgS2SAsUgg42cwG/z8AIQSVigmr6jIAAq7rIp5I7AieoZSiXC4XmKIs9vQPIGCMEokEisViUy0ZuDF79uzdQIcD/qZMJpMDgeYFfOubzWRvLi0t2UpdfwM2bf2i+9+gKV3XeoP/TyiFaZrLmXR6XjcM3Hvffdg9MrKBVeKCo6U1hXsffAQzkxPI5rJwHAeErLlhRsiAY9koFQtQ1tHVvsBxZAsFWKaFldOnIXzXUvtbn//8jmDMClOwWlhdTCSTaUVVQAiFpmnQVAXFYnGDsqGMIZ/N4q3XT61PIstEIjF71513wK0LAaQQGN6584sXzp//VjgcngEAwT2cP/cuuJDo6epCNpsFpXRLxbYeymuvvALXcbBj167UXXff3RFscI9z5LKZ2fTqav6N11795UOHD9/JFAXc82AYIdz34EN//3d+66svUUK8bDYL1dCxY+cIXM8F9Xi/qqoaUM0ncI7VlZXJpYVFhCOR2moLKdDV1Y2WZKKRHJASBBhRVBWu64IxBi4EpicnLzNK3QMHDmyZL5BCgFCKZEfHxk1bFV7BPZTy+Q00tBACtuOgVCo15H1c1wlHwpG+tWYI8vn8crKlZeHe/v6a/+/aNsbHx+A6zgYhJZRieHgY4XCogTn0/wh4HmeKqu5UVLXG6nDOUS6Xx8qlklvfV8YYlpeXkV3Hstm2jd0jI22tqVRXLbgnBKsrKzfaOjqsgcFB7N23zx/fJgJtmhV09faif3gYviqshdhQVBVT42M4c+o1WJa5QVhdzwMjFLFYzJ9PzhGNxVKxaLSX17mWqyvLk7v3jJhBfohRikwmg8qtmxBcNIyJEKBUzKOQz21Yq1ws9vry8lK6vb0jVamyZJZlYd++fUfNSuW/33jvvb/vOM4EIQSMMQgh0NPdg2f/9NvQDAOSc/T29vqxmKJsaXGURDIJ23aQbGnp1zVNFUKAUgrHtrnjenMSBDdv3nzxxo0b5/aOjh4t5PMwzQoOHDzwWGdn58mlhcU3ASAcjqCzswO2bYNzPqxpmhZo0nKlUg6Fw3PHT5yoaSN/UCaWFhcxPze/TtNKHDx8eHcQe/iavoK2tjZrZHS0nVKqNgskhRBUSmlJKdNSStlMewftdQ8NY2FyAvlMpiYUUkrooRBU3UAskWigll3X6Y/Gosl6KrZcLq9MTU0thEKhhrZDkQikBCRf66OUEiql0DUNQW6rERKEUHVgcHBXbdxVC5PNZifSq6uyXpNXk65QGGvY9ASAoes9uq5rgeKTUsLzvOUnP/GJrnAoRAuFQu33uvYIAK7rehqAC6AWg9bD8zyM7NuHuekpXLpwvuZOUspAKEU0GkMsFq89L4RAJBodCEciIVFHtlQq5tjqykolIBGk9Knh3r4BLC8uNubtJCD4RneaEoJSsTjx4nPP/eKPfeGL/1mtKtdAYI6fOPFkyDBaS6Xiz5XL5ReDb3POoagqFmZnsLq4ANexkUmvQlFUVMqlTT0OJR6Pw3EckojHB1VVRaVSgaqqKJVKq+VSaTEcjWJxbnbp9BtvfHVkZOTLiqJUM7Zh9pEHHvyH//v3fvdNAAiFwujp6YVlmahUzEFCiBoseKlYTLuOM98/OFgX3BNUyhXcvHEDFy+cX58fpPfcd9/OYHKFECAAPvLgg/9aSPlTUogNo5F+dpeGDeMFz7Z/nlLqrH+mHoQxDO7YiUKyZY3tAZBItvjxyDrv2XXdYV3TDAA1jt80K+lisbDS6DP7FkZKCYY1JklICeF5uHj+fNP+VEkV5YEHP7ojEEiFMZRKJTO9ujKbzqShKGvCIgRHS0srWlpaGlwT27bRmkoNqqpao+I9zrFj587HAOxjjJGWZHLD9xljdDWdnjv3zjs/rmnqylZzRymD63kYGt4BSv24KSAO1lt8KQQ0Vd1ZH4SDEKRXVyfmZ+dMVatz5aRvMW3HBiVrAb+UsiYE9SAAuBDi7TNnfrW7p3f/x5544vPlSsW36vDp+f2HDt3d3df7u7feu/H7Z95665cE57NBO5qmoVIu48K5czXlQSmFqqoIR6Mbxq20trbCdd1QPJGoJcKqwe1coVQqm+UyAOD61avPjo2N/e1du3YdKpVKsG0bh48effy7L710aHl56eL83Cy++52XYFYqeOChhwYYY4rneYCv1TKlcmXW42uLGgTQiWTLBuoThLTGY/F+Xhe8E0phqOpoQCOudyAk/CSU8LxXXMfh2wVwVSYFO06eRP1mF5xvCDIJANu2dymqGgrmR3COXC4/UyqWuGhSeyUBUEpg6AaklOjo6Kj972bwM9paNB6P9dWCe8ZQLpfnhJR5RdNQH7N4HhCJRtGaSjVYZcdxQolEor/eckgpEYvH+6QQfc3mDvArHpaXl6MTt27ma3V0m8B1XOweGcHIyAi8hrkTG6oipBBE1bSRoD+smqDOZLNTq+m0qK8TDEAIAVUUGNoa+0dIc7asSoFXXnju2X9o207x8Y9/7KeZYcC2bUgpUSmXEY8n2o8eP/7T7Z2dj75z9uyvWrb1ywAEgFqyux6e5yG7uoq2zq6G35VILAbPdWOhUGgomFjGGFaWlybvOHmCl8tlvPKd7yCXzUycfevMHw4NDR8KrEs0Gk3cdc89P/HMN/7kJ8xKBYsLC6iUy9A1vS8oN6CUIp/LZcbGbi5E6kstpM+KpNrbm01WnxEKJda5CY3cfpMJ9lwPtm1fchyL1zNHzUAIxfLSEsZu3tyWGXFsB3fcfeewqmmG4NyPJfzyjcn6TPJ6cC5Qc4U4h/A8yCZlNEA1MFVYTygUTtUYQMawsrw8MdA/UBoKavgAgFQpaEXdGDO4bjwciQzVKz6g0aVqNncSQCadfi+XzTiGubWwCClx88Z7mJme2pamJ4Swhx59bHeNCaMUtm1Lz3WmIZvT/JIAwvZQdp0tmbdgfMyPNYovPvfsv1heXjr31Cc+8R9aW1s7Hcd/36nGf/39/ft6enr+08T4xGOc85+WUo5v0mfYto1CNtMwV8rlixcRi8UiR48dGwzKWqSUcDmfDEUiXl2mVl65dOlP7rrn3h8dGBjYa5p+fuTQkSNPnjl9elcskbgVb0nAMi0j2dLSXc+FF0ulOcdxHUVpDOJ1XUdHWxtEncUBAaSQOw3DYKIuZgEhAoALKZuS8ZRSOI6NpaWlmXQmvdFaNZ3ttVKerWCaJqKx+CCjBMLzF6hULpcMXZ976OGHt3yXMQVzczMoFUtbCqWUErphDOm6TmoMoBComOakkLJUH/AGldoz01O1xCHga8RUW1v0nnvvHazX+NV8gbtdEWWpVJoL+rIdHNuB3KTgtB6UUrW1tXVHYL0VRUEum13hnGeMUKjBWjYD1/16vGZQVQ2e5+8pxhg457btOL/9rWeeeWvXrp3/5sTJk59UNU33XLdWfUwp1XeP7H7qRz772f7f/upv/EilXL7SjBGrxqR49pvfBFMURKJRKD41SJKxaLS7PnidHp+cXE2veFJIRGNxOI6N1ZWVqxfPn3+2r79/D6WUVOu6eo8dP/G577z0ws92271gmtqpqmosMJtCCJRLpSnheeBuo7AIxnwzWr9ZpUQkEdtNCWECvqCoqoq3Tp/+5vWrV7+tairDBmPvn58RQnjvXbt63t6kmK8eumFgZO9oUwp3PTRN06PRaJ+Er4EJIXAdJ5fP5aa1urMozUAIEA5FYOihptnyAFJKMEp3+RbRBeDP3+LC4vStmzcr9WdeCKGwLF9ZBZsFAFzXAwFJhMLhnsCFVVUV09PT751+/fUvC8H9hjf0kRAAcm5u7q31RZJNngUI3XIs9aCUtkUikZ618h2CfKEws2tkJDe6f/+mVhnwA3jHdfHHX/taQ+kV4CvhO+++B2ffOgPX82BU22Y+nX7tG3/8x59eWFj47MmTd/zLwaGhUdd14Xmez3baNoaGhw//0Gd++Ku//iu/8rgneG6z0XAhIBwHuUwGCuceKKO94UjE8DyvqqEdOJ4343pCqqqKjq4uzExNQlFVvHv27G+dvOuuH2xra+t3bBuaptHRfaNPv/ryd78ci8eXOru7+8KhUDhwP2zHMUul0nR3d3cDLy+EwMTYGObn5xs657kufvCHfmgXZYzCz2jDMi1JCP0DXdf/QEjRVEMHjNZ2VqL2Hc+DputYz6o1fZbznlAolKj3nyumWRgfH5sKb1PFK6VAa2sbDMPYSBc3PCfR09O/m5AqM6T4gW7FLE+uK1iuucqJZLIhKem6LhLJZF8kHA4HbpemaZicnDhFGfsVQppbjfpxbWcpOOegDFCYio0O3UYwRgfC4Uis3rXMptPTYzdv5YxtFA0IQS6b3XRNpZQIx+MIaRpKpRI8b40EoIzBddzf+Z//41dffeTxx//t3ffc+8O6Yai2ZflJ2koFe0dHT9734IP/7M9efOFnmsVOQKNmUVLt7aS1NTWsKgocx4GqKLBtm+dymblcNh0cwKnV1iwtLly6dOHCCw898sgXqsVuGBga3LP/0KEfLhVLX0omEgOUsUgw8Y5tF6WUEyOjow0LwTnH6urqhs65rou29vbh+sktl8tFVdfzPf39mJ+dafDFPwwYYzh89BiGd+zY1rIQAKVyedAwjISse7ZSKWcty17cyrUixFc8M1Pn4FZdq80gpcTf+sIXhut9e9MyHcd2Zte/F1QrJJJJcLHWJ8/zSGsqNaioKgLrKoRApVIZ41IQKYRUqrmGzfoQMELNSgOCsvq2jg5omva+3DVG6S5NVWhQo8eFgO3Ys67rFinb2lUmhODalcubJg795HUIx44dw82bN6Bquk+nV5ks//yNM/WnzzzzuUQ8ObtndO8/VVVVDxSk53nk6PHjnzr37jv/wTCMQtOP1EFpa2tXW1padtQkklJYlpWWIKtUUUEYA63TiOFIBG+ceu0rx04c//5YNNbqui6isZh68PCRp//shed/tXroKyyEAGUMpmmWF+bmJvUmWiQa20jPea4Xjsfj/fUTZjvW0vzc7FI0GkUkGkWpWGxaRFkVzqpgb+4Lq5qKWDyO2ZlpNPFKGsC5h47OzkEjFErWb7FyqTzjOrbrbLXgVdIhHI1sK9xSylA8kRioVxL5XGE+kUxm946O1qxptc4LgnvQ11G1Hve0aDg8rDAGs5ov435CeCybzUpFURA2DDQrQg2EJBaPo1gqNa1xcz0PqbZ27BvdXyuT2Q6O4+ypdgSU+sc5stn89OrqKt/sLAtQJQIsC9udkvVLqcpo7+jAkaPHMDU5CVkllmjVTBMCvPji8z+fy2d3PPTwI5/hnAd5OcRjsZae3t79uq6/ud1YlL7eXj0cidTYCkVVkUmn5wb6+swgs5nPZnDxXBqsGmOkV1YuXL548YX77v/IZ1zXheM4GB0dveu1P//uR4qlYlJVVea6LuDz43nC2CxZrx2kRDSyUVhczx0IRyINTFi5XFlaTacXStVATzeMZo43pASOHj+OsZu3mtKYtUcpxfVrV7ebGwB+cN/Z0dkXMoxQUG0shJDZbHaqUMjXOP1mEFIgGosjEolu6YIBgJSyKxwOd8q6uDGfz81AiHQymaw5PFJK6JqGUDi8gRjxPE+Px+I769uwLEuAkCnKGLiUsF0XqXV0MwgBJNDf3w/X81CsVLBhvQColKJULuP8+XPVMyXb0/P33nvv7npF7LquXFyYn16YnanV060HQbUkybEbCIzNECQhU6kUCoUCsvk8KKUolkrYPTqK61evYXpiwu7t63vJtu3PMMZqZVRcSloplyPvJ3ZVxsfG1Hvuu6+WCJNSwnac6VR7u6koil8GwBiYoiC49EFRVZx67bX/evTY8adVVQ07to1oNKqfvPuuLxLC9IBhIoQgm07Pzk5PW0aocWIYpdg1MrKhQ57n7dQ0Ta8PCEul0sry0tKyrmno7OqEqm7m6xJ0d/dg/NZYlaLdRFqEAGXv71w/IQThSGSQMQbukyGoXuYx8dGHHgGhm1sMSimKxVLtsNI2GAqFw7Wse5Vyn5mYnEiH6jaVhO+CEtCGGFsIAcMw9IcefXSHV2edctnc6tLi4mI2k0EkGsXBAwdACIHSpKxf13WkM+nqh5rHNrZtYWVleVt2DwA8z6OPPPboEKSf4mWUIpfNZnbvGVkZ3jHcUE5UN0CEwiH82fPPY2lxcbs5a+ib53mNOSfXRXt7O5RqtXY4HO5WVLV22K6ac3ITyWSmmeezHoppmS2tra21AkrGGBYXF6enJies+nPd3b29SK+u1pI4lXL5rcuXLz139933fKpSqcA0TRw8dOQTgnNRT8fmCvkp13UbJ1ZKUMbQ1dWY9JH+AHYoimLINS2OXDY7vbQwLw4cOFg9z7A59/5+AnYhBOxyGS1tbdvmCSTnWjQW66PVcvcqAVJZWVkZ2y5ArRaEIhqNbiuYUsrdCmMsEBbOOYrF4mypVDLFOivgFwtuPHMjpYzHotH+4HnGGPKF/IRZMUsHDhyApmlbBvFbzWs9DE0DCYebb/Y6eK6XSiQSPUKI2poXisWFTCa7HAqHgCbJXE3T8M7bbyOTTm+4V2D9o5TShyilb0sh0psRF45tIxqL4cTJEwdGR0c/TQmtCRSlFKVSKb+8vHLrfQkL93ifpuuxIGjmnMO2rFnLtGzOeS15yCiDWrU0gF+K8carr/23I0ePfZJVF1lVFA11PqbnuS6jdOLpT36yQckTQvD8c8/juWefbdC4lmXhyaeeGlZVtWadLMuCoetzJ0+eDGm6TuvP42+E76MKIWwhhLcZvSmEgKKqGNmzp1atuklrqJhmZzKZTNVvWMdxLNtxJrcTACEl4v6ZiU2TkYCvxMPh8C5GKQtq8zzPQz6Xmyjk1rl6koApDPq6AFsIASF4byQSSdTHPUuLi7f27t3DVFWNEGyuTIhfMkmklC6h1N7KEiqahlSqza+Y2GJcnPPBUMioMaMAYJrmUiadXgqVNzl7ryiABLq6e7YM7CmlJz7+5JNfKxSLKxfOn/9Ng3vPcM5nOOcVzrkXUMVSSs0wjD2HDh/58u7dIweDk58BzTx28+Ybs1OTBcK2d/eUlpaWIUPXG6pcV5eXZxfn51FPpxFCoKhKA1voOPaZc++88+z9DzzwfcVCI5nguyuePTc3f2v9oAkh/qEl2sjXV0vUhygh4NVJAYFIJpOfclzngMKUrVPLABTGSCwe/6+u47yx2YILKREKh+G4LgTfXFj8g1q0xzD0jhq96muj3NjNm3NbaaNAg5uVMuxaqX9zOLaNH/v8F3YGQQD1a8LKnPP59o5OaHX1U5wLgPpHAeqton+aMzmkaVq1rN5XNAODgychxVc4F5Js0Ymq66dYrvOytbDw5a1iBc910ZZKIZFMbMkm2ra9U9U0rWbNCEGxWFxKr65mwqHm8QpTFGTSaZSKhU0LGs1KBU89/ckfjcZiiVg8nuzt6/vFfC73b+bm5k6lUqk3NV2/2d8/kG1vb4/29fbe9fjHP/7pVGtrR0DBS+mfuiwUCtk3T53672iorN4cSndv70jQAPXPPXCm6fOxltaGCmHuunBtC6j66BSA67r2u++885WTd975BFMUtr5K1XEcJ5vJjNXfixWgc50LBgC2aamtqVRf1R2r+pSE7j948M6jmnan2EaTkyr7Mb+49BuWbW26QatJRYyPj295stFxXAzvGO6KxRMdtYNUAErF4qzneeaW5dzV4wxSCoQjkS3dMEqpEo1F187KEIJiobCUSLYs3NXb27COQgq/IFFucMOoqmm76pN3nuehp6dnZHh4x0g1ht+qD1A1Dd/65jczp15+GdhsbNW2U6kUEokENrP0Ugi0dXSMMKZowd6qupYz5UplU7qDEAIBCaXqMm78vEQkFusZ3bfvESklsW0bBEA0GtX3HzjwMAEedl0Xjzz6KAj8pKzneTBNs6bA/KPFDM//6Z/+0sLC/FlCCPA+XFAlHArV2AqmKCil0+mWlpasYRi1OINSikI+j+XFhQZ2QveTeq9fPH/+z++6555H8rncWlKIEpiVSqFUKc0oG0wcgaHr1bMSa/C416OpWnJ9J+vvgNoKjFKYluUsLi1MBcmnzSClhOe4WyaibdOCoWndhq6H6wgQWalUJvfs2bOpm0AZQ7FQwNjNG2hNpdDS2rrpQSNCCErF4o7W1tauYJNTSmFWKkuzs9MzoXUaWEoJz91oDQnADh46NFJTMtWBBWzldqieGeKu47w3snevf+S42dgoRblYxOT4OCbGxjYl3i3Lwg/8zU8PK9WCWkIIuOeJ1aWl6fTSIor6RidBSglNU2FEotDDoabSbTsODh089Dd7+/p2BzFYcM3R2j1rfl2iqFYr148xEo0im82633nxhV96841T/37biamDkmpru7vuBhDkc7lC2NDLLcm1MwmapuFGqYClhQXoRqPr4Xle+c3XX/+1w0ePPhJIccDmFAqFQiFXKKw36VJK7D550rdcdRrScZz9kUh4cH3S8f0mIJl/slLqup4l2PpMNyChbXNzIqUUsUT8cHA8FQCEEKRYKk3t3rNn0/c0TcPs9DSuXLwAxhT09vZhZWUFKyvLGyyC57kYGt5xVywWi9dfSJjNZmfn5+aXa4flsFbgtzA3t0Hzq6qi3Xv//fcEVcUfdP6qBY4sFDKy9z3wwKaWUNM03LpxE55/sd2m7dmWTVNtbSeBtYqDYrFIEy2ty/c+8GBTxaEwFXPzs1hcWoBKmq8N9evyXjtz5sy/b21tvbulpeVEKpWKBALicd4wfiH9Ow+qCUqcffvt1y3L+vKbb7zxB4wp8Mj2hFCtf4lE4iuWZUWEENKyLFUCN8DYIq+bK9v10Ns/gLnZWUxNTGxoZHpq8qUb16//47379rXV3XPLVtLpK+VCUa53w6SUCBnGhnPomqbOSuDfua6rcc7fHzVT1yallC0vLy+HwpGsZoQ3TzcSAs9xkFlZ3JL+tC2TEMiXhJQ5Z009y+mJiW9t5eJxzjEzM127BcUIhWBZFmZnZvw7yxruD3Nx7/0feUTX9LDjOLXgfnll5XJlnbvCOUcsHseTT39yQ6BOKRXRWOwrlmXFuOeJ91u7FUBwTm3HMW3OX+PF0qbPaZqLUrkMs1wGdzYnWyzTZIzRX3ddt8PzPE4ZY7lsNpfLZN6KxqJNrQalFG2pFErFQt2R7o3PpNPpd27cuPFOV1dXT6VS6X/zzTcPDwwMHDQMY28sFhsM6XpKCKGBEO56XrlULE6mM5l3r1+58ufLS4tv3ffAg7PRSBQ5N/uB5khRFOWXqtZAep5HCaVcMwy5/rx3IplES1tbU2ERnOcqlcqXpJSKEEJUCyiJ43qcso3nBaSU4J4HjzUWx3mue1kIcaWaXd0+4lrXppSSuI4jBBdSyvXHt9YQbGizUtlSWMxKRXqO8w0AzwTjklKSSrnMmy1k9TASZmdnENTZAWuU7PETJ5FOr2JqfLyaCJRItrTsHtmz9w4Jf55Vvyp3tZDLnTl86FDDhhFSIhyOoLu3D9xr3KiEEEtRlP9cZYBkszzJViAA8TiH63K+SWG3/xzjsG0LZrkErm1OcJjlsieE+OVgLaWUxPM8mc/nhNPk6qMAqqoGdztvahEZY/6ZfU2bl1LOT09PnwmHQkY4HI5EIhHj6//nj4zJyUlN0zT+oz/2OSuTyZjzc3PF8bExS9e195XobAZFSllbeOKXwdeC63pwzpseM62+F2wMb/3vHxDf8x1GH+SbQeJ0y7b8OWnoV2Dy1z8rBMf8/ByC21/Wa/9IJIJi0b89UlTn+MjRYz/c1dU1Un8Ty9LS0vilCxfeiEYjDe9XGS/0Dg3561O3RoQQGazl+0m2Nh0vfBneagoDF4eQjXPQ8Jx/LKBhwwT7ZLtk5gfpf1CVzhizGGMWUxQUCgXkstnamfrgfL2maR/qVpcAH07EbqMBgesUWJTNNhHnHIZh4OjJOzA9OYFYLH7y3vvv/1HGGAkSt0JIXLty5fliIV8sFvIb2lhaXIRpWfj4Jz4Js1Jp8pXbCATig9zc8r7a/Qtt7f9DBIIyNze7paDUo/pc94Mf/egv9Pb37wrOpjNFwcry0vjZs2//5l92v2/jg+O2sHwPYIzBdV3Mzs7WEoHboXpdz+Gnvu8Tv3nyrrsebfjPIjCGl1544SuFXG6y6vA0+Qd1/76Nv0rcdsM+JKoVvVhcXIDj2NveQmlZFmzb7tt/4ODf2LV790/uHhnZUymX/Sy89P+7I6+9+uq3L1+6+Mt/hcO4jQ+A28LyIeELiw3TNDct+KtWwoZLpeLRE3ecfLy/f+Bjg4ODJxVFqZ3JIYQgFo/jwoULb1+6cP6nDMNwyqXNqdvb+H+H28LyIUApRaVSQTbrV8Zu5n45to2DBw/+7MOPPfa5UCjUTRkDr5ZeBO1EIhFcvHTp9NWrVz+vqtrUX+U4buOD4bawfEh4ngfHcbbk7CljyOazt3RdTymK0nDTe3BW6NWXX/76zNzcPzEMY/J7OSp9G3/5uC0sHwL+nV3+9Thb8fZGKIRrl6/83tUrVz57+OjRB4EgRwMvl8stfOfFF//jzPT0b+wYGTFvC8pff9wWlr9EVM9M2GO3bv7Jvv379qmqqhWLxfyFc+8+u7K88muMsUtCiKbVALfx1w/kw2Z7b+M2/n/D7TzLbdzG+8RtYbmN23if+L9RwEet5Dr0+wAAAABJRU5ErkJggg=="
alt=""></p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="topic" data-documentRefId="Introduction" data-type="chapter" data-noNamespaceSchemaLocation="urn:fontoxml:cpa.xsd:1.0">
<h2 data-id="id-f5cc2363-db3b-43a6-b9f9-4ff438e7faa2">1 Introduction</h2>
<ol class="decimal" data-type="decimal" data-id="id-16c75eaf-f903-4ce9-d4ef-f6e2c8213c53">
<li data-id="id-9dcba4f8-dae3-4751-ef37-deb3b1287c11">
<p data-id="id-7baae131-d2fe-4e32-b3ed-824e7ee355e6">Step one goes here</p>
<ul class="openBullet" data-type="openBullet" data-id="id-f5a5de88-dada-4089-d60e-1953caf701a4">
<li data-id="id-d5e2366c-da46-4ee3-b044-7f2121d8e1fe">
<p data-id="id-59bc91da-bc49-4fbc-ba22-bdb631d369fc">Open bullet</p>
<ol class="lowerAlpha" data-type="lowerAlpha" data-id="id-b422622b-65a4-4fda-892c-ce370d851d0e">
<li data-id="id-b609503f-a39e-4674-9ca3-15bf05ec392d">
<p data-id="id-f051002a-9332-4254-8c0a-5be3614e8bc5">loweralpha</p>
</li>
<li data-id="id-1f0824e6-110b-4e7b-9979-35b3118d6b1b">
<p data-id="id-e95c7baa-4507-43be-bfa5-acd541419bbc">loweralpha</p>
</li>
</ol>
</li>
</ul>
</li>
</ol>
</div>
<p><br></p>
<table cellspacing="0" cellpadding="6" style="border-collapse: collapse; width: 100%; font-size: 12px;">
<tbody>
<tr>
<td style="width: 33.3333%;border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><span style="color: #55555c;"><b>Test Manual</b></span></td>
<td style="width: 33.3333%; text-align: center; border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><strong><strong><strong><span style="color: #55555c;"> Internal Use Only</span></strong></strong>
</strong>
</td>
<td style="width: 33.3333%; text-align: right; border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><span style="color: #55555c;"><b>11/12/2021</b></span></td>
</tr>
</tbody>
</table>
</body>
I have tried targeting .openBullet more specifically with :nth-child() but this also cascades.
You can remove just the circular marker without affecting subsequent numbering by setting list-style-type: none on the open bullet class.
.openBullet {
list-style-type: none;
}
<body>
<p style="font-size: 9px; text-align: right;"><span style="color: #10265f;">Submit manual improvement suggestions here.</span></p>
<div style="text-align: right;">
<table cellspacing="0" cellpadding="6" style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 100%; border-top: hidden; border-left: hidden; border-right:hidden; border-bottom: 6px solid #007db6;">
<p style="text-align: right;"><img src="" alt=""></p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="topic" data-documentRefId="Introduction" data-type="chapter" data-noNamespaceSchemaLocation="urn:fontoxml:cpa.xsd:1.0">
<h2 data-id="id-f5cc2363-db3b-43a6-b9f9-4ff438e7faa2">1 Introduction</h2>
<ol class="decimal" data-type="decimal" data-id="id-16c75eaf-f903-4ce9-d4ef-f6e2c8213c53">
<li data-id="id-9dcba4f8-dae3-4751-ef37-deb3b1287c11">
<p data-id="id-7baae131-d2fe-4e32-b3ed-824e7ee355e6">Step one goes here</p>
<ul class="openBullet" data-type="openBullet" data-id="id-f5a5de88-dada-4089-d60e-1953caf701a4">
<li data-id="id-d5e2366c-da46-4ee3-b044-7f2121d8e1fe">
<p data-id="id-59bc91da-bc49-4fbc-ba22-bdb631d369fc">Open bullet</p>
<ol class="lowerAlpha" data-type="lowerAlpha" data-id="id-b422622b-65a4-4fda-892c-ce370d851d0e">
<li data-id="id-b609503f-a39e-4674-9ca3-15bf05ec392d">
<p data-id="id-f051002a-9332-4254-8c0a-5be3614e8bc5">loweralpha</p>
</li>
<li data-id="id-1f0824e6-110b-4e7b-9979-35b3118d6b1b">
<p data-id="id-e95c7baa-4507-43be-bfa5-acd541419bbc">loweralpha</p>
</li>
</ol>
</li>
</ul>
</li>
</ol>
</div>
<p><br></p>
<table cellspacing="0" cellpadding="6" style="border-collapse: collapse; width: 100%; font-size: 12px;">
<tbody>
<tr>
<td style="width: 33.3333%;border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><span style="color: #55555c;"><b>Test Manual</b></span></td>
<td style="width: 33.3333%; text-align: center; border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><strong><strong><strong><span style="color: #55555c;"> Internal Use Only</span></strong></strong>
</strong>
</td>
<td style="width: 33.3333%; text-align: right; border-top: 3px solid #007db6; border-left: hidden; border-right:hidden; border-bottom: hidden;"><span style="color: #55555c;"><b>11/12/2021</b></span></td>
</tr>
</tbody>
</table>
</body>
Note the SO snippet system did allow the copy of the complete snippet from the question as there were too many characters. I removed the contents of the img just for this demo,
I'm trying to organize two sets of information in a particular way. I have a very crude mock-up here:
https://imgur.com/a/LrSCg
I have everything working except for the diving line between the two sets of info. I've tried setting up the entire thing as a table and then setting the appropriate border styles, but that didn't work out so well.
Here's what I currently have that gets me everything except the middle dividing line:
<table style="margin: 0 auto; border: 1px solid black; table-layout: fixed">
<tr>
<td>
<img id="left_image" class="images" alt="left_image" height="auto" width="300" style="border: 2px solid #5b5b5b">
</td>
<td style="display:block;">
<div style="float: left; margin: 20px 0 0 20px;">
<table>
<tr>
<td style="width: 75px;">Name:</td><td><span id="left_name" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="left_category" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="left_id" style="font-weight: bold;"></span></td>
</tr>
</table>
</div>
<hr>
<div style="float: right; margin: 100px 20px 0 0;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="right_name" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="right_category" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="right_id" style="font-weight: bold"></span></td>
</tr>
</table>
</div>
</td>
<td>
<img id="right_image" class="images" alt="right_image" height="auto" width="300" style="border: 2px solid #5b5b5b">
</td>
</tr>
<tr>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="selectLeftID()">Select Left</button>
</td>
<td></td>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="electRightID()">Select Right</button>
</td>
</tr>
</table>
This is just experimental code, it hasn't been cleaned up yet, so please ignore all the in-line styling.
Here's a sloppy example I threw together: https://jsfiddle.net/33pc23w0/2/
I would like to make the line in code and not use any images since I'd like the elements to be flexible in size. Any suggestions on the middle lines?
Here's a quick solution. I set the main container to relative position and added two absolute position divs with appropriate borders and dimensions to handle the dividers.
.main-container {
width: 800px;
position: relative;
}
.divider-top {
position: absolute;
width: 150px;
height: 150px;
left: 300px;
border: 2px solid black;
border-left: 0px;
border-top: 0px;
}
.divider-bottom {
position: absolute;
width: 150px;
height: 167px;
top: 150px;
left: 300px;
border: 0px;
border-left: 2px solid black;
}
.details_images {
display: block;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 10px;
}
.btn4 {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
width: 150px;
height: 50px;
}
.btn4.focus,
.btn4:focus,
.btn4:hover {
color: #333;
text-decoration: none;
}
.btn4-confirm {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn4-confirm:active {
color: #fff;
background-color: #449d44;
border-color: #398439;
}
<div class="main-container">
<div class="divider-top"></div>
<div class="divider-bottom"></div>
<table style="width: 100%; border: 1px solid black; table-layout: fixed">
<tr>
<td>
<img id="left_image" class="images" alt="left_image" height="auto" width="200" src="https://catalogue.millsarchive.org/images/generic-icons/blank.png" style="border: 2px solid #5b5b5b">
</td>
<td style="display:block;">
<div style="float: left; margin: 20px 0 0 20px;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="left_name" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="left_category" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="left_id" style="font-weight: bold;">Blah</span></td>
</tr>
</table>
</div>
<div style="float: right; margin: 100px 20px 0 0;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="right_name" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="right_category" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="right_id" style="font-weight: bold">Blah</span></td>
</tr>
</table>
</div>
</td>
<td>
<img id="right_image" class="images" alt="right_image" height="auto" width="200" src="https://catalogue.millsarchive.org/images/generic-icons/blank.png" style="border: 2px solid #5b5b5b">
</td>
</tr>
<tr>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="selectLeftID()">Select Left</button>
</td>
<td></td>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="electRightID()">Select Right</button>
</td>
</tr>
</table>
</div>
I'm sending an activation email. The user must click a button to activate their account, but the link boundaries are extending beyond the button. How do I fix this problem without inserting the a tags inside the main element? Then, the text would be clickable, but not the parent div.
<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td align='center'>
<div style='border: 1px solid #CCC;width:538px;font-family:Helvetica; padding: 30px'>
<span style='font-size: 30px;text-align: center;color: #606060;font-weight: bold;'> Just one more step... </span>
<br> <br> <br>
<a href='#' style='text-decoration: none'> <div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;'> Activate Account </div> </a> </div>
</td>
</tr>
</table>
Use display:inline-block ...
<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td align='center'>
<div style='border: 1px solid #CCC;width:538px;font-family:Helvetica; padding: 30px'>
<span style='font-size: 30px;text-align: center;color: #606060;font-weight: bold;'> Just one more step... </span>
<br> <br> <br>
<a href='#' style='text-decoration: none'> <div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;display:inline-block;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;'> Activate Account </div> </a> </div>
</td>
</tr>
</table>
Set position:absolute of div that is inside of anchor and increase main div height.
<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td align='center'>
<div style='border: 1px solid #CCC;width:538px;font-family:Helvetica; padding: 30px;height:160px;position:relative;'>
<span style='font-size: 30px;text-align: center;color: #606060;font-weight: bold;'> Just one more step... </span>
<br> <br> <br>
<div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;position:absolute;left:170px;'> Activate Account </div>
</div>
</td>
</tr>
</table>
Setting display:inline-block of inner div inside anchor tag too will work.
<div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;display:inline-block;'> Activate Account </div>
How can I add a border to the circle icon from Font Awesome? Actually my result is:
http://jsfiddle.net/0jhdvj0k/
The border is something like an ellipsis, instead a circular border.
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th></th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 55px;" class="text-center" style="padding-top: 5px; width: 25px;"><span class="label label-success" style="margin-bottom: 3px; display: inline-block; width: 100%; height: 22px; padding-top: 2px;"><i class='fa fa-check' style="font-size: 18px;"></i></span><span style='position: relative; top: -15px; right: 0px; left: 15px;'><span class='fa-stack fa-lg'><i class='fa fa-circle fa-stack-2x text-info' style='border-radius: 100%; border: 2px solid #5cb85c;'></i><span class='fa fa-stack-1x fa-inverse' style='top: 3px;'>6</span></span></span></td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>
Added line-height: 30px; on text-info to fix the circle, and changed fa-inverse top: 0px to vertical center number 6
<i class="fa fa-circle fa-stack-2x text-info" style="border-radius: 100%; border: 3px solid #5cb85c; line-height: 30px;"></i>
<span class="fa fa-stack-1x fa-inverse" style="top: 0px;">6</span>
http://jsfiddle.net/1qzqu83m/
You don't need to use FontAwesome for a bordered circle. It's actually easier to use pure CSS because you don't have to reset FontAwesome styling:
.circle-border {
display: inline-block;
color: black;
font: 18px sans-serif;
background: yellow;
border:2px solid green;
width: 30px;
height: 30px;
border-radius:17px; /* half of width + borders */
line-height: 34px; /* vertical center */
text-align: center; /* horizontal center */
}
<div class="circle-border">6</div>
I used this code for Facebook icon, you can use it and customize it for yourself.
HTML:
<a class="align-items-center justify-content-center d-flex roundbutton text-decoration-none socialSignInBtns" href="#">
<i class="fab fa-facebook-f fa-fw" aria-hidden="true" style="color: #4267b2"></i>
</a>
CSS:
.socialSignInBtns {
display: block;
height: 5vw;
width: 5vw;
border-radius: 50%;
box-shadow: 0px 1px 10px 0px rgb(181, 165, 196);
border: 5px solid rgb(196, 189, 189);
}
.socialSignInBtns:hover {
opacity: 0.7;
}
Try this:
.fa-circle {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
You can see in this example:
http://jsfiddle.net/noamway/AVwsP/
<div style="width: 100%; display: table; border: 1px solid black;">
Hello
</div>
<table style="width: 100%; border: 1px solid black; border-spacing: 0;">
<tr>
<td>Hello</td>
</tr>
</table>
That they are the same but the border make the different.
Any solution to that?
Thanks
Add box-sizing:border-box to the div so that the borders are rendered within the box as apposed to outside.
FIDDLE
how about this,
<div style="border: 1px solid black;">
Hello
</div>
<table cellspacing="0" cellpadding="0" width="100%" style="border: 1px solid black; border-spacing: 0;">
<tr>
<td>Hello</td>
</tr>
</table>