CODEWITHSUNDEEP
csstwitter-bootstrapfirefoxbutton
Nakib
Nakib

Reputation: 4713

Twitter Boostrap bugs in Buttons just in firefox and IE?

I have some unusual behaviour on my portfolio website in firefox. I am using twitter bootstrap.The text on buttons is going beyond the button width, also nothing happens on clicking the buttons. It works fine on chrome and safari.

Link: www.nakibmomin.com

html

 <div class="parallax-overlay"></div>
    <div class="jumbotron" id="home">
      <div class="container">
        <img class="img-circle" src="img/profile.jpg" style="width: 100px;height:100px;">
        <h1>Nakib Momin</h1>
        <p>Student Blogger And Software Developer</p>
        <button type="button" class="btn btn-primary"><a href="#contact">Contact Me</a></button>
      </div>
    </div>

css

.parallax-overlay {
position: absolute;
left: 0;
top: 120;
width: 100%;
height: 100%;
background-image: url(../img/pattern.png);
background-repeat: repeat;
background-color: rgba(44,62,80,0.4);
z-index: 2;
min-height: 460px;
}

.jumbotron {

  background-image:url('../img/main.jpg');
  height: 100%;
  font-family: 'Hammersmith One', sans-serif;
  text-transform: uppercase;
  letter-spacing: 6px;
  text-align: center;
  min-height: 460px;
}

.jumbotron .container {
  position: relative;
  top:120px;
}

.jumbotron h1, .jumbotron p, .jumbotron a, .jumbotron button, .jumbotron img
{
  position: relative;
  z-index: 3;
}

.jumbotron img
{
  margin-bottom: 5px;
  padding: 2px;
}

.jumbotron button
{
  margin-top: 18px; 
  width: 130px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  padding: 10px;
  font-weight: bold;

}

.jumbotron p {
  font-size: 12px;
  color: #e3e3e3;

}

.jumbotron a {
  font-size: 15px;
  color:#fff;
  text-decoration: none;
}

Upvotes: 1

Views: 88

Answers (2)

MattD
MattD

Reputation: 4420

Don't put anchor tags inside of button tags.

Either make it an actual button and redirect users to your contact me page when they click it, or style the button using Bootstrap's button classes.

BOOTPLY

HTML:

<a href="#contact" class="btn btn-primary">Contact Me</a>

Upvotes: 4

cvrebert
cvrebert

Reputation: 9289

You can't put <a>s inside <button>s. They don't work properly and it's very unclear what proper behavior for such a combination would even be.

Upvotes: 3

Related Questions