Aufklappbare Menüs, Ansicht Firefox & IE
am 14.11.2008 - 17:19 Uhr in
Hallo zusammen,
ich bin mir jetzt nicht ganz sicher ob es eigentlich ne reine CSS Frage ist oder ob es doch etwas mit dem Drupal Core zu tun hat. Ich habe derzeit ein Darstellungsproblem mit den standard Menüs (aufklappbar) von Drupal, was die Ansicht im IE betrifft.
Hier die erste, richtige Variante aus dem Firefox ! Man sieht, dass die einzelnen div´s einen korrekten Hintergrund haben und dass die zusammengeklappten Menüs mit einer durchgezogenen Linie dargestellt werden
Hier die IE Variante. Der Hintergrund läuft aus dem div nach oben raus und die Linien der zusammengeklappten Menüs sind verschwunden.
Der CSS Code ist recht unspektakulär und ich kann da keinen Fehler finden:
fieldset.collapsible{
background-color: #7B8A94;
border: #000 solid 1px;
}
fieldset.collapsed{
background: none;
}
legend a{
color: #fff;
font-weight: bold;
text-decoration: none;
}
Kann mir da jemand behilflich sein?
Viele Grüße Fuxxz
- Anmelden oder Registrieren um Kommentare zu schreiben
Conditional Tags -> ie.css
am 15.11.2008 - 02:11 Uhr
Linke ueber Conditional Tags auf eine eine CSS Datei fuer den IE und erstelle fuer den IE entsprechende Formatierungen.
PS
In den meisten Themes ist bereits auf eine ie.css per Conditional Tag gelinkt.
-------------
quiptime
Nur tote Fische schwimmen mit dem Strom.
Danke für deine Antwort,
am 15.11.2008 - 02:32 Uhr
Danke für deine Antwort, ich benutze das zen theme und ich glaube da ist so ein verweis schon integriert, aber ich weiß es nicht genau!
Wie binde ich denn dann diese "Conditional Tags" ein?
Ìch weiß zudem leider nicht welche alternativen Formatierungen ich vornehmen muss um dieses Problem zu beseitigen ! :(
CSS lernen
am 15.11.2008 - 11:27 Uhr
Wie binde ich denn dann diese "Conditional Tags" ein?
Diese Tags sind die Conditionaltags
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Additional IE/Win specific style sheet (Conditional Comments) -->
<!--[if IE]>
<style type="text/css" media="all">@import "/sites/all/modules/jstools/tabs/ie.css";</style>
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="DBox RSS" href="http://dbox.quiptime.com/rss.xml" />
Der Tag:
<!--[if IE]> <![endif]-->
Du musst die fuer den IE bestimmten CSS Formatierungen einfach in der Datei "ie.css" eintragen.
Ìch weiß zudem leider nicht welche alternativen Formatierungen ich vornehmen muss um dieses Problem zu beseitigen
Da wirst Du Dich in das Thema HTML mittels CSS formatieren einarbeiten muessen.
Guter Ansatzpunkt ist www.css4you.de
PS
Google bietet ausreichend Infos zum Einlesen in das Thema Conditional Tags.
-------------
quiptime
Nur tote Fische schwimmen mit dem Strom.
Aufklappbare Menüs, Ansicht Firefox & IE - Lösung
am 15.11.2008 - 12:17 Uhr
Sehe Dir mit dem Firebug mal den Bereich des Fieldset an.
Dann wirst Du erkennen das sich der IE mit der Hintergrundfarbe korrekt verhält und der Firefox logisch.
Lösung
Da sich im Fieldset ein Div "fieldset-wrapper" befindet das den gesamten Fieldset-Inhalt hält könnte man dieses Div an Stelle des Fieldset mit Hintergrundfarbe versehen.
Bei diesem Div "fieldset-wrapper" endet aber die Oberkante bereits unterhalb des Fieldset-Label und ist deswegen nicht in Übereinstimmung mit der Oberkante des Fieldset.
Um dies zu lösen könnte man das Div "fieldset-wrapper" mit margin in Kombi mit padding korrigierend positionieren. Etwa so:
.fieldset-wrapper {
margin-top:-10px;
padding-top:10px;
background-color: #7B8A94;
}
PS
Vermutlich kann man mit dieser Loesung auf eine extra CSS Formatierung für den IE verzichten.
-------------
quiptime
Nur tote Fische schwimmen mit dem Strom.
Hallo quiptime, danke für
am 15.11.2008 - 15:43 Uhr
Hallo quiptime, danke für deine Antworten,
ich habe jetzt versucht das Ganze umzusetzen, die Ansätze scheinen richtig zu sein aber die praxis sieht wieder anders aus :(
Zum Thema Conditionaltags, so benutze ich das Zen-Theme und da habe ich in der page.tpl diesen IF Verweis auf die ie.css gefunden. Auch wenn dort jeder Befehl mit einem Unterstrich deaktiviert ist.
Zu dem Thema mit dem fieldset, so bin ich deinen Anweisungen gefolgt, das Ergebnis ist folgendes :(
Firefox:
Sobald ich die Paddings einsetze, erscheint im zugeklappten Zustand ein grauer Balken (scheint wohl der fieldset-wrapper in miniatur zu sein ;), der verschwindet sobald man die Menüs einmal aufgeklappt und wieder geschlossen hat...mhhh
Außerdem interpretiert entweder der Firefox oder der IE das margin top falsch, wie man sieht, fehlen hier ca. 5px (muss man das dann mit der ie.css lösen ? In allen anderen Bereichen passen die margins ja auch für beide Browser, daher ist das irgendwie komisch)
IE7
Dort gibt es wohl nur noch ein Ebenen Problem, der Wrapper legt sich jetzt wohl übers fieldset und verdeckt so den Inhalt
fieldset{
border: #000 solid 1px;
}
fieldset.collapsible .fieldset-wrapper{
background: #7B8A94;
margin: -7px -6px -6px -6px;
padding: 7px 7px 7px 7px;
}
fieldset.collapsible{
position: relative;
}
fieldset.collapsed{
background: none;
}
In dieser Situation ist man in Teufels CSS Kueche angekommen.
am 15.11.2008 - 17:23 Uhr
In meinem FF sehe ich das was Du im IE siehst. Das Feldset-Label wird vom Feldset-Hintergrund "verdeckt". Nun kann man dem Feldset-Label
<legend class="collapse-processed">
noch einen Hintergrund geben.Um es aber optisch ansprechend zu loesen muss man wohl das Feldset-Label
<legend class="collapse-processed">
so weit nach oben nehmen das es nicht (nach unten) in das Feldset hineinragt. Damit gibt es keine Ueberschneidungen mehr. In dem Zusammenhang muesste man auch das kleine Dreieck des Label in seiner Position korrigieren - was aber ein nicht loesbares Problem ist das es ebenfalls vom Hintergrung des<div class="fieldset-wrapper">
verdeckt wird.In dieser Situation ist man in Teufels CSS Kueche angekommen.
Ich denke es ist am einfachsten auf das margin und padding bei fieldset.collapsible .fieldset-wrapper zu verzichten. Dadurch umgeht man alle Schwulitaeten mit dem Feldset-Label und dem kleinen BG-Image-Dreieck.
-------------
quiptime
Nur tote Fische schwimmen mit dem Strom.
FuXXz schrieb Zum Thema
am 15.11.2008 - 17:50 Uhr
Zum Thema Conditionaltags, so benutze ich das Zen-Theme und da habe ich in der page.tpl diesen IF Verweis auf die ie.css gefunden. Auch wenn dort jeder Befehl mit einem Unterstrich deaktiviert ist.
Der Unterstrich ist ein Hack für IE 5/6. Im Gegensatz zu den anderen Browsern interpretieren diese Attribute mit einem _ und so kann man damit spezielle Anweisungen für den IE 5/6 schreiben. Der IE 7 nimmt die 'normalen' Anweisungen aus der ie.css
vg
--
md - DrupalCenter
mdwp* :: Drupal Services
puhh jetzt weiß ich gar nix
am 15.11.2008 - 18:24 Uhr
puhh jetzt weiß ich gar nix mehr! du siehst im FF das was ich im IE sehe? Wie ist das denn möglich ? Ich nutze FF 3.0.4...glaube aber nicht daß dies eine große Rolle spielt
Zum Kernproblem, irgendwie muss mann das doch lösen können, es kann ja nicht sein daß es auf der ganzen Welt keine Internetseite gibt mit Hintergrund im div :D
Im Drupal Admin Bereich sind ja alle Menüs nach dem Prinzip aufgebaut und da geht es ja auch, zumindest mit einer Verlaufsgrafik im oberen Bereich (Garland Theme).
Lösung
am 16.11.2008 - 16:56 Uhr
Ich weiß nicht ob es euch Interessiert, weil es ja euch alle betrifft :)
Jeder von euch hat ja diesesn unschönen Effekt im IE7 :(
Ich habe jetzt einfach folgendes getan:
Und trotzdem nochmal vielen Danke für eure Mühe
Gruß Fuxxz