css3,internet-explorer,hover,internet-explorer-9,rgba , Internet Explorer hover/rgba/opacity/css3 compatibility


Internet Explorer hover/rgba/opacity/css3 compatibility

Question:

Tag: css3,internet-explorer,hover,internet-explorer-9,rgba

I am using CSS3 with an rgba alpha opacity hover to display text over an image when the user hovers.

Works fine in chrome, firefox and safari but when trying in internet explorer (9) it just shows the image and hovering does nothing.

Check out the code here:

http://jsfiddle.net/b16pow50/

div {
  position: absolute;
  top: 0px;
  left: 0px;
  display: table;
  width: 600px;
  height: 396px;
  text-align: center;
  background: #000;
}
span {
  display: table-cell;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.72);
  visibility: hidden;
  opacity: 0;
  color: #000;
}
div:hover span {
  visibility: visible;
  opacity: 1;
  text-align: right;
}
<div>
  <span>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td width="20%" rowspan="5">&nbsp;</td>
        <td width="60%">- 0</td>
        <td width="20%" rowspan="5" align="right">
          <a href="#" target="frame">
            <img src="http://placehold.it/71x50/f00" alt=" " width="71" height="50" border="0">
          </a>
        </td>
      </tr>
      <tr>
        <td>- 1</td>
      </tr>
      <tr>
        <td>- 2</td>
      </tr>
      <tr>
        <td>- 3</td>
      </tr>
      <tr>
        <td>- 4</td>
      </tr>
    </table>
  </span>
</div>


Answer:

The demo works in Internet Explorer 9. The issue may be that you are viewing the page in an older document mode, thus reducing support for things like :hover on non-link elements, and rgba color.

Press F12 to open up your Developer Tools and check the document mode from there. Alternatively, you can also log the value of document.documentMode to your console output as well. You should expect Internet Explorer 9 to be in IE 9's document mode, as opposed to something earlier.

enter image description here

The ensure that your document loads in Standards Mode to begin with (which in IE 9 is the 9 Document Mode), start your document with the HTML5 doctype:

<!DOCTYPE html>

Nothing should come before this in your document.

From then on, adhere closely to the HTML Specification. As an example of one deviation from the spec, you are placing a table within a span. The <span> element is meant to hold only phrasing content, such as <a>, <strong>, <em>, etc.


Related:


Responsive css always applying landscape


html,css3,responsive-design,screen-orientation
I'm trying to understand why my css is always applying the h1 font size in landscape instead of portrait when I am in portrait (I'm a noob in responsive design). Anyone have an idea of what I'm doing wrong ? Thank you ! Guillaume **** edited new version: now working....

list checkboxes displayed horizontal


html,css,html5,twitter-bootstrap,css3
I have the following markup:- <div class="fil hori now"> <span class="label-new"> <ul class="ngc"> <li> <input class="any" id="any" name="any" type="checkbox"> <label id="any" for="any">Any</label> </li> <li class="new-select"> <input id="item1" name="item1" type="checkbox"> <label id="item1" for="item1">item1</label> </li> <li class="new-select"> <input id="item2" name="item2" type="checkbox"> <label id="item2"...

Float left and float right not working + sub-menu positioned under first UL item?


html,css,css3
Been learning CSS and HTML quite a lot lately, and although I already know about stuff like float, positioning, margins, padding, etc, for some reason splitting up these 2 things are not working... And also my submenu is a bit wrong, refer to the image below: As you can see...

Is there an opposite CSS pseudo-class to :hover?


css,css3,css-selectors,pseudo-class
Is there a pseudo-class in CSS to specify :not(:hover) Or is that the only way to specify an item that is not being hovered? I went through several CSS3 references, and I see no mention of a CSS pseudo-class to specify the opposite of :hover....

:nth-of-type selector overrides all other CSS selectors


html,css,css3,css-selectors,css-specificity
I am trying to revise for my exam on HTML, JavaScript and CSS3; and I am a little confused at CSS selectors and which take priority. I have the following CSS: table { border: 1px solid black; } tr:nth-child(odd) { background-color: red; } tr td:nth-of-type(even) { background-color: blue; } td...

Pure CSS animation visibility with delay


css,css3,css-animations
I am trying to implement some animation onLoad without Javascript. JS is easy, CSS is ... not. I have a div which should be on display: none; and should be display: block; after 3 secondes. Lots of resources told me animate does not work with display, but should with visibility...

Background-image style with JS not working in ie9


javascript,jquery,html,internet-explorer
I'm working on a site and im having some issues with my slider in IE9. What I've done is that I've made a div that gets the background image changed every few seconds depending on the img tags within. You can see it in function here: http://diakondk.quine.pil.dk/ It works wonders...

Content section overlap footer


html,css,twitter-bootstrap,css3,twitter-bootstrap-3
I have a a page as following that works fine in big screens but in small screens the mainsection overlap the footer. How can I have the footer always at the bottom of the page. Also in small screens the location of the footer should be based on content of...

css disappears on the click of a button


javascript,jquery,html,css,css3
I got a countdown timer that starts working on click of a button. i tried to apply css to it, but when i click on the start button the css disappears. can anyone tell how i can retain my css the whole time here is my code @fiddle $('#startClock').click(function() {...

CSS: How to flow text around both left and right images


css,css3
I know float:left will allow text to flow around an image floated on the left. And float:right will allow text to flow around an image floated on the right. Is there a way to flow text around both a left and right image? ...

Prevent bootstrap 3 tab from stacking when window is resized (made smaller)


html5,css3,twitter-bootstrap-3
I have two tabs and I do not want them to stack when the window is resized. How do I do so? As shown below this is the code I've used to create my tabs. I don't understand why they would stack up when my window is resized. HTML Tab...

Setting overflow: scroll on a table with display: flex


html,css,css3,overflow,flexbox
I have a table with the display: flex property, whose cells will be centered vertically. When there are more cells than the table can show, the overflow: scroll property doesn't take the top ones into account. In the sample code below, the scroll stops at the letter K when it...

boostrap & Normalize.css: spacing problems


html5,twitter-bootstrap,css3
Boostrap normalize does not seem to remove top and left/right spacing from theme i am developing. Could somebody give hint where is the problem in my code. I have tried several reset css files also without any effects. Index <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- GOOGLE FONTS -->...

How to position div which contains font-awesome icons to centre of another div?


jquery,html,css,css3
I'm trying to position div which contains font-awesome icons to centre of another div but i cannot make it in the right way. I have following code: HTML: <div id="menuRightSide" > <div class="rightSideMenuItem"> <div class="fa fa-facebook fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div> </div> <div class="rightSideMenuItem"> <div class="fa fa-twitter fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div>...

Round edges on shorter side in CSS [duplicate]


css,css3,css-shapes
This question already has an answer here: Border-radius in percentage (%) and pixels (px) 1 answer I want to make my text input have rounded edges on the shorter side, which is vertical side. The effect I need looks like this: If I use border-radius: 50%;, which makes corders...

Setting up the page grid using push and pull


html,twitter-bootstrap,css3,twitter-bootstrap-3
I'm using Bootstrap and I'm having issues setting up my grid. How do I use bootstrap's push/pull to setup my columns as below? This is what I've got so far, <div class="row"> <div class="col-xs-5 col-sm-3 col-md-3">A</div> <div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div> <div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div> </div> ...

Pure Css transition slide down panel not working


html,css,css3
Im trying to make slideDown Menu on hover.So on hovering HButton3 i want to extend the height of AccomodationPanel so that the buttons inside it display becasue the extend but nothing happens on hover it looks like its something in the position of the elements HTML : <asp:Panel runat="server" ID="Header"...

CSS drop down navigation


css,html5,css3,drop-down-menu,navigation
I'm sure this is something simple I'm missing... My drop down menu is opening within the main navigation, widening it. Here is a link to the page I'm working on. The issue is with the navigation below the App buttons. http://membershq.incentiveusa.com/AwardPages/GoalUp_Test2/index_test3.html# Here is my HTML: <div class="container-fluid"> <div class="section-title2 text-center">...

Swap nav and div vertically uing CSS only


html,css,html5,css3
So I have a <nav> in my <header> tag and just below it I have a <div> which shows the date. Now the problem is, my design is in such a way that I cannot put the <div> for the date inside my <header>. However since I'm working with a...

CSS Image Background - Same Scale Across Different Devices


html,css,css3
I'm trying to create a website with possible multiple fluid background sections that are consistent in scale between mobile, tablet and desktop (including different resolutions). The background is to stay in the centre to cover the whole area and appears in the same scale across all device types. Things I...

how to use .load(function() { on a large function


javascript,jquery,ajax,css3
I have 5 pretty large CSS3 / jQuery chain animations within a web page, these occur at 5 subpages, when the user navigates to each individual (5) subpages.. I would like to use / have the effect of jQuery's $( img ).load(function() { // Run code }); Except I only...

drop down menu toggle does not work


jquery,html,css,css3
So I am trying to create a dropdown menu using jQuery and I have tried several things. I tried using .hover(), .click(), and mouseenter() for the user's action, but nothing seems to work. I even tried toggle() and slideDown() for the event but nothing shows up on the screen when...

How to properly position divs for overlay hover effect with text underneath


html,css,css3
I have two rows of 4-boxed divs. The goal is to have a header within each box, and then hovering over the box will present more detailed p text with a faded background. I'm close, I just can't figure out how to actually layer the span overlay on top of...

customize the handler of input range


css,html5,css3
When we use input range <input type="range", there is a handler which is moveable as how we handle it. Now I need a help how to customize this handle, in this case I want to change the default handler with my own handler(image of button). Thanks for the help <input...

CSS :hover that shows more than one image


html,css,css3
I have an icon on my website. I want to change the icon to 4 different images when ever I hover over the first one. So I know how to switch between the regilar image to yellow0.png, but how do I continue to the next one (after half a second...

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds


html,css,css3
I want to apply css3 gradient (left and right transparent) background color for a TR element like below. Below code is working fine if it has only one TD element, where as more than one td, background gradient started repeating for each td... Am I missing something? Online Demo CSS...

Add CSS3 transitions to jQuery Animate script


javascript,jquery,html,css,css3
Below I have a script that loads images in a random order and flies them onto the screen beside each other. You can find the script here: https://jsfiddle.net/38e126f4/ I would now like to be able to add different random CSS3 transition effects to each image as they fly onto the...

CSS Background horizontal centering


html,css,css3,center
I have an image as background with the following CSS setup #background { background-image: url('../img/bgimage.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; opacity: 0.8; filter:alpha(opacity=80); top:0; } My aim was to center the background ( add a little opacity ), but still have its beginning at the top of the page....

CSS3 Columns children with margin issue w// Chrome


javascript,jquery,html,css,css3
http://dev.metertech.co.uk/technologies/patents-and-licensing On the page above you can see that the second column is pushed down a little from the top. On a page resize the issue corrects itself. All other pages, even those with the same number of <p> tags for the .content render the columns correctly. I have no...

Dynamic font-size according to device


css,css3
Small question, for which I can't find any answer. Is there a way to do this? I have 3 elements with different sizes. One with 30px, other with 22px and other with 16px. Now, when using a tablet to check this elements, they go off limits since I need to...

Two div side by side in one container css


css,css3
I want to have two div side by side in one container: the first is an image (the width is fixed but the code should be applied for different images with different widths) . The second will take the rest of the container. .conteiner { position: relative; } .image{ display:...

Click on link next link should be display on same page


javascript,php,jquery,html,css3
I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...

Div Text's Color Changes when Printed


html,css,css3,media-queries,media
I have a div with white text color. Using css media queries. @media print { .myid_print_duo_name { z-index: 2; position: absolute; left: 0px; top: 330px; width: 303px; height: 28px; line-height: 28px; text-align: center; color: white !important; font-weight: bold; font-size: 20px; font-family: "Times New Roman"; } } My text looks like...

Using CSS :after to shade a button:hover


css,css3,button
I'm trying to add a bunch of different color classes to my buttons and allow additional classes to be added arbitrarily. All of these should darken on hover. It seems tedious to write button.(color):hover rules for every single color, so I've written this such that the :after section gets darker...

CSS Nav Menu Fade Out OFF Hover


html,css,css3,navbar
Still learning as I go with CSS styling, and I want to implement a fade-in/fade-out navigation menu. Reading up, I was able to code a fade in on hover successfully to the effect that I want. Now I'm being challenged logically and can't seem to come up with how to...

jQuery & CSS only load after many refreshes


jquery,css,html5,internet-explorer,internet-explorer-11
If you open this page in IE11, the CSS and jQuery don't load: http://javasmart.gooberdev.com/ If you refresh the page once, maybe even twice, it still doesn't load. But if you hit F5 a bunch of times in succession, the CSS and jQuery finally load and the page displays correctly. This...

How to make my nav bar responsive


html5,css3,media-queries
I would like to use media query to make my navbar responsive. @media screen and (max-width: 600px) { .nav-wrap { position: relative; min-height: 40px; } .nav-wrap ul { position: absolute; } .nav-wrap li { display: none; /* hide all <li> items */ margin: 0; } .nav-wrap .current_page_item { display: block;...

How to avoid wrap in IE7 when I have two ul in a navigation?


html,css,css3,internet-explorer,internet-explorer-7
In ie8 or firefox browser,My code runs well,the two ul are in the same line.But when I ie7,the two ul are in the diffrent line,How to make then in the same line in ie7? <DIV id='navigation'> <ul><li><span> leftspan </span></li></ul> <ul style='float:right;'> <li><span> leftspan </span></li> <li><a href="http://www.google.com" target="_blank">google</a></li> <li><a href="http://www.apple.com" target="_blank">apple</a></li>...

Smooth mouse-out animation


css,css3,css-transitions,css-animations
I have a diamond shaped div that spins 360 degrees around its own axis on hover by using CSS animation. I can't work it out how to ensure smooth going back to the original state when not hovering anymore? So far it "jumps" when the diamond is in the middle...

Animate removal of list items with css


css,angularjs,css3,animation,css-animations
I have made the animation of a showing/hiding a list of messages. See this plunk. But how can I adapt it to also make an animation when a message is removed from the list? My css: .messages-active.messages { max-height: 50px; } .messages { -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition:...

Colour overlay on hover


css3,hover,overlay,css-transforms
I'm playing with a self developed theme on my blog. I've got a grid of images that click through to a particular category. I'm having a problems trying to create a hover effect over the images. I think probably because of the way I've used the link (absolutely positioning it,...

css3 animation text repeatly


css,css3,css-animations,keyframe
I am beginner of css3 animation. I want to rotate the text continuously. I tried, this is my fiddle location. https://jsfiddle.net/v3jds98d/ span { font-size:30px; position:absolute; top:40%; text-align:center; width:100%; left:0; color: transparent; opacity:0; -webkit-animation: textanimation 3s ; -moz-animation: textanimation 3s ; -ms-animation: textanimation 3s ; animation: textanimation 3s ; } .animation_text1...

Delayed CSS3 modal window fade in


css3,css-animations
I have a modal window that I'm trying to have appear after about 7 seconds, with a close button so users can close it if they want to. I got it to close when you click the close button with this code: .tip { z-index: 99999; -webkit-transition: opacity 400ms ease-in;...

Flexbox in Chrome doesn't seem to respect 'aspect ratio' padding; fine in Firefox


css,css3,flexbox
I have a containing row that contains up to three divs. Each child div either has a background image, or just some text. As the image divs are using background-image and have no defined width/height, they have an aspect ratio set using the aspect ratio padding method (using pseudo-elements in...

CSS Container Wrap shaped Polygons


css3,polygon,css-shapes
How can I build the white/green Container (shaped Polygons) with CSS / CSS3 ? ...

compilation errors in sass with 2 instances of @media (max width / min) [duplicate]


css,css3,sass,compass
This question already has an answer here: Compass wont generate cause an “invisible” error 1 answer When writing the below under just as is, one in-between width media call on top of another in SASS I get a compilation error - error says 'Invalid CSS after "TCY": expected selector,...

how to align column to the right?


angularjs,css3,twitter-bootstrap-3
I am getting my head around twitter bootstrap 3 and specifically the column setup. I got a 2 columns on the same line: <!--datetime row--> <div> <div class="col-md-6 form-group"> <label for="">Title:</label> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li...

Fit an image inside a div that also has a title?


html,css,css3
Here's my fiddle Here's my HTML: <div class="block"> <h2>Title</h2> <img src="http://icons.iconarchive.com/icons/martz90/circle/512/camera-icon.png" /> </div> I'm trying to have an image inside my block. I want to size the image so that it fits inside the block fully. I've tried with height 100% but the title of the block is not taken...

How do you make a div only extend in one direction when the outer container size increases?


javascript,html,css,css3,layout
I'm trying to make a a page container with a navigation bar on the left (inside of the container). When the outer page is wider than the container, I would like just the navigation bar to extend left up to a certain size while the rest of the container's contents...