CODEWITHSUNDEEP
htmlcssgoogle-chromeinternet-explorer
nsic
nsic

Reputation: 153

CSS working with Chrome but not IE

I have a list of CSS to format my link button but it appears only working in Chrome but not IE, any ideas, the hover and everything works just not the link itself

thanks in advance

CSS

.button {
  background-color: #4CAF50;
  border-radius: 50%;
  width: 170px;
  height: 170px; 
  color: white;
  padding: 4px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  position: absolute; 
  margin-top: 0px; 
  margin-left: 400px;
  background-color: white; 
  color: white; 
  border: 4px solid #83b739;
}

.button1:hover {
  background-color: #83b739;
  color: white;  
}

HTML

<button class="button button1"><a href="http://www.google.com">link</a></button>

Upvotes: 0

Views: 1152

Answers (3)

Marat Tanalin
Marat Tanalin

Reputation: 14123

It’s not just about IE. Such link-inside-button does not work in Firefox too.

If you really (think twice) need this to be a button instead of just a link, remove the explicit link from your button and wrap the button in a simple form:

<form action="http://example.com/">
    <button class="button button1" type="submit">link</button>
</form>

But based on your code, button element is unneeded, and you should just use a link instead:

<a href="http://example.com/" class="button button1">link</button>

Upvotes: 0

Pegladon
Pegladon

Reputation: 603

I'm not exactly sure what would have caused your problem, however is is most likely due to a css/html nesting problem, where multiple css styles interact with the nested elements differently on different browsers? It is better to simply remove the button element in the html and just style the <a> tag to look like a button. By doing this the code is less complicated, you should have fewer problems with styles and nested elements, and this is how most make link buttons anyway. Here is an example of how I made a link button in a recent project, some of the stylings are missing (custom fonts, etc) but it shows that you don't need the button tag, it works better without it, and how to make a button with just the <a> tag.

.btn:link,
.btn:visited {
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    color: white;
    border-radius: 200px;
    border: 3px solid #1A75BB;
    margin: 20px 20px 0px 0px;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn:hover,
.btn:active {
    background-color: #14598e;
    border-color: #14598e;
}

.btn-full:link,
.btn-full:visited {
    background-color: #1A75BB;
    margin-right: 20px;
}

.btn-full:hover,
.btn-full:active {
    background-color: #14598e;
}

.btn-ghost:link,
.btn-ghost:visited {
  color: black;
    border-color: #14598e;
}

.btn-ghost:hover,
.btn-ghost:active {
  color:white;
}
<a href="#section-one" class="btn btn-full">Why use AnyMath?</a>
<a href="#section-two" class="btn btn-ghost">What problems can AnyMath solve?</a>

Upvotes: 0

Matti Virkkunen
Matti Virkkunen

Reputation: 65116

It's probably not even a CSS issue, but rather an issue with nesting interactive elements like that.

Don't put a link inside a button. That's just bizarre. Use just the <a> element and style that.

Upvotes: 2

Related Questions