Getting random link after buttons div

Question

No matter what I put after these buttons, the content under them is also a button. What am I missing? You can see on my current site - the footer is after the button so there's a half footer that links to google (same place as the buttons).

http://staging.yodega.com/sell

Would include a screenshot but that won't really convey it.

Relevant code attached.

/* formats buttons on sell page */
#buttons {
      text-align: center;
      margin-top: 30px;
    }
#button1{
    width: 200px;
    height: 50px;
    border-radius: 25px; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    border: 0px solid #800000;
    color:#F0E8E0;
    background-color:#3a3a3a;
    margin-bottom: 5px;
    margin-right: 3px;
    margin-left: 3px;
}
#button2{
    width: 200px;
    height: 50px;
    border-radius: 25px; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    border: 0px solid #800000;
    color:#F0E8E0;
    background-color:#3a3a3a;
    margin-bottom: 5px;
    margin-right: 3px;
    margin-left: 3px;
}

<div class="clear"></div>

    <div class="astericks">

*Base rate starts at 5.5% and can be lowered via referrals. Learn more on the <a href="yodega.com/referrals">referrals</a> page
    
    </div>

<div id="buttons">
  <a href="http://www.google.com"><button type="button contact-button" id="button1">Sign Up</button>
  <a href="http://www.google.com"><button type="button contact-button" id="button2">Seller Resources</button
</div>
<div class="clear"></div>

score 3 · Accepted Answer · answered Aug 16 '17 at 02:51

3

You have an improperly closed <button> tag. I've updated </button to </button> in the below snippet. You also never close your <a> tags, that has also been updated.

As a heads up it is not valid HTML to have a button tag nested inside of an anchor tag. See https://stackoverflow.com/a/6393863/1168379 if you want it to look like a button, but function like a link then update the snippet so that <button> is removed and <a> has all the styling you want done to make it look like a button.

/* formats buttons on sell page */
#buttons {
      text-align: center;
      margin-top: 30px;
    }
#button1{
    width: 200px;
    height: 50px;
    border-radius: 25px; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    border: 0px solid #800000;
    color:#F0E8E0;
    background-color:#3a3a3a;
    margin-bottom: 5px;
    margin-right: 3px;
    margin-left: 3px;
}
#button2{
    width: 200px;
    height: 50px;
    border-radius: 25px; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    border: 0px solid #800000;
    color:#F0E8E0;
    background-color:#3a3a3a;
    margin-bottom: 5px;
    margin-right: 3px;
    margin-left: 3px;
}

<div class="clear"></div>

    <div class="astericks">

*Base rate starts at 5.5% and can be lowered via referrals. Learn more on the <a href="yodega.com/referrals">referrals</a> page
    
    </div>

<div id="buttons">
  <a href="http://www.google.com"><button type="button contact-button" id="button1">Sign Up</button></a>
  <a href="http://www.google.com"><button type="button contact-button" id="button2">Seller Resources</button></a>
</div>
<div class="clear"></div>

answered Aug 16 '17 at 02:51

Charles

1,121
19
30

thanks for the help! Changing this has resolved the extra link issue but has now caused the buttons to stack instead of be horizontal with one another. How could I get that back? Maybe making the "correct" button that you linked would help this. – Jacob Jordan Aug 16 '17 at 03:13
@JacobJordan On your website you added a `
` between the buttons. This would be the cause of the buttons being on two lines. It would, however, be best if you removed the ` – Charles Aug 16 '17 at 03:19
Awesome - thanks for your help. Will do in the am! What is a
? I don't believe I have added that. (I currently have two sets of buttons as Im testing them out - but both are stacking). – Jacob Jordan Aug 16 '17 at 03:24
@JacobJordan If you look at lines 334-335 in your site's HTML source (may vary, especially as time goes on). You have your two buttons `
`. In the middle on Line 334 (or the first button) you have a `
` tag being used. `
` is used to start a new line in HTML, generally within a content tag (i.e. `p`, `h1`, `h2`, `span`, ...) – Charles Aug 16 '17 at 03:31
That's very interesting cause there's no
in my code. I wonder if this is some type of browser interpretation.

– Jacob Jordan Aug 16 '17 at 12:37
If it were a browser interpretation then it wouldn't show up in raw HTML source and would only show up in the DOM. If you're using a [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) to insert your HTML on the page then it may be adding it for you automatically. – Charles Aug 16 '17 at 13:19

snw123 · Answer 2 · 2017-08-16T03:02:57.667

Try this :) You were opening <a> tags but closing with <button>.

<div id="buttons">
  <a href="http://www.google.com" id="button1">Sign Up</a>
  <a href="http://www.google.com" id="button2">Seller Resources</a>
</div>
<div class="clear"></div>

I say leave it as an <a> as they are easier to use within html. try:

    #buttons {
      color: blue;
      padding: 20px;
      box-shadow: 
       0 1px 2px #fff, /*bottom external highlight*/
       0 -1px 1px #666, /*top external shadow*/ 
       inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
       inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
       }

for an appearance like a button

Also..

<div class="astericks">

*Base rate starts at 5.5% and can be lowered via referrals. Learn more on the <a href="yodega.com/referrals">referrals</a> page

    </div>

It's good practice to declare what you've written in the div with an element. Is it a <p>, <h1>, <h2>, ect.

Hope this helps!

Getting random link after buttons div

2 Answers2