HTML Position Problem in Firefox (funktioniert in IE und Chrome)

Ich habe den folgenden Code. Wenn ich die Maus über den "CODE" fahre, sollte das Div auf Position 100 X100 erscheinen. Es funktioniert gut in IE und Chrome; das div wird jedoch nicht an die gewünschte Position in Firefox verschoben. Was muss geändert werden, damit es funktioniert?HTML Position Problem in Firefox (funktioniert in IE und Chrome)

Hinweis: Ich verwende den folgenden Code für die Positionierung des div

$('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

--complete-Code -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 

<title>Test</title> 

<style type="text/css"> 

    .tooltip 

    { 

     background-color: Orange; 

     position: absolute; 

     border-style: solid; 

     border-width: 2px; 

     border-bottom: solid 2px black; 

    } 

</style> 

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 

<script type="text/javascript"> 





    function showDiv(batchId, vendorId) { 



     tooltip.style.display = "block"; 

     batch.innerHTML = batchId; 

     vendor.innerHTML = vendorId; 

     $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" }) 

    } 



</script> 

</head> 

<body> 

<div> 

    <div> 

     <table cellspacing="0" rules="all" border="1" id="MainContent_grdTooltip" style="border-collapse: collapse;"> 

      <tr> 

       <th scope="col">MainID</th> 

       <th scope="col">SecondID</th> 

       <th scope="col">CODE</th> 

      </tr> 

      <tr> 

       <td>101</td> 

       <td>999999991</td> 

       <td onmouseover="showDiv(101,999999991)">55789</td> 

      </tr> 

     </table> 

    </div> 

    <div id="tooltip" class="tooltip"> 

     <table> 

      <tr> 

       <td>Main Id:</td> 

       <td id="batch"></td> 

      </tr> 

      <tr> 

       <td>Second Id:</td> 

       <td id="vendor"></td> 

      </tr> 

     </table> 

    </div> 

</div> 

</body> 

</html>

Quelle

2012-04-11 Lijo

Verwenden Sie [jsfiddle.net] (http://jsfiddle.net/) für Beispiele wie folgt. Es ist gut für Sie, einen Proof of Concept zu erstellen und einfacher für diejenigen, die versuchen, Ihr Problem zu verstehen. Sobald Sie "speichern", können Sie einen Link einfügen. –

Hier ist ein jsfiddle, die Ihren Code demonstriert.

http://jsfiddle.net/6GaEA/1/

Das Problem (nach Firebug) liegt in Ihrem Skript. Sie verweisen auf eine Variable 'Tooltip', die nicht definiert ist. Chrome und IE scheinen diesen Fehler zu verschlucken und fortzufahren, während Firefox sich verschluckt und stirbt. diese

Änderung:

function showDiv(batchId, vendorId) { 

    tooltip.style.display = "block"; 

    batch.innerHTML = batchId; 

    vendor.innerHTML = vendorId; 

    $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" }) 

}

dazu:

function showDiv(batchId, vendorId) { 

    $('#tooltip').css('display',"block"); 

    $('#batch').html(batchId); 

    $('#vendor').html(vendorId); 

    $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" }) 

}

edit: Ich bin mir bewusst, dass die jQuery CSS-Funktion auf $ ("# Tooltip") genannt wird zweimal. Ich habe versucht, den gleichen Fluss des Codes so viel wie möglich zu halten :)

Quelle

2012-04-11 19:04:58

Danke, es hat funktioniert – Lijo

Könnten Sie bitte antworten http://StackOverflow.com/Questions/10138108/html-css-flow-layout-issue? – Lijo

Könnten Sie bitte antworten http://stackoverflow.com/questions/10141148/css-two-column-div-layout-misaligns-when-zoom-changes – Lijo

Um "absolute" Arbeit als Position für Ihr Element, Eltern-Element zu machen Die Position muss relativ oder absolut sein. Das ist in Ihrem Fall hinzufügen css "Position: relativ" zu TD, die onmouseover Ereignis hat.

Quelle

2012-04-11 17:21:29 Dima

Position: absolut; bezieht sich auf den ersten Elternteil, der eine andere Position als statisch hat (relativ oder absolut, nicht sicher über die Interaktion mit einem festen Elternteil und einem absoluten Kind). Wenn kein Elternteil gefunden wird, wird das Element relativ zum Ansichtsfenster positioniert. Sein Code funktioniert also, wenn er im Ansichtsfenster positioniert werden soll. –

Ich denke, es sollte nicht in Ansichtsfenster positioniert werden, da es sich um einen Tooltip für ein UI-Element handelt. – Dima

das ist wahrscheinlich wahr. Es gibt jquery-Bibliotheken und andere Hilfsmittel, um sie relativ zu einem bestimmten Element zu positionieren. http://craigsworks.com/projects/qtip2/ ist ein ziemlich gutes Tooltip. –

jQuery CSS-Methode sollte auf diese Weise verwendet werden:

$("#something").css(propertyName,value);

und seine besseren Events in Ihrer Skripte auf diese Weise zu behandeln:

$("#something").mouseover(function() { 
    $("#tooltip").css("display","block"); 
    });

und zur Positionierung eines Elements absolut sollte seine Eltern sein relativ positioniert.

Quelle

2012-04-11 17:31:58 undefined

Lijos Verwendung von .css() ist gültig. Sie können mehrere Stileigenschaften gleichzeitig festlegen. Aber ja, die codierte Ereignisbindung ist besser als die deklarative. –

versuchen auf diese Weise

   <script type="text/javascript"> 
      function showDiv(batchId, vendorId) { 
       document.getElementById('tooltip').style.display = "block"; 
       document.getElementById('batch').innerHTML = batchId; 
       // batch.innerHTML = batchId; 
       document.getElementById('vendor').innerHTML = vendorId; 
       //vendor.innerHTML = vendorId; 
      } 

     </script>

Quelle

2012-04-11 17:49:10 srini

HTML Position Problem in Firefox (funktioniert in IE und Chrome)

Antwort

Verwandte Themen