1

I am editing a site that uses mostly tables to format it's sales page. I am not a huge fan of tables, but it's all I have to work with. The webmaster needs to remove the clickable area from the left and right of the Try Now button, which is centered in a table. Everything looks good, except that the viewers can click an invisible "a href" area that extends to the width of the table as a margin on both the left and right of the button. I have included the code and a jsfiddle below.

Here's the HTML:

<table width="930px" align="center" style="margin: -20px 0 20px 0;">
    <tbody>
    <tr>

        <table width="930px" height="300px" style="background-repeat:no-repeat; margin-top:-10px;">
            <tbody>
                <tr>
                    <td align="center" valign="top">

                <tr>
                    <td valign="top" align="center">
                        <a href="#" id="try-now-btn-text">
                            <div class="try-now-btn" align="center">
                                TRY NOW
                            </div>
                        </a>
                   </td>
                </tr>

Here's the CSS:

a div.try-now-btn {
    background-color:#7DC15C;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    padding-top:15px;
    padding-bottom:10px;
    width:200px;
    border-bottom: 5px solid #6DA850;
}

a div.try-now-btn:hover {
    background-color:#8BD666;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    padding-top:15px;
    padding-bottom:10px;
    width:200px;
    border-bottom: 5px solid #6DA850;
}

a#try-now-btn-text {
    color:#fff;
    font:bold 22px 'Helvetica Neue',sans-serif;
    line-height:30px;
    text-decoration:none;
    margin:none;
}

JSFiddle:

http://jsfiddle.net/3qX9X/

I have tried adding "margin:0!important" to the CSS in multiple areas. I have tried every which way I can think of to center the button withOUT allowing the margin to the left and right to be "clickable." Nothing I have done has worked. Please advise. Not looking for you wonderful people to do my job for me - just hoping that some light is shed on this subject for my enlightenment. I have researched for hours and still cannot seem to get it. Thus, this is my "last resort."

Thanks!

Surreal Dreams
  • 26,055
  • 3
  • 46
  • 61
cjmbrands
  • 113
  • 3
  • 13

4 Answers4

1

Making the button an inline-block element would work. EXAMPLE HERE

a div.try-now-btn {
    background-color: #7DC15C;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding-top: 15px;
    padding-bottom: 10px;
    width: 200px;
    border-bottom: 5px solid #6DA850;
    display: inline-block;
}
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • You should never use block-level elements such as `div` inside inline-level elements such as `a`. Just wanted to let you know. – Joeytje50 Jan 22 '14 at 20:12
  • @joeytje50 You're right - however; it validates as of HTML5. See this related SO answer http://stackoverflow.com/a/1828032/2680216 Besides, I didn't change the markup, it was already that way. – Josh Crozier Jan 22 '14 at 20:15
  • 1
    Thanks for the help, guys. Adding "display: inline-block;" into my CSS for "a div.try-now-btn" totally fixed it. – cjmbrands Jan 22 '14 at 20:22
1

You should never nest block-level elements inside inline-level elements. So, your usage of a div inside an a should be replaced with a span inside an a.

Also, to fix this, I've changed your display on the (what used to be div) span in your a element to display:inline-block;. inline-block elements will not automatically take up the full width, and they won't behave as weirdly as the div did.

The working version can be found here.

Joeytje50
  • 18,636
  • 15
  • 63
  • 95
  • Adding "display: inline-block;" into my CSS for "a div.try-now-btn" totally fixed it. And, I consider everything else you said to be a bonus nugget of knowledge ;) Thank you! – cjmbrands Jan 22 '14 at 20:17
0

use display:table in your a div.try-now-btn

Hugo S. Mendes
  • 1,076
  • 11
  • 23
0

Just set position to absolute or relative. Don't use !important for something you can't figure out. here's the fiddle http://jsfiddle.net/3qX9X/2/

Esser
  • 540
  • 1
  • 4
  • 16
  • +1 for not abusing !important. -1 for using absolute. That's not going to be friendly to the rest of the layout. – Surreal Dreams Jan 22 '14 at 20:15
  • @SurrealDreams I agree. This was not the right answer. I do appreciate the advice about the !important use though. – cjmbrands Jan 22 '14 at 20:20
  • Obviously this is only if it makes sense for his layout. To be honest, I didn't even read through the whole code, just checked the fiddle really quickly. – Esser Jan 22 '14 at 20:20