I have a button with position: absolute that is displayed perfectly centered between two sections in latest Chrome and Firefox. However, in Internet Explorer 11 the button is moved to the left of the page and only displays half, which destroys the layout.

You can find a JS Bin here.

CSS/LESS:

.button {
   z-index: 150;
   position: absolute;
   margin: 110px 0 0 -125px;
   height: 54px;
   width: 250px;
   letter-spacing: 3px;
   text-transform: uppercase;
}

In order to simply hide the button in Internet Explorer, I used the following conditional ment:

<!--[if IE]>
        <style>#slogan .button {display: none;}</style>
<![endif]-->

Unfortunately, this only works in older versions of IE. Conditional ments have been depreciated from IE 10 upwards.

Is there a work around?

I have a button with position: absolute that is displayed perfectly centered between two sections in latest Chrome and Firefox. However, in Internet Explorer 11 the button is moved to the left of the page and only displays half, which destroys the layout.

You can find a JS Bin here.

CSS/LESS:

.button {
   z-index: 150;
   position: absolute;
   margin: 110px 0 0 -125px;
   height: 54px;
   width: 250px;
   letter-spacing: 3px;
   text-transform: uppercase;
}

In order to simply hide the button in Internet Explorer, I used the following conditional ment:

<!--[if IE]>
        <style>#slogan .button {display: none;}</style>
<![endif]-->

Unfortunately, this only works in older versions of IE. Conditional ments have been depreciated from IE 10 upwards.

Is there a work around?

• javascript
• jquery
• html
• css
• internet-explorer

• 4 Wouldn't it be better to fix the problem, rather than hiding it? IE11 is pretty solid/standards-pliant. – Tim M. Commented Jun 4, 2014 at 0:26
• Can you create a JSFiddle that shows the problem? – epascarello Commented Jun 4, 2014 at 0:28
• 1 I hate IE as much as the next web dev, but I gotta agree with Tim. Any chance you could share a bit more code or even a codepen/fiddle to see if there's an issue? – Jack Commented Jun 4, 2014 at 0:28
• 1 ...I'm wondering about why position:absolute. I don't see any positioning. What about more css and the html? It's like trying to draw a home plan just looking throw a keyhole. – miguel-svq Commented Jun 4, 2014 at 0:47
• Using position: absolute; implies that your HTML is not organised well. Maybe you should share your HTML so we can make suggestions – Predrag Manojlovic Commented Jun 4, 2014 at 0:50

3 Answers 3

I finally found a straightforward, simple solution using jQuery to detect Internet Explorer including latest version 11:

 <script>
      $(document).ready(function() {
        if (navigator.userAgent.match(/msie|trident/i)) {
          alert('You are using the worst browser on this planet.');
          $('.button').hide();
        }
      });
 </script>

It's really best to fix the styles so they work in all browsers. As Tim Medora and others have pointed out IE10+ are much more standards pliant these days.

HTML:

<!-- Section 1 -->
<div id="section1" class="container-fluid text-center">

  <div class="container">
  ... moved the form from here ...
  </div>

  <!--
   - Move this form from the ".container" to "#section1".
   - Add the .learn-more-container class to the form.
  -->
  <form class="learn-more-container" action="">
      <button type="submit" class="btn btn-primary hidden-xs learn-more-btn">BUTTON</button>
    </form>
</div><!-- /. Section 1 -->

CSS:

Then update your #section1 css to this:

#section1 .learn-more-container {
    z-index: 150;  
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: -25px;
}

#section1 .learn-more-btn {
    height: 54px;
    width: 250px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

That will fix your button to work in all browsers - in fact these changes work on IE8+.

Here's an updated jsbin showing the changes: http://jsbin./todufuma/7/edit

Use the style.display method in JavaScript: style.display

var el = document.getElementById("button");
    el.style.display = "none";

You can also get the browser type by getting the value of navigator.userAgent