Opera Bug: div + height + Prozent Angabe?

[Phil]

Hi zusammen!

ich glaub ich bin momentan auf Bug Jagd... Nachdem mir gestern ein Bug in Mozilla aufgefallen ist (ein kleiner, nicht überschriebenes margin bei Stylesheet wechsel) bin ich jetzt auf nen Opera Bug gestoßen, der mich schon wundert bzw. sogar ärgert:

Ich habe ein <div> welches per CSS formatiert wird, un zwar u.a. mit height: 85%;

#InnerContent {
 z-index: 2;
 background-color: #6699CC;
 background-image: url("../../gfx/style_style2/bg.gif");
 background-repeat: no-repeat;
 padding: 10px;
 width: 100%;
 height: 85%;
 font-size: 0.9em;
 border: 1px solid #F7F1E7;
}

Soweit alles wunderbar, stellt Opera + Mozilla und sogar der IE richtig da. Und jetzt der (wunderliche) Bug:

In diesem Div sind Links. Und sobald ich mit einer Maus über nen Link geh (sprich a:hover wird aktiviert) Verkleinert sich das div auf schätzungsweise 20px...

Interessant dabei: Die Links, die sich eigentlich _innerhalb_ des Divs befinden, bleiben an Ihrer Position.

Hier mal die Formatierung der Links, ich poste mal alles, falls nicht a:hover Schuld ist.

a:link {
 font-family: Verdana, Arial, Helvetiva, Sans-Serif;
 font-size: 0.9em;
 text-decoration: none;
 border-bottom: 1px solid #F7F1E7;
 color: #F7F1E7;
}

a:active {
 font-family: Verdana, Arial, Helvetiva, Sans-Serif;
 font-size: 0.9em;
 text-decoration: none;
 border-bottom: 1px solid #F7F1E7;
 color: #F7F1E7;
}

a:visited {
 font-family: Verdana, Arial, Helvetiva, Sans-Serif;
 font-size: 0.9em;
 text-decoration: none;
 border-bottom: 1px solid #F7F1E7;
 color: #F7F1E7;
}

a:hover {
 font-family: Verdana, Arial, Helvetiva, Sans-Serif;
 font-size: 0.9em;
 text-decoration: none;
 border-bottom: none;
 color: #F7F1E7;
}

Hat jemand ne Idee, was ich falsch gemacht hab (Falls es kein Bug ist) oder, kennt jemand nen Workaround?

Bin für jeden Tip dankbar ;-)

Gruß

Phil

[nag]

Hallo,

Bin für jeden Tip dankbar ;-)

Du solltest deinen Fragen auch genügend Informationen mitgeben.

ich sehe:
http://www.stud.uni-giessen.de/~su6690/selfhtml/soso.html

mfg NAG

[Phil]

Hi,

sorry,

so wie das aussieht, soll es natürlich nicht aussehen?

also das komplette Stylesheet findest du unter http://www.claudiakunze.net/self/clk-style2.css.
Das Stylesheet mit dazugehörigem HTML findest du unter http://www.claudiakunze.net/self

Wenn dir dazu was einfällt, immer her damit ;-)

Aber bitte nich meckern, is noch sehr frühes Entwicklungsstadium außerdem fehlen die Grafiken ;-)

Danke schonmal :o)

Gruß

Phil

[Thomas J.]

Moin

Vier Anmerkungen, aber (wahrscheinlich) keine Problemlösung:

1: Du schreibst
#Content {
position: absolute;
left: 50px;
top: 50px;
width: 100%;
height: 90%;
overflow: visible;
z-index: 0;
}
Damit produzierst Du zwangsläufig horizontale Scrollbalken, denn dieser div ist so breit wie der body + 50px nach rechts verschoben.

Womit wir bei 2: body wären
Ich hab's nicht getestet, aber eventuell hilft die Angabe
html, body {width:100%; height:100%, margin:0; padding:0}.

3: Du schreibst
#InnerContent {
z-index: 2;
...
Die Angabe eines z-index ohne position ist nutzlos.

4: An den Verweisen liegt es sicher nicht. Dieser Effekt tritt nämlich auch auf, wenn man das Browserfenster skaliert. Mit einem anschließenden F5 paßt es dann wieder.

Weiter bin ich noch nicht
Thomas J.

[Phil]

Servus,

1: Du schreibst
#Content {
position: absolute;
left: 50px;
top: 50px;
width: 100%;
height: 90%;
overflow: visible;
z-index: 0;
}
Damit produzierst Du zwangsläufig horizontale Scrollbalken, denn dieser div ist so breit wie der body + 50px nach rechts verschoben.

Ach daher kommen die, dankeschön... :)

Womit wir bei 2: body wären
Ich hab's nicht getestet, aber eventuell hilft die Angabe
html, body {width:100%; height:100%, margin:0; padding:0}.

Wird getestet... moment.... Nö, hilft leider nicht :(

3: Du schreibst
#InnerContent {
z-index: 2;
...
Die Angabe eines z-index ohne position ist nutzlos.

Da hast du recht... Flüchtigkeitsfehler, ist ein anderes Stylesheet, das abgeändert wurde. Im anderen hatten ich nen Layer mit position: absolute;

4: An den Verweisen liegt es sicher nicht. Dieser Effekt tritt nämlich auch auf, wenn man das Browserfenster skaliert. Mit einem anschließenden F5 paßt es dann wieder.

Hmm, stimmt... aber wieso wird es auch durch die Links ausgelöst? beim normalen überfahren passiert nix, erst beim Link...

Weiter bin ich noch nicht

Dann mach mal weiter, so ein Berg Fehler im CSS... meine Güte... ich bin schockiert :o)

Vielen Dank soweit! Hoffentlich findest du noch was!

Gruß

Phil

[Thomas J.]

Moin nochmal

Also, Dein Konstrukt erscheint mir grundsätzlich überarbeitungsbedürftig.

Schau Dir mal den folgenden Ausschnitt an:
#InnerContent {
z-index: 2;
background-color: #6699CC;
background-image: url("../../gfx/style_style2/bg.gif");
background-repeat: no-repeat;
padding: 10px;
width: 100%;
height: 85%;
font-size: 0.9em;
border: 1px solid #F7F1E7;
}

Dieser div ist also genauso breit und 0,85 mal so hoch wie der übergeordnete div, welcher selbst 0,9 mal so hoch ist, wie der body.
Und das ganze garnierst Du dann noch mit 10px padding, die zu den Höhen- und Breitenangaben hinzuaddiert werden. Wäre ich ein Browser, ich würde mich weigern, das auszurechnen.

Was ich damit sagen will, die Vermischung von prozentualen und absoluten Angaben ist immer heikel. Möglicherweise löst das ja dieses seltsame Verhalten aus. Das Problem mit dem padding kannst Du z.B. umgehen, wenn Du anstatt dem #InnerContent dessen Inhalt padding- oder margin-Angaben verpaßt.

Trotzdem bleibt das Verhalten von Opera an dieser Stelle ein Bug. Wie Du das abstellen kannst, wirst Du nur herausfinden, indem Du Schritt für Schritt Dein CSS reduzierst, bis der Fehler nicht mehr auftritt.

Was anderes fällt mir im Moment auch nicht ein.
Thomas J.

[Phil]

Hi,

Dieser div ist also genauso breit und 0,85 mal so hoch wie der übergeordnete div, welcher selbst 0,9 mal so hoch ist, wie der body.
Und das ganze garnierst Du dann noch mit 10px padding, die zu den Höhen- und Breitenangaben hinzuaddiert werden. Wäre ich ein Browser, ich würde mich weigern, das auszurechnen.

An der Stelle möcht ich mal einharken, das ist ein Punkt den ich nie kapiert habe:

Wenn ich einem Element, das sagen wir mal innerhalb eines Elements sitzt, ne höhe von 85% zuweise, kriegt es dann 85% von der Seite oder 85% vom Elternelement?

Ansonsten hast du sicherlich recht, ich will sowieso auch weg von den Tabellen (Die letzten Endes dieses Konstrukt verursacht haben) nur bin ich die mittlerweile so gewohnt! Ich entwöhn mich grad schon von target="_blank" ;-)

Gruß

Phil

[Webblob]

Hi Phil,

Hier mal die Formatierung der Links, ich poste mal alles, falls nicht a:hover Schuld ist.
a:link {
}
a:active {
}
a:visited {
}
a:hover {
}
Hat jemand ne Idee, was ich falsch gemacht hab (Falls es kein Bug ist) oder, kennt jemand nen Workaround?

du solltest unbedingt die richtige Reihenfolge einhalten, und die lautet:

a:link
a:visited
a:hover
a:active

Damit sollte das 'merkwürdige' Verhalten der Browser aufhören.

Kleine Eselsbrücke: "LoVe/HAte"

Gruß Gunther

[Phil]

Hi,

danke für den Tip, hab ich gemacht, LoVe/HAte lässt sich echt gut merken... hat leider nicht geholfen.

Noch ne Idee?

Gruß

Phil