-3

I am having issues with my CSS for my current design. I have everything pretty much completed. However, in the final product, I am noticing that the "View Participation Button" is not aligned with other "View Participation Buttons." They seem up and down. The should all be aligned. I adjusted the surrounding table/box so that they are aligned by fixing the height to 150px. Can anyone see the error in my code and point out how this one part can be fixed? I have a picture below on what it looks like:

<style type="text/css">
        /*<![CDATA[*/
        body {
            margin: 0;
            padding: 0;
            -webkit-text-size-adjust: 100% !important;
            -ms-text-size-adjust: 100% !important;
            -webkit-font-smoothing: antialiased !important;
        }

        img {
            border: 0 !important;
            outline: none !important;
        }

        td, a, span {
            border-collapse: collapse;
            mso-line-height-rule: exactly;
        }

        .ExternalClass * {
            line-height: 100%;
        }

        .em_defaultlink a {
            color: inherit !important;
            text-decoration: none !important;
        }

        .em_black a {
            text-decoration: none;
            color: #000000;
        }

        .em_white a {
            text-decoration: none;
            color: #ffffff;
        }

        .em_blue a {
            text-decoration: none;
            color: #0a75b1;
        }

        .em_grey a {
            text-decoration: none;
            color: #4d4d4d;
        }

        .em_g_img + div {
            display: none;
        }

        @media only screen and (min-width: 481px) and (max-width: 667px) {
            .em_main_table {
                width: 100% !important;
            }

            .em_wrapper {
                width: 100% !important;
            }
        .em_wrapper2 {
                width: 100% !important;
        height: 150px !important
            }

            .em_hide {
                display: none !important;
            }

            .em_full_img {
                width: 100% !important;
                height: auto !important;
            }

            .em_full_img img {
                width: 100% !important;
                height: auto !important;
            }

            .em_side10 {
                width: 10px !important;
            }

            .em_ptop {
                padding-top: 20px !important;
            }

            /* Padding Left Right Bottom */
            .em_h20 {
                height: 20px !important;
                font-size: 1px !important;
                line-height: 1px !important;
            }

            .em_w300 {
                width: 320px !important;
            }

            .em_w280 {
                width: 320px !important;
            }

            .em_font_18 {
                font-size: 27px !important;
                line-height: 31px !important;
            }
        }

        @media screen and (max-width: 480px) {
            .em_main_table {
                width: 100% !important;
            }

            .em_wrapper {
                width: 100% !important;
            }
            .em_wrapper2 {
                width: 100% !important;
            }

            .em_hide {
                display: none !important;
            }

            .em_full_img {
                width: 100% !important;
                height: auto !important;
            }

            .em_full_img img {
                width: 100% !important;
                height: auto !important;
            }

            .em_side10 {
                width: 10px !important;
            }

            .em_side_10 {
                width: 10px !important;
            }

            .em_ptop {
                padding-top: 20px !important;
            }

            /* Padding Left Right Bottom */
            .em_h20 {
                height: 20px !important;
                font-size: 1px !important;
                line-height: 1px !important;
            }

            .em_font_18 {
                font-size: 18px !important;
                line-height: 23px !important;
            }

            .em_w300 {
                width: 300px !important;
            }

            /* update the N number as per width */
            .em_w280 {
                width: 300px !important;
            }

            .em_w146 {
                width: 146px !important;
            }

            .em_aside25 {
                padding: 0px 25px !important;
            }

            u + .em_body .em_full_wrap {
                width: 100% !important;
                width: 100vw !important;
            }
        }

A sample of my code is below:

<table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style="width:328px;" class="em_wrapper">
<tbody>
    <tr>
        <td align="center" valign="top" class="em_ptop">
            <table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tbody>
    <tr>
        <td align="center" valign="top">
            <table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
                <tbody>
                    <tr>
                        <td align="center" valign="top" style="border: solid 2px #9e9f9f;">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper">
                                <tbody>
                                    <tr>
                                        <td align="center" valign="top" bgcolor="#9E9F9F" style="background-color:#9e9f9f; color:#fff;">
                                            Feature Presenter 3
                                            <table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="189" align="center" valign="bottom" style="height:189px;">
                                            <img src="./TREATMENT OPTIONS FOR ADVANCED BREAST CANCER_files/oshughnessy-joyce-800.png" width="145" alt="" height="153" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:153px;" class="em_g_img" border="0">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" valign="top" bgcolor="#4D4D4D" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
                            <table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;height:150px" class="em_wrapper">
                                <tbody>
                                    <tr>
                                        <td align="center" valign="top" style="padding:0px 10px;">
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                                                <tbody>
                                                    <tr>
                                                        <td class="em_white" align="center" valign="top" style="font-family: &#39;Roboto&#39;, Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px;">
                                                            <span style="font-weight:bold;">Joyce O’Shaughnessy</span><br>
                                                            Baylor University Medical Center
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td align="center" valign="top" style="padding-bottom:11px;">
                                                            <table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
                                                                <tbody>
                                                                    <tr>
                                                                        <td align="center" valign="top" bgcolor="#007F3D" style="border-radius:5px;">
                                                                            <table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
                                                                                <tbody>
                                                                                    <tr>
                                                                                        <td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: &#39;Roboto&#39;, Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold;">
                                                                                            <a target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3" style="text-decoration:none; color:#ffffff; display:block; line-height:16px;">View
                                                                                            Participation<br>
                                                                                            Options
                                                                                            </a>
                                                                                        </td>
                                                                                    </tr>
                                                                                </tbody>
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>

I can add the CSS styling too if needed but I think the inline CSS that I have is what needs to be adjusted/modifyed/added.

afzaaldeveloper1
  • 393
  • 1
  • 9
  • Can you please post a complete code example? The HTML you posted is incomplete and doesn't allow us to look at the entirety of your code. – Adam H Apr 01 '19 at 21:34
  • Hi Adam H. Are you asking for the CSS code? If so, I just put the CSS above. I can add more of the HTML if you like. Please let me know – afzaaldeveloper1 Apr 01 '19 at 21:39
  • This won't fix your issue but ... Do Not Use HTML tables for layout. You have nested tables at least 3 deep. This is bad. Please see this on why you should not be using tables: https://stackoverflow.com/a/84986/4665. Also, please only include enough code to replicate the problem. Looking at your CSS, there is a lot there that looks like it has not bearing on this. – Jon P Apr 01 '19 at 21:47

1 Answers1

1

I've started by completely throwing out your table based layout, this simplifies the HTML. Then I've taken away the inline styles, which simplifies things further.

So we have a list of things, order doesn't matter so lets use an unordered list (ul).

You have many options on how to lay out the list elements, I've chose display:block for simplicity. You could also look at Flex, CSS Grid, or even CSS Tables.

To align the buttons to the bottom, I've created an element with a fixed height, set that to position:relative. I've then applied position:absolute to the button element and set the position relative to the bottom of the parent element.

.presenters {
  list-style: none;
  padding: 0;
}

.presenter {
  display: inline-block;
  margin-right: 10px;
  width: 158px;
  background-color: #4D4D4D;
  color: #FFF;
  border-radius: 0 0 5px 5px;
  vertical-align: top;
  overflow: hidden;
}

.presenter-imgContainer {
  background-color: #FFF;
  border: solid 2px #9e9f9f;
}

.presenter-img {
  display: block;
  width: 155px;
}

.presenter-title {
  background-color: #9E9F9F;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  width: 155px;
  margin: 0;
}

.presenter-content {
  /*Set a sensible fixed height*/
  height: 80px;
  /*Give enough room in the bottom padding 
    For the action element
  */
  padding: 8px 10px 70px;
  /*We want to postion the action element
    relative to this
  */
  position: relative;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
}

.presenter-name {
  font-weight: bold;
}

.presenter-action {
  background-color: #007F3D;
  display: block;
  padding: 10px 5px;
  text-decoration: none;
  color: white;
  border-radius: 5px;
  /*Postion the button at the bottom*/
  position: absolute;
  bottom: 10px;
  width: calc(100% - 30px);
}
<ul class="presenters">
  <li class="presenter">
    <div class="presenter-imgContainer">
      <h2 class="presenter-title">Feature Presenter 2</h2>
      <img class="presenter-img" src="https://www.fillmurray.com/154/189" />
    </div>
    <div class="presenter-content">
      <div class="presenter-name">Dennis Salmon</div>
      <div class="presenter-desc">UCLA Medical Center</div>
      <a class="presenter-action" target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3">View Participation<br>Options</a>
    </div>
  </li>
  <li class="presenter">
    <div class="presenter-imgContainer">
      <h2 class="presenter-title">Feature Presenter 3</h2>
      <img class="presenter-img" src="https://www.fillmurray.com/154/189" />
    </div>
    <div class="presenter-content">
      <div class="presenter-name">Joyce O’Shaughnessy</div>
      <div class="presenter-desc">Baylor University Medical Center</div>
      <a class="presenter-action" target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3">View Participation<br>Options</a>
    </div>
  </li>
</ul>
Jon P
  • 19,442
  • 8
  • 49
  • 72