Databases
StackOverflow2013
Postsdbo
POInternet Explorer Mouseenter possible bug
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POInternet Explorer Mouseenter possible bug
    primarykey
    data
    text
    <p>I am currently at a loss with this particular bit of HTML/CSS problem. I have a carousel that has two absolutely positioned li elements on each side to allow for navigation (previous image/ and next image). These two li elements show up correctly in all browsers other than all versions of IE (7-9), however, in IE the li elements are shown behind the main element, even if I give them a z-index.</p> <p>I am probably missing something as it was the end of the day and I was very tired, but I cannot seem to figure out why this is.</p> <p><strong><em>What makes this problem even weirder is that the li elements display correctly if I give them a background! As soon as I give them a background-color, they appear in front of the element</em></strong></p> <p>I suspect it may be a bug with IE as it is rare for me to fail to debug a CSS file, however, as I said, I was pretty tired.</p> <p><strong>Please ignore the opacity values and display values, these are altered with jQuery. They are completely irrelevant.</strong></p> <p><strong>HTML:</strong></p> <pre><code>&lt;header id="carousel"&gt; &lt;div id="carousel-holder"&gt; &lt;div id="carousel-canvas" style="width: 2364px; "&gt; &lt;figure id="more-business" class=""&gt; &lt;img&gt; &lt;/figure&gt; &lt;figure id="more-money" class="active"&gt; &lt;img&gt; &lt;/figure&gt; &lt;/div&gt; &lt;/div&gt; &lt;nav&gt; &lt;ul id="arrow-nav"&gt; &lt;li id="carousel-arrow-previous"&gt;&lt;a href="#previous" title="Previous" class="sprite"&gt;Previous&lt;/a&gt;&lt;/li&gt; &lt;li id="carousel-arrow-next"&gt;&lt;a href="#next" title="Next" class="sprite"&gt;Next&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/header&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>header#carousel {position:relative;width:790px;height:275px;margin:10px auto 0;padding:0;overflow:hidden;} header#carousel div#carousel-holder {width:788px;height:250px;background:#fff;border:1px solid #999;border-radius:10px;margin:auto;padding:0;overflow:hidden;} header#carousel div#carousel-canvas {position:static;height:250px;} header#carousel div#carousel-canvas figure {display:block;position:static;float:left;width:788px;height:250px;border-radius:10px;margin:0;padding:0;overflow:hidden;} header#carousel div#carousel-canvas figure img {width:788px;height:250px;} header#carousel nav ul#arrow-nav {position:absolute;top:1px;left:1px;width:788px;height:250px;padding:0;margin:0;list-style-type:none;} header#carousel nav ul#arrow-nav li {position:absolute;display:block;width:200px;height:250px;z-index:10;} header#carousel nav ul#arrow-nav li#carousel-arrow-previous {top:0;left:0;} header#carousel nav ul#arrow-nav li#carousel-arrow-next {top:0;right:0;} header#carousel nav ul#arrow-nav li a {position:absolute;top:50%;margin-top:-35px;display:none;width:50px;height:70px;overflow:hidden;opacity:0;text-indent:-1000px;} header#carousel nav ul#arrow-nav li#carousel-arrow-previous a {left:20px;background-position:-95px -156px;} header#carousel nav ul#arrow-nav li#carousel-arrow-next a {right:20px;background-position:-153px -156px;} </code></pre> <p><strong>EDIT</strong></p> <p>I meant to say 'li' not 'div'</p> <p><strong>UPDATE</strong></p> <p>It seems that the problem may not be with HTML/CSS as I have managed to determine that the element is being displayed at the front of the page. The problem seems to be occuring with jQuery. The 'mouseenter' function appears not to fire when I move my mouse ove the element. Is this a known bug in jQuery?</p> <p><strong>SOLUTION</strong></p> <p>I have figured out what the problem is. It is to do with the 'hasLayout' of the elements I have mentioned. Because they have a transparent background, the jQuery event is not captured when I place my mouse over them. The solution to this is to set a transparent background with an image.</p> <p>Please refer to: <a href="https://stackoverflow.com/questions/7799459/mouseenter-only-fired-on-border-of-transparent-div-in-ie9">Mouseenter only fired on border of transparent div in IE9</a></p> <p>Thank you for all your advice, and sorry to waste your time.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USBen Carey
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POInternet Explorer Mouseenter possible bug
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POInternet Explorer Mouseenter possible bug
      1. USelgreg
      1. VTFavorite
    1. COJust a note: Minifying the CSS (or JS) relevant to your question makes it difficult to follow along. Please de-minify code so it is easily readable when posting a question.
      singulars
      1. POInternet Explorer Mouseenter possible bug
      1. USJared Farrish
    2. COAlso, this: `header#carousel nav ul#arrow-nav li#carousel-arrow-previous` can simply be `#carousel-arrow-previous` if you are using `id` attributes correctly. You don't need a full selector to select a single instance of an element.
      singulars
      1. POInternet Explorer Mouseenter possible bug
      1. USJared Farrish
    3. COThanks @JaredFarrish, I am aware that my code can be minified further and it is quite compressed as it is. However, this is just how I like to write my code, it is just what I am used to and familiar with. Everyone has their own way. :-)
      singulars
      1. POInternet Explorer Mouseenter possible bug
      1. USBen Carey
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload