خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

Spacing Issue below header/above nav bar

Why is there a small (around 10-15 px) space between the header and nav bar? I tried nearly everything to fix this issue. I'm stumped.

Also, why doesn't the body borderline match/line-up withe the rest of the body?

Thanks!

Click image for larger version.  Name: header-ex.jpg  Views: 7  Size: 45.4 KB  ID: 17679

Here is the code:

Code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">
    <title>Event - [Plain HTML]</title>

  <!--[if !mso]><!-->
        <link href="https://fonts.googleapis.com/css?family=Helvetica:300,500" rel="stylesheet">
  <!--<![endif]-->

    <!-- Web Font / @font-face : END -->

    <!-- CSS Reset -->
    <style>
        /* What it does: Stops email clients resizing small text. */
        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        /* What it does: Centers email on Android 4.4 */
        div[style*="margin: 16px 0"] {
            margin:0 !important;
        }

        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }

        /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            margin: 0 auto !important;
        }
        table table table {
            table-layout: auto;
        }

        /* What it does: Uses a better rendering method when resizing images in IE. */
        img {
            -ms-interpolation-mode:bicubic;
        }

        /* What it does: A work-around for email clients meddling in triggered links. */
        *[x-apple-data-detectors],        /* iOS */
        .x-gmail-data-detectors,        /* Gmail */
        .x-gmail-data-detectors *,
        .aBn {
            border-bottom: 0 !important;
            cursor: default !important;
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }

        /* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */
        .a6S {
            display: none !important;
            opacity: 0.01 !important;
        }
        /* If the above doesn't work, add a .g-img class to any image in question. */
        img.g-img + div {
            display:none !important;
          }

        /* What it does: Prevents underlining the button text in Windows 10 */
        .button-link {
            text-decoration: none !important;
        }

        /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89  */
        /* Create one of these media queries for each additional viewport size you'd like to fix */
        /* Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting */
        @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
            .email-container {
                min-width: 375px !important;
            }
        }

    </style>

    <!-- Progressive Enhancements -->
    <style>

        /* What it does: Hover styles for buttons */
        .button-td,
        .button-a {
            transition: all 100ms ease-in;
        }
        .button-td:hover,
        .button-a:hover {
            background: #555555 !important;
            border-color: #555555 !important;
        }

        /* Media Queries */
        @media screen and (max-width: 480px) {

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }

            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }

            /* What it does: Adjust typography on small screens to improve readability */
                        .email-container p {
                                font-size: 17px !important;
                                line-height: 22px !important;
                        }
        }

    </style>

    <!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
    <!--[if gte mso 9]>
        <xml>
                <o:OfficeDocumentSettings>
                        <o:AllowPNG/>
                        <o:PixelsPerInch>96</o:PixelsPerInch>
                </o:OfficeDocumentSettings>
        </xml>
    <![endif]-->


<style type="text/css">

</style>
</head>
<body width="100%" bgcolor="#F1F1F1" style="margin: 0; mso-line-height-rule: exactly;">
    <center style="width: 100%; background: #F1F1F1; text-align: left;">
                <table><tr><td align="center" valign="top" style="padding-top: 10px;"></td></tr></table>
               

        <div style="max-width: 680px; margin: auto;" class="email-container">
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px; border: 1px solid #000000;" class="email-container">
                               
                <tr>
                    <td>
                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                            <tr>
                                <td>
                                                                        <a href="http://interfaceconferencegroup.com/srw2018" target="_blank"><img src="http://interfaceconferencegroup.com/shw18/images/SHW-Baer-680.jpg" alt="Register Now!"></a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!-- HEADER : END -->

                <!-- HERO : BEGIN -->
                <tr>
                        <td bgcolor="#2d63af" width="100%" valign="middle" style="font-family: Helvetica, sans-serif; font-size: 16px; font-weight: 300; color: #ffffff; padding: 10px 0 10px 0;" align="center">
                                  <a href="http://www.cvent.com/events/2017-interface-houston-retail-real-estate-conference/agenda-9e37c270e37d4946ad5ae8b751ea6ee9.aspx" target="_blank" style="text-decoration: none; color: #ffffff;">AGENDA </a>&nbsp;|&nbsp;
                            <a href="http://www.cvent.com/events/2017-interface-houston-retail-real-estate-conference/agenda-9e37c270e37d4946ad5ae8b751ea6ee9.aspx" target="_blank" style="text-decoration: none; color: #ffffff;">SPEAKERS </a>&nbsp;|&nbsp;
                            <a href="http://www.cvent.com/events/2017-interface-houston-retail-real-estate-conference/agenda-9e37c270e37d4946ad5ae8b751ea6ee9.aspx" target="_blank" style="text-decoration: none; color: #ffffff;">SPONSORS </a>&nbsp;|&nbsp;
                            <a href="http://www.cvent.com/events/2017-interface-houston-retail-real-estate-conference/agenda-9e37c270e37d4946ad5ae8b751ea6ee9.aspx" target="_blank" style="text-decoration: none; color: #ffffff;">REGISTER </a>&nbsp;|&nbsp;
                            <a href="http://www.cvent.com/events/2017-interface-houston-retail-real-estate-conference/agenda-9e37c270e37d4946ad5ae8b751ea6ee9.aspx" target="_blank" style="text-decoration: none; color: #ffffff;">VENUE</a>
                        </td>
                    </tr>
                <!-- HERO : END -->
Attached Thumbnails
Click image for larger version.  Name: Screen Shot 2017-12-26 at 12.00.17 PM.jpg  Views: N/A  Size: 47.8 KB  ID: 17678   Click image for larger version.  Name: header-ex.jpg  Views: N/A  Size: 45.4 KB  ID: 17679  

برچسب: نویسنده: آیلین رضوانی تاريخ: پنجشنبه 7 دی 1396 ساعت: 1:11

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه