nicht angemeldet
Buttons, Bilder white-space
Hallo,
Ich arbeite an einem CMS Baustein, bei dem in einem Popup-Fenster eine Toolbar aus Buttons dargestellt wird.
Die eigentliche Bar (id="tools") ist ein div mit background-color:buttonface, die Buttons selbst sehen so aus:
<button type="button" title="Löschen">
<img src="pics/remove.gif" alt="Löschen" /> Löschen
</button>
und die entsprechenden Styles so:
#tools {
border-bottom:2px groove buttonface;
background:buttonface;
}
#tools button{
height:24px;
padding:2px;
border-width:1px;
background-color:transparent;
font:menu;
}
#tools button img{
float:left;
margin-right:5px;
}
und das Ergebnis in Firefox so:
Probleme:
- Im IE ist der Text nicht sichtbar, da er unter die Bilder rutscht. Eine feste Breite der Buttons loest das Problem, eine flexible Breite waere mir aber lieber.
- In Gecko sind die Bilder nach dem Oeffnen des Fensters oft erstmal nicht sichtbar und erscheinen erst nach einem Reload.
- Unter der Toolbar befindet sich eine Textarea, die den Rest der Seite einnehmen sollte, zumindest in etwa. Ich habe body und html auf 100% Hoehe gesetzt, die Textarea auf 95%. Im Firefox haut das auch hin, im IE ist sie aber nur ein paar Zentimeter hoch.
Habt Ihr dazu irgendwelche Ideen?
Gruß,
Dieter
-
Hi,
Habt Ihr dazu irgendwelche Ideen?
da das Bild kein strukturelles Element ist, sondern nur der Verschönerung dient, hat es im (X)HTML-Code nichts verloren. Weise ein background-image mit einem entsprechenden padding zu.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hallo Cheatah,
Danke, das mit der Darstellung der Buttons ist jetzt ok.
Bleibt die Sache mit der Textarea. Nochmal zur Erinnerung, body + html haben beide eine Hoehe von 100%, wenn ich die Textarea auf 100% Hoehe setze, ist dennoch sie nie hoeher als durch rows festgelegt. Doctype ist xhtml1.0 transitional.
Gruß,
Dieter
-
Hi,
Bleibt die Sache mit der Textarea. Nochmal zur Erinnerung, body + html haben beide eine Hoehe von 100%, wenn ich die Textarea auf 100% Hoehe setze, ist dennoch sie nie hoeher als durch rows festgelegt. Doctype ist xhtml1.0 transitional.
Ist die textarea Kind von body oder Enkel/Urenkel/Ururenkel...?
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hallo Andreas,
ein Kind, hier ist der gekuerzte Sourcecode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
[...]
<style type="text/css">
body, html {
margin:0;
padding:0;
height:100%;
overflow:hidden; /* die Seite besteht im Prinzip nur aus der schon erwaehnten Toolbar und der Textarea.
Insofern kuemmert sie die Textarea um das Scrollen. */
}#dbBackupSql { /* das ist die Textarea */
height:92%; /* Eigentlich sollte es sein: 100% - 24px (die Hoehe der Toolbar), aber 92% */
/ * sieht zumindest in Firefox ok aus */
width:98%;
border:none;
font-size: 1em;
margin:0;
padding:1%;
}
[...]
</style>
</head><body>
<div id="tools"><!-- hier sind die buttons --></div>
<textarea id="dbBackupSql" cols="10" rows="20">generierter Inhalt</textarea>
[...]
</body>
</html>Gruß,
Dieter
-
Hi,
Very strange. FF und Opera nehmen die Höhe an für die Textarea.
Der IE nimmt die Höhe nur an, wenn diese nicht als Prozentwert gegeben ist (500px funktioniert, 50% nicht).
Die Breite scheint in allen Browsern aus dem cols-Attribut zu stammen.
Ein "display:block;" für die textarea ändert nichts.
Genauere Untersuchung ergibt:
/ * sieht zumindest in Firefox ok aus */
width:98%;width kann nicht akzeptiert werden, da ein parse error auftritt: / * ist falsch, muß /* heißen.
Nach der Korrektur:
Damit nehmen alle 3 die Breite an.
IE weigert sich aber immer noch bei der (prozentualen) Höhe.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hallo MudGuard,
width kann nicht akzeptiert werden, da ein parse error auftritt: / * ist falsch, muß /* heißen.
Das Problem hab ich nicht, die Kommentare waren nur fuer's Posting gedacht, um Copy und Paste zu erleichtern.
IE weigert sich aber immer noch bei der (prozentualen) Höhe.
Du kommst also auch nicht weiter als ich, schade. Ich habe in einem anderen Forum was gelesen, dass es es nur im Quirks-Mode bzw. HTML 4.x funktionieren wuerde, aber eine Loesung hatten die Jungs auch nicht parat. Vielleicht kann man was mit Javascript, inner.height (?) und behaviour basteln. Javascript kann ich im gegebenen Rahmen voraussetzen.
Gruß,
Dieter
-
Hi,
width kann nicht akzeptiert werden, da ein parse error auftritt: / * ist falsch, muß /* heißen.
Das Problem hab ich nicht, die Kommentare waren nur fuer's Posting gedacht, um Copy und Paste zu erleichtern.haben es aber erschwert, weil ich den Syntax-Fehler erstmal nicht gesehen habe, und den erstmal rausfummeln mußte ...
IE weigert sich aber immer noch bei der (prozentualen) Höhe.
Du kommst also auch nicht weiter als ich, schade. Ich habe in einem anderen Forum was gelesen, dass es es nur im Quirks-Mode bzw. HTML 4.x funktionieren wuerde, aber eine Loesung hatten die Jungs auch nicht parat. Vielleicht kann man was mit Javascript, inner.height (?) und behaviour basteln. Javascript kann ich im gegebenen Rahmen voraussetzen.Naja, schlimmstenfalls wäre kein Javascript vorhanden und die textarea eben in der per rows vorgegebenen Höhe. Benutzbar wär sie ja trotzdem ...
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hallo Andreas,
haben es aber erschwert, weil ich den Syntax-Fehler erstmal nicht gesehen habe, und den erstmal rausfummeln mußte ...
Ich bestreue mein Haupt mit Asche (sobald ich auf der Bank war) ;-)
Ich hab das jetzt so geloest:
function resizeTextarea()
{
var areaHeight;
areaHeight = document.all
? (document.body.offsetHeight - 48) + 'px'
: (window.innerHeight - 48) + 'px';
document.getElementById('dbBackupSql').style.height = areaHeight;
}window.onload = resizeTextarea;
window.onresize = resizeTextarea;Vielen Dank an Cheatah und Dich!
Gruß,
Dieter
-
-
-
-
-
-
-