none
Edge Rendering Issues on hover of a submit button RRS feed

  • Question

  • I wrote the following code and it runs fine in other browsers but Edge. For instance IE shows the URL of the button when you hover over it but it is on the right hand side and does not overlap the button. Chrome does not show the URL at all which means it does not overlap. But Edge causes the button to show its URL over the area were the button is located causing it at best to flicker back and forth and at worst to not allow you click the button. I noticed this rendering issue while writing code for a class.

    Here is a link to the site I built on my host I get the same behavior on local host just with a different URL in the way.
    http://www.prog109.healthsonictools.com/html/Groccerie.html

    Here is the code with my documentation of failed attempts removed to make it more simplified to look at.

    HTML Code

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta name="description" content="Groccerie List">
      <meta charset="utf-8">
      <title>JavaScript &amp; jQuery - Chapter 5: Document Object Model - Add Element</title>
    	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.0.min.js"></script>
    	
      <link rel="stylesheet" href="../css/Groccerie.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    
    <body>
      <div id="page">
        <h1 id="header">List</h1>
        <h2>Buy groceries</h2>
        <ul id="todo">
          <li id="one" class="hot"><em>fresh</em> figs</li>
          <li id="two" class="hot">pine nuts</li>
          <li id="three" class="hot">honey</li>
          <li id="four">balsamic vinegar</li>
        </ul>
      </div>
      <script src="js/add-element.js"></script>
    	<form>
    		 Grocery Item:<br>
         <input type="text" name="grocerie" id="grocerieItem"><br />
    		 <input type="submit" value="Submit" id="submit">
    	</form>
    	<script type="text/javascript" src="../js/Groccerie.js"></script> 
    </body>
    
    </html>

    CSS Code

    @import url(http://fonts.googleapis.com/css?family=Oswald);
    
    body {
    	background-color: #000;
    	font-family: 'Oswald', 'Futura', sans-serif;
    	margin: 0; 
    	padding: 0;}
    
    #page {
    	background-color: #403c3b;
    	margin: 0 auto 0 auto;}
    	/* Responsive page rules at bottom of style sheet */
    
    h1 {
    	background-image: url(http://javascriptbook.com/code/c05/images/kinglogo.png);
    	background-repeat: no-repeat;
    	background- center;
    	text-align: center;
    	text-indent: -1000%;
    	height: 75px;
    	line-height: 75px;
    	width: 117px;
    	margin: 0 auto 0 auto;
    	padding: 30px 10px 20px 10px;}
    
    h2 {
    	color: #fff;
    	font-size: 24px;
    	font-weight: normal;
    	text-align: center;
    	text-transform: uppercase;
    	letter-spacing: .2em;
    	margin: 0 0 23px 0;}
    
    h2 span {
    	border-radius: 50%;
    	background-color: #000;
    	font-size: 10px;
      text-align: center;
      display: inline-block;
      ;
      top: -5px;
      height: 18px;
      width: 20px;
      margin-left: 5px;
      padding: 4px 0 0 4px;}
    
    ul {
    	background-color: #584f4d;
    	border:none;
    	padding: 0;
    	margin: 0;}
    
    li {
    	background-color: #ec8b68;
    	color: #fff;
    	border-top: 1px solid #fe9772;
    	border-bottom: 1px solid #9f593f;
    	font-size: 24px;
    	letter-spacing: .05em;
    	list-style-type: none;
    	text-shadow: 2px 2px 1px #9f593f;
    	height: 50px;
    	padding-left: 1em;
    	padding-top: 10px;}
    
    .hot {
    	background-color: #d7666b;
    	color: #fff;
    	text-shadow: 2px 2px 1px #914141;
    	border-top: 1px solid #e99295;
    	border-bottom: 1px solid #914141;}
    
    .cool {
    	background-color: #6cc0ac;
    	color: #fff;
    	text-shadow: 2px 2px 1px #3b6a5e;
    	border-top: 1px solid #7ee0c9;
    	border-bottom: 1px solid #3b6a5e;}
    
    .complete {
      background-color: #999;
    	color: #fff;
    	background-image: url("http://javascriptbook.com/code/c05/images/icon-trash.png");
    	background-, right;
    	background-repeat: no-repeat;
    	border-top: 1px solid #666;
    	text-shadow: 2px 2px 1px #333;}
    
    li a {
    	color: #fff;
    	text-decoration: none;
    	background-image: url("http://javascriptbook.com/code/c05/images/icon-link.png");
    	background-, right;
    	background-repeat: no-repeat;
        padding-right: 36px;}
    
    p {
    	color: #403c3b; 
    	background-color: #fff;
    	border-radius: 5px;
    	text-align: center;
    	padding: 10px;
    	margin: 20px auto 20px auto;
    	min-width: 20%; 
    	max-width: 80%; }
    
    #scriptResults {
    	padding-bottom: 10px;}
    
    /* Small screen - acts like the app would */
    @media only screen and (max-width: 500px) {
        body {
            background-color: #584f4d;
        }
        #page {
            max-width: 480px;
        }
    }
    @media only screen and (min-width: 501px) and (max-width: 767px) {
        #page {
            max-width: 480px;
            margin: 20px auto 20px auto;
        }
    }
    @media only screen and (min-width: 768px) and (max-width: 959px) {
        #page {
            max-width: 480px;
            margin: 20px auto 20px auto;
        }
    }
    /* Larger screens act like a demo for the app */
    @media only screen and (min-width: 960px) {
        #page {
            max-width: 480px;
            margin: 20px auto 20px auto;
       	}
    }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
        h1{
            background-image: url(http://javascriptbook.com/code/c05/img/2xkinglogo.png);
            background-size: 72px 72px;
        }
    }

    JS Code

    // Create a new element and store it in a variable.
    var newEl = document.createElement('li');
    
    // Create a text node and store it in a variable.
    var newGrocerie = document.createTextNode('quinoa');
    
    //Adds list items dynamically using jQuery
    $('#submit').click (function( event ) {
    	var newGrocerie = $('#grocerieItem').val(); 
    	$('ul').append('<li>' + newGrocerie + '</li>');
    	event.preventDefault();
    });
    
    // Attach the new text node to the new element.
    newEl.appendChild(newGrocerie);
    
    // Find the position where the new element should be added.
    var position = document.getElementsByTagName('ul')[0];
    
    // Insert the new element into its position.
    position.appendChild(newEl);
    Before Hover

    After Hover
    • Edited by reigh7 Monday, February 29, 2016 9:54 AM
    Monday, February 29, 2016 9:50 AM

All replies

  • Hi reigh7,

    I use Edge open the site, it runs fine.

    Best Regards,

    Chris

    Tuesday, March 1, 2016 6:22 AM
    Moderator
  • Seems like for your device and/or screen the URL is showing up on the bottom but it still shows. For my device and screen size a laptop with a ~13" screen the URL stays over the submit button even when I scroll. I can try loading it from a machine at school tomorrow.

    For a consistent user experience I would be nice to eliminate the URL on hover from showing at all and getting in the way. That is how it renders in other browsers. Is there a way to tell the Edge browser to do that?

    Tuesday, March 1, 2016 11:26 AM