4. css problem

css problem

  • K

    hallo !

    eine einfache Frage:
    läßt sich die height-Eigenschaft von <div> nicht auf 0px setzen ? Wenn man nämliche die css-Eigenschaft height per Javascript ändert und sie anschließend abfragt, kommt schon das richtige raus(also 0px). Optisch sind es aber immer so cca.10px, wieso ? 😞

    vielen Dank
    LG

    0
  • H

    Theoretisch sollte es möglich sein...

    Schau doch mal unter http.//www.teamone.de/selfhtml nach...

    0
  • H

    Du musst den Rand auch noch auf 0px stellen, sowie margin usw.

    0
  • K

    Hallo Loggy und vielen Dank, aber irgendwie klappt es mit dem Margin auch nicht... was soll das eigentlich genau bewirken ? Abstand oben unten links und rechts ... also ich habe das mit margin: 0px 0px 0px 0px; und auch andere Zahlen natürlich z.B. margin-bottom mit 150px etc., wobei ich die height-Eigentschaft und line-height-Eigenschaft beibehalten habe. Da ist der ursprüngliche Code:

    <div id="rect" style="position:absolute;top:0px;left:0px;line-height:0px;width:0px;height:0px;background:none;border:1px solid red;visibility:hidden">
</div>

    Also wenn man sich folgende Beispiel im Browser anschaut, kommt man schon auf das Problem... wenn ich das Viereck nach rechts und links bewege klappts alles, d.h. die width-Eigenschaft wird auf 0px reduziert; von oben nach unten (und umgekehrt) behält das div-Objekt seine height-Eigenschaft (so cca. 15 px) und dadurch kommt es dazu, dass die Events nicht richtig funktionieren...
    Achtung: onLoad im body könnte Browser nicht verkraften, daher ist es im Code dick hervorgehoben (muss ergänzt werden)

    <html>
    <head>
    <title></title>
    <meta name="author" content="Katti">
    <meta name="generator" content="Microsoft FrontPage 4.0">
    <script language="JavaScript1.2">

    /* Events definieren */
    var N = new Boolean();
    var posX = 0;
    var posY = 0;
    //Randwerte
    var mapTop = 0;
    var mapLeft = 0;
    var mapWidth = 0;
    var mapHeight = 0;

    N = document.all ? false : true //ermitteln, welcher Browser

    function convertNumber(expr) { //entfernt eine Zeichenkette; bei dem 1. Buchstabe f() verlassen
    var temp = expr;
    for(var i = 0; i < expr.length; i++) {
    if(expr.charCodeAt(i) < 48 || expr.charCodeAt(i) > 57) {
    temp = expr.substr(0, i);
    break;
    }
    }
    return Number(temp);
    }

    function registry() {
    r = document.getElementById("rect");
    m = document.getElementById("map");
    if(r && m) {
    if(N) {
    m.addEventListener("mousedown", myMouseDown, true);
    } else {
    m.attachEvent("onmousedown", myMouseDown);
    }
    }
    //Randwerte der Landkarte ermitteln
    mapTop = convertNumber(m.style.top);
    mapLeft = convertNumber(m.style.left);
    mapWidth = convertNumber(m.style.width);
    mapHeight = convertNumber(m.style.height);
    }
    /* Events definieren */

    /* MouseDown - Position der Tabelle festlegen */
    function myMouseDown(e) {
    if(N) {
    document.addEventListener("mousemove", docMouseMove, true);
    document.addEventListener("mouseup", docMouseUp, true);
    posX = e.pageX;
    posY = e.pageY;
    // return true;
    } else {
    document.attachEvent("onmousemove", docMouseMove);
    document.attachEvent("onmouseup", docMouseUp);
    e = event;
    posX = e.clientX;
    posY = e.clientY;
    }
    }

    function docMouseMove(e) {
    r = document.getElementById("rect");
    r.style.visibility = "visible";
    coordX = 0;
    coordY = 0;
    if(N) {
    coordX = e.pageX;
    coordY = e.pageY;
    } else { //IE
    e = event;
    coordX = e.clientX;
    coordY = e.clientY;
    }

    if(coordX >= posX && coordY >= posY) { //ok
    r.style.left = posX;
    r.style.top = posY;
    r.style.width = coordX - posX;
    r.style.height = coordY - posY;
    } else if(coordX <= posX && coordY >= posY) { //ok
    r.style.left = coordX;
    r.style.top = posY;
    r.style.width = posX - coordX;
    r.style.height = coordY - posY;
    } else if(coordX >= posX && coordY < posY) { //ok
    r.style.left = posX;
    r.style.top = coordY;
    r.style.width = coordX - posX;
    r.style.height = posY - coordY;
    } else if(coordX < posX && coordY <= posY) { //ok
    r.style.left = coordX;
    r.style.top = coordY;
    r.style.width = posX - coordX;
    r.style.height = posY - coordY;
    }

    //Randwerte berücksichtigen
    if(e.clientX > mapWidth+mapLeft) r.style.width = mapWidth+mapLeft-posX;
    if(e.clientX < mapLeft) {r.style.width = posX-mapLeft; r.style.left = m.style.left;}
    if(e.clientY > mapHeight+mapTop) r.style.height = mapHeight+mapLeft-posY;
    if(e.clientY < mapTop) {r.style.height = posY-mapTop; r.style.top = m.style.top;}
    }

    function docMouseUp(e) {
    r = document.getElementById("rect");
    r.style.visibility = "hidden";
    if(N) {
    document.removeEventListener("mousemove", docMouseMove, true);
    } else {
    document.detachEvent("onmousemove", docMouseMove);
    }
    r.style.top = 0;
    r.style.left= 0;
    r.style.height=0;
    r.style.width=0;
    }
    </script>

    </head>

    //da gehört onLoad hin
    <body onoad="registry()" text="#000000" bgcolor="#FFFFFF">
    <div id="map" style="position:absolute;top:50px;left:50px;height:200px;width:200px;background:none;border:2px solid red;cursor:crosshair">
    <!--<input name="mapobj" type="image" action="#" src="planet.jpg">-->
    </div>

    <div id="rect" style="position:absolute;top:0px;left:0px;line-height:0px;height:0px;width:0px;background:none;border:1px solid red;visibility:hidden">
    </div>

    </body>
    </html>

    Ich habe schon in Erfahrung gebracht, dass es möglicherweise an der line-height liegen mag, habe ich sie aber auch schon nullgesetzt...

    Bin css-Profis 😉 für eventuelle Lösungen sehr dankbar.

    0
  • ?

    Hallo,

    ich bin ganz zufällig drauf gekommen... div möchte immer ein Kommentar haben, aber tatsächlich, sonst wie Platz für Buchstaben irgendwie reserviert. Also folgendes:

    <div id="rect" style="position:absolute;top:0px;left:0px;height:0px;width:0px;background:none;border:1px solid black">
<!--das hier muss da sein-->
</div>
    0
  • ?

    benutz halt statt den div tag den span tag

    0
  • ?

    ja mit span gehts auch, wollte aber schon draufkommen, wieso das mit div nicht geht. Komisch ist nur, dass das jetzt mit IE hängen bleibt, mit Mozilla aber funktioniert ... obwohl alle Events IE zuliebe registriert und deregistriert werden.

    0
Anmelden zum Antworten