IE Problem - CSS "background-color" schneidet Layer ab

[mocca]

moin moin,

habe schon mal gesucht, aber bisher nichts passendes gefunden. Vielleicht ist dieses Problem ja bekannt und schon oft diskutiert worden, dann entschuldigt bitte.

Habe folgendes Problem - Bei Darstellung im IE wird beim rollover Effekt (a:hover mit der Eigenschaft "background-color") die komplette ebene in der sich der link befindet auf dessen höhe abgeschnitten. Verzichtet man auf diese Eigenschaft, tritt der Fehler nicht auf.

Zur besseren Verständlichkeit hier der link:

http://www.moccascenes.de/hover_test/index.html
http://www.moccascenes.de/hover_test/styles.css

Hier das css:
***********

body, html {
 font-family: Arial, sans-serif;
 font-size: 11px;
 margin: 0px;
}
#rahmen {
 width: 700px;
 position: absolute;
 top: 0px;
 left: 20px;
}
#content {
 position: relative;
 width: 100%;
 background-color: #FFFFFF;
 top: 0px;
 margin-bottom: 20px;
 padding-top: 15px;
 padding-right: 15px;
 padding-bottom: 25px;
 padding-left: 15px;
 border: 1px solid #999999;
}
#box {
 position:relative;
 min-height: 170px;
 width: 700px;
 margin-bottom: 15px;
 border: 1px solid #999999;
}
#box img {
 float: left;
 border: 1px solid #999999;
}
a:hover {
 font-weight: bold;
 color: #FFFFFF;
 text-decoration: none;
 background-color: #999999;
}
a {
 font-weight: bold;
 color:#FF33CC;
 text-decoration: none;
}

***********

Bei den verlinkten Dateien handelt es sich um einen Auszug der gesammten Site, er soll lediglich die Problematik verdeutlichen. Um die einzelnen Layer besser voneinander zu unterscheiden habe ich ihnen einen rahmen gegeben. Dabei zeigt sich auch, dass der abstand vom "img", bzw. #box zum unteren Rand von #content viel zu groß dargestellt wird. Hierbei könnte es sich um den "Box-Modell-Fehler des Internet Explorers" handeln – ich bekomme das jedoch auch nicht gelöst.

Die beiden genannten Fehler werden in sämtlichen, von mir getesteten browsern korrekt dargestellt, sogar auf dem mac, nur der Win IE macht Probleme.

Für ein paar Anregungen wäre ich euch sehr dankbar.

grüße, mocca

[Anuschka]

hallo mocca,

versuch mal bei #box:
 height: 188px;

bei mir geht das jetzt.

Anuschka

Irgendwelche Erfahrungen mit typo3? Siehe mein Posting.

[Moinzen]

versuch mal bei #box:
height: 188px;

bei mir geht das jetzt.

Anuschka

Vielen Dank, habe den Fehler zwar ganz wo anders vermutet, aber es klappt und das ist das Wichtigste, Danke.

grüße, mocca

[mocca]

hallo,

wie 2 posts weiter oben zu sehen ist besteht das Problem weiterhin - weiß denn keiner, wie man das lösen könnte

grüße, mocca

[Zeromancer]

Hallo mocca,

im Vorfeld: Wozu brauchst du eigentlich die absolute/relative Positionierung? M.E. ist die völlig unnötig und u.U. fehlerbehaftet.

a:hover {
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #999999;
}
a {
font-weight: bold;
color:#FF33CC;
text-decoration: none;
}

warum nicht

  
  
a {  
 font-weight: bold;  
 color:#FF33CC;  
 text-decoration: none;  
}  
  
a:hover {  
 color: #FFFFFF;  
 background-color: #999999;  
}  

Pseudoformate bei W3C: Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

Pseudo-Formate: Um die meist gewünschte Darstellung dieser Pseudoklassen zu erreichen, müssen Sie bei der Notierung die Reihenfolge des Beispiels einhalten:

:link = für Verweise zu noch nicht besuchten Seiten
:visited = für Verweise zu bereits besuchten Seiten
:focus = für Verweise, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)
:hover = für Verweise, während der Anwender mit der Maus darüber fährt (CSS 2.0)
:active = für gerade angeklickte Verweise

Mit freundlichen Grüßen,
André

[mocca]

Hallo André

im Vorfeld: Wozu brauchst du eigentlich die absolute/relative Positionierung? M.E. ist die völlig unnötig und u.U. fehlerbehaftet.

Kann sein und du magst sicher recht haben ... leider hat er mir ohne meist alles auf dem mac verzogen, aber ich werde versuchen, ob es auch ohne geht.

warum nicht

a {
font-weight: bold;
color:#FF33CC;
text-decoration: none;
}

a:hover {
color: #FFFFFF;
background-color: #999999;
}

Du hast vollkommen recht, ich vergesse das immer, bzw. bin noch neu auf dem Gebiet CSS.

Das eigentliche Problem hat sich ja scheinbar durch änderung von min-height in height gelöst, jedoch nur für den IE, in FF ist dann ein überlauf nicht möglich, da die ebene ja beschränkt ist, siehe links:

http://www.moccascenes.de/hover_test/index.html
http://www.moccascenes.de/hover_test/styles.css

Der Text soll immer innerhalb des grünen Bereiches sein. Hat irgendjmd. eine Lösung?

[Zeromancer]

Hallo mocca,

Das eigentliche Problem hat sich ja scheinbar durch änderung von min-height in height gelöst, jedoch nur für den IE, in FF ist dann ein überlauf nicht möglich, da die ebene ja beschränkt ist, siehe links:

http://www.moccascenes.de/hover_test/index.html
http://www.moccascenes.de/hover_test/styles.css

Der Text soll immer innerhalb des grünen Bereiches sein. Hat irgendjmd. eine Lösung?

Kann dir noch nicht ganz folgen. Suchst du vielleicht overflow?

Mit freundlichen Grüßen,
André

[mocca]

Hallo André,

Also nochmal, jetzt schneidet er die Ebene nicht mehr ab im IE, allerdings läuft der Text über die Ebene hinaus, was ja auch nicht beabsichtigt ist, deshalb ja zuvor "min-height".

overflow bringt hier glaub ich nichts, denn damit kann ich es nur abschneiden, scrollen, oder eben überlaufen lassen, so wie es ja eh ist.

mein wunsch - der text läuft innerhalb des grünen layer und IE schneidet den layer nicht ab, bei a:hover mit background farbe. ;) eigentlich ganz einfach ... aber es will einfach nicht.

grüße mocca