+ css + design (in erster Linie ein Problem mit offsetHeight)

[isam]

hi leute,

also hab ein kniffliges Problem:

ich habe einen großen div-container mit fixen Größenangaben (Höhe ist 390 px), in dem stecken nu 3 neue divs, die alle absolut positioniert sind ... ach ich zeichne es mal

________________________________
|              |     div oben   |
|   div        |________________|
|  gesamt      |                |
|              |                |
|              | div text       |
|              |     um den es  |
|              |       geht     |
|              |                |
|              |                |
|              |                |
|              |                |
|              |                |
|              |________________|
|              |      div unten |
|______________|________________|

Also oben und unten is 40 px hoch, also bleiben für text 310 px. So jetzt is der div text aber bestimmt öfters größer als 290px, weil da kommen die Inhalte rein. Also hab ich dem ein overflow:auto; verpasst, damit gescrollt werden kann.
Als Spielerei (bitte nich schimpfen) hab ich eine JavaScript geschrieben, dass man beim onmouesover eines Buttons dem div overflow:visible; (scrollbar verschwindet) zuweist und ihn hoch und runter verschieben kann:

function movediv (x)
{
  var a = document.getElementById("text").style.top;
  a = a.substr(0,a.indexOf("px")) - 15 * x;
  if (!((x == -1 && a == 55) || ( x == 1 && a + document.getElementById("text").offsetHeight - 325 <= 0)))
    document.getElementById("text").style.top = a+ "px";
}

Das klappt solange ich diese if-abfrage rausnehme, aber diese is dazu da im Fall vom hoch, bzw runterscrollen zu checken ob ich grade ins unendliche scrolle, also für den Fall, dass der Kopf auf seiner Ausgangsposition, bzw das Ende des divs auch am unteren sichtbaren Ende angekommen ist, das Verschieben nicht durchzuführen.

So und darum gehts, IE 6 machts genau wie ich will, Mozi 1.4 und Opera 7.2 nicht. Dabei sollte doch offsetHeight wenn ich es mit getElementById() anspreche nach DOM-Syntax auch bei denen funktionieren oder nicht? Ich find den Fehler nicht, wenn ich den Parameter 325 hingegen weglasse funktionuckelt das in den beiden aber im IE scrollt der KRam halt 325 zu weit hoch! Browserweiche will ich nur einsetzen wenns nich anders geht, weil ich eigentlich alles einheitlich schreiben wollte (das ein aktueller Browser eingesetzt wird setz ich voraus).

Wer kann helfen? Hier noch grad drei links:
http://www.softandlazy.de/me/welcome.html
http://www.softandlazy.de/main/style.css
http://www.softandlazy.de/me/script.js

Btw: Was sagt ihr zum Design? Aber vorsicht außer Startpage und der genannten is nur die
http://www.softandlazy.de/me/me.html aktiv, der Rest is noch Müll!

Und wer kann mir sagen warum Opera die Untermenüs die in Tabellenzeilen untergebracht sind bis zum Ende der Seite ausdehnt? Mozi und IE machen das nich.

So das war recht viel aber spart 2 andere Threads.

Schon mal danke und lasst vorallem hören wie ihr das Design findet, noch bin ich in der Anfangsphase und flexibel was zu ändern.

grüße i.

[wahsaga]

hi,

Btw: Was sagt ihr zum Design?

vor allem zu der abfrage "diese seite verwendet schriftarten, die vorübergehend runtergeladen werden müssen, ja/nein" sage ich kategorisch NEIN.

gruss,
wahsaga

[isam]

hallo,

ich entschuldige mich, und gebe zu dass ich das Kapitel Schriftarten in selfhtml etwas stiefmütterlich angegangen habe.
Hätte aber auch nicht gedacht, dass Garamond eine so außergewöhnliche Schriftart ist.
Aber da hab ich jetzt direkt mal ne Frage die mir weder das Archiv noch selfhtml nach langer Studie beantworten konnte: Wenn ich als Schriftarten nun dies angebe

.g { font-family: Garamond, Verdana, serif }
@font-face {font-family:Garamond; src:url(garamond.eot), url(garamond.pfr);

(wie ichs auch schon aktuell online habe) wird dann dennoch versucht Garamond herunterzuladen wenn es nicht auf dem System ist, obwohl auch andere Schriftarten als Alternativen deklariert sind?
Soll ich @font-face ganz rausschmeißen? Btw, Garamond ist doch eine in Windows implementierte Schriftart oder nicht? Blick bei mir da nich ganz durch.

Und dann vielleicht nochmal, die Sache mit offsetHeight: Habs jetzt mit einer Browserweiche für Opera, Mozi und IE einheitlich hinbekommen, aber woher kommt die unterschiedliche Interpretation? Noch mal zur Erinnerung, während mir IE die wirkliche Höhe des divs mit offsetHeight bestimmt (also sowohl sichtbaren wie auch unsichtbaren Bereich), ziehen mir Mozilla und Opera die sichtbare Höhe von der tatsächlichen ab.

Nochmal die Links:

http://www.softandlazy.de/me/welcome.html
http://www.softandlazy.de/main/style.css
http://www.softandlazy.de/me/script.js

Und lasst euch mal bitte übers Design aus, ihr habt mir schon so viel hier geholfen, da möchte ich auch, dass ihr euch dran erfreuen könnt, bzw. es so gestalten, dass man sich dran freuen kann.

Vielen Dank
i.

[wahsaga]

hi,

.g { font-family: Garamond, Verdana, serif }
@font-face {font-family:Garamond; src:url(garamond.eot), url(garamond.pfr);
(wie ichs auch schon aktuell online habe) wird dann dennoch versucht Garamond herunterzuladen wenn es nicht auf dem System ist, obwohl auch andere Schriftarten als Alternativen deklariert sind?

mein IE zeigt die meldung weiterhin an.

verzichte einfach vollkommen auf die zweite angegebene zeile - wenn ich garamond haben, wird der browser den text damit anzeigen, wenn nicht wird er auf verdana zurückgreifen.

btw: verdana ist eine serifenlose schriftart, deshalb ist die generische alternative "serif" unlogisch - sans-serif wäre wohl passender.

gruss,
wahsaga

[isam]

hallo wahsaga, hallo alle anderen,

verzichte einfach vollkommen auf die zweite angegebene zeile

is gemacht und danke für den Tip. Verdana hab ich jetzt auch nur genommen, weil mir auf anhieb nix anderes einfiel, aber prinzipiell passt ne serif-Schriftart schon besser zum Design denke ich, daher serif, Auch wenn das solange Verdana da steht wahrscheinlich nicht zum tragen kommt.

Mögt ihr jetzt vielleicht mal meine Seite anschauen? Ich hoffe es sind jetzt sonst keine Hürden mehr, die nur auf meinem System nicht zu beobachten sind.

grüße i.