1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

[css] IE "verschluckt" background bei Block-Element

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von natsuki, 06.10.06.

  1. natsuki

    natsuki Boskop

    Dabei seit:
    24.06.05
    Beiträge:
    205
    hi,

    Ich hab ein Problem mit der Darstellung meines Menüs im Internet Explorer.

    Ich habe ein Menü mit einem Untermenü. Menü und Untermenü haben unterschiedliche Hintergründe. Jeweils der 1. Menüpunkt des Menüs oder Untermenüs wird im IE ohne Hintergrund dargestellt. (siehe Fotos / IE und FF zum Vergleich)

    Hier der Code:
    Code:
    .left-menue a:link, .left-menue a:visited {
    display:block;
    color:#f1f1f1;
    font-weight: bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:10px;
    padding-right:10px;
    background:url(menue.jpg);
    background-repeat:repeat;
    text-decoration:none;
    margin-bottom:1px;
    }
    
    .left-menue a:hover, .left-menue a:active {
    display:block;
    color:#b00000;
    font-weight: bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:10px;
    padding-right:10px;
    background:#ECEBEB;
    text-decoration:none;
    margin-bottom:1px;
    }
    
    .left-umenue a:link, .left-umenue a:visited {
    display:block;
    color:#f1f1f1;
    font-weight: bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:20px;
    padding-right:10px;
    background:url(bg.jpg);
    background-repeat:repeat;
    text-decoration:none;
    margin-bottom:1px;
    }
    
    .left-umenue a:hover, .left-umenue a:active {
    display:block;
    color:#b00000;
    font-weight: bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:20px;
    padding-right:10px;
    background:#ECEBEB;
    text-decoration:none;
    margin-bottom:1px;
    }
    
    Ich hoffe es kann mir jemand helfen. :)

    mfg natsuki
     

    Anhänge:

    • ie.jpg
      ie.jpg
      Dateigröße:
      37,1 KB
      Aufrufe:
      159
    • ff.jpg
      ff.jpg
      Dateigröße:
      43,2 KB
      Aufrufe:
      146
  2. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    nicht sehr verbose - hast mal einen Link zur Seite oder den kompletten Code?

    Gruß Stefan
     
  3. natsuki

    natsuki Boskop

    Dabei seit:
    24.06.05
    Beiträge:
    205
    Hier mal der _Link_

    Und hier der komplette CSS-Code. Brauchst du auch den Code von der index Seite?

    Die Linke Navigation befindet sich im Layer .side

    Code:
    .body {
    font-family: verdana;
    font-size: 10pt;
    /*background-color: #cdcdcd;*/
    background: url(bg.jpg);
    background-repeat:repeat;
    }
    
    .bg {
    position: relative;
    width: 900px;
    padding:20px;
    left:50%;
    margin-left:-470px;
    background-color:#FFFFFF;
    }
    
    .header {
    position: relative;
    width: 900px;
    height: 122px;
    margin-top:10px;
    margin-bottom:10px;
    background: url(header.jpg);
    }
    
    .navi {
    font-size: 10pt;
    font-weight: bold;
    color: #f1f1f1;
    position: relative;
    width: 900px;
    /*height: 10px;*/
    padding-top: 5px;
    padding-bottom: 5px;
    /*background-color: #B00000;*/
    background: url(menue.jpg);
    background-repeat:repeat-x;
    }
    
    .navi a:link, .navi a:visited {
    color: #f1f1f1;
    text-decoration: none;
    display: inline;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    }
    
    .navi a:hover, .navi a:active {
    color: #b00000;
    text-decoration: none;
    display: inline;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ECEBEB;
    }
    
    .umenuebg {
    font-size: 8pt;
    color: #b00000;
    position: relative;
    width: 900px;
    height: 22px;
    background-color: #ECEBEB;
    }
    
    .umenuebg a:link, .umenuebg a:visited {
    color: #b00000;
    text-decoration: none;
    }
    
    .umenuebg a:hover, .umenuebg a:active {
    color: #b00000;
    text-decoration: underline;
    }
    
    .umenue {
    font-size: 8pt;
    font-weight: bold;
    color: #b00000;
    position: absolute;
    width: 880px;
    /*height: 5px;*/
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    }
    
    .umenue a:link, .umenue a:visited {
    color: #b00000;
    text-decoration: none;
    }
    
    .umenue a:hover, .umenue a:active {
    color: #b00000;
    text-decoration: underline;
    }
    
    .side {
    font-size: 10pt;
    color: #000000;
    position: relative;
    float:left;
    left:50%;
    margin-left:-450px;
    width: 200px;
    height: 500px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ffffff;
    border-right: 1px solid #b00000;
    }
    
    .left-menue a:link, .left-menue a:visited {
    display:block;
    color:#f1f1f1;
    font-weight: bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:10px;
    padding-right:10px;
    background:url(menue.jpg);
    background-repeat:repeat;
    text-decoration:none;
    margin-bottom:1px;
    }
    
    .left-menue a:hover, .left-menue a:active {
    display:block;
    color:#b00000;
    font-weight: bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:10px;
    padding-right:10px;
    background:#ECEBEB;
    text-decoration:none;
    margin-bottom:1px;
    }
    
    .left-umenue a:link, .left-umenue a:visited {
    display:block;
    color:#f1f1f1;
    font-weight: bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:20px;
    padding-right:10px;
    background:url(bg.jpg);
    background-repeat:repeat;
    text-decoration:none;
    margin-bottom:1px;
    }
    
    .left-umenue a:hover, .left-umenue a:active {
    display:block;
    color:#b00000;
    font-weight: bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:20px;
    padding-right:10px;
    background:#ECEBEB;
    text-decoration:none;
    margin-bottom:1px;
    }
    
    .main {
    color: #000000;
    position: relative;
    overflow:auto;
    width: 670px;
    height: 500px;
    margin-left:230px;
    background-color:#ffffff;
    }
    
    .content {
    color: #000000;
    position: relative;
    width: 625px;
    padding: 10px;
    background-color: #ECEBEB;
    border: 1px dotted #b00000;
    }
    
    .bottom {
    color: #b00000;
    font-size: 9px;
    position: relative;
    width: 900px;
    margin-top:10px;
    background-color: #dedede;
    }
    
    .bottom a:link, .bottom a:visited {
    color: #b00000;
    text-decoration: none;
    }
    
    .bottom a:hover, .bottom a:active {
    color: #b00000;
    text-decoration: underline;
     
  4. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    paßt schon - danke. So ähnlich dachte ich's mir schon ;)

    bau mal das HTML etwas um:
    Code:
    <ul id="toplevel">
      <li><a href="#">Eintrag 1.</a></li> 
      <li><a href="#">Eintrag 2.</a></li>
      <li><a href="#">Eintrag 3.</a>
       <ul class="subebene">
         <li><a href="#">Eintrag 3.1</a></li>
         <li><a href="#">Eintrag 3.2</a></li>
         …
       </ul>
      </li>
      <li><a href="#">Eintrag 4.</a>
       …
    </ul>
    
    gleiches kannst Du nebenbei bemerkt auch für die obere Navigation machen und über das :hover-Pseudo-Element auch gleich noch das JS einsparen.

    Mit dem Konstrukt hast dann a) ein semantisch korrektes HTML und b) eine solide Grundlage um die Formartierung zielsicher zwischen ul.toplevel und ul.sublevel (und den nachfolgenden davon abhängenden li und a) unterzubringen. Im Extrem lassen sich damit sogar Flyout-, bzw. Dropdown-Menüs aufbauen. Für's Konzept siehe auch: http://www.designmeme.com/articles/csspulldownmenu/; praktische Umsetzung z.B. unter: http://www.elsbett.com/de/

    Gruß Stefan
     
  5. natsuki

    natsuki Boskop

    Dabei seit:
    24.06.05
    Beiträge:
    205
    hi,

    sry ich glaub ich habs nicht ganz verstanden.

    Das behebt glaube ich nicht das Problem, dass der Internet Explorer den background jeweils beim 1. Link mit "neuem" Hintergrundbild nicht anzeigt. (siehe Bilder oben)
    Also ich versuchs noch mal zu erklären.

    also der 1. Link sollte auch den roten Hintergrund haben. Wenn ich zB über dem jetzigen 1. Link einen neuen Link einfüge, wird der neue Link ohne background angezeigt und der Link der zuvor an 1. Stelle stand hat den roten Hintergrund.
    Und das ist bei jedem 1. Link, wenn der Hintergrund ein anderer ist.

    Ändert der Code von dir nicht hauptsächlich die Auflistung?
    Ich hab diese Methode noch nie verwendet, also kann ich mich auch irren.

    Ich glaube das Problem liegt irgendwo im CSS.
    Wenn ich zB display:block; rausnehme, hab ich den background überall, aber dann hab ich natürlich nicht den Effekt, des Block-Elements.

    PS: in allen anderen Browsern, die ich probiert habe funktioniert es. IE ist die einzige Ausnahme

    mfg natsuki
     
  6. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    Der Hinweis von stk ist zwar richtig und könnte dir eventuell schon helfen, aber wenn man die Semantik einmal beiseite lässt, sollte es ja, wie Du schon richtigerweise bemängelst, auch im MSIE funktionieren.

    Leider hat dieses Stück Software einige Fehler, unter anderem ist es dem MSIE in bestimmten Zusammenhängen unmöglich die Höhe eines Block-Tags (wie zum Beispiel eines DIVs) richtig zu berechnen, um dann zum Beispiel das Hintergrundbild korrekt zu positionieren.

    Abhilfe (ich hab's bei mir lokal ausprobiert, es sollte Dir also schnell gelingen) ist, dem DIV-Tag eine »konkrete« Höhenangabe zu geben. Hier sollte es ausreichen, der Selektion .left-menu a:link eine Höhe zuzuweisen. Dies kann natürlich auch eine relative Höhenangabe sein, also nicht nur height: 20px; sondern auch height: 1em;. Die genaue Bemessung ist jetzt nur noch Deine Einstellungssache, aber es sei darauf hingewiesen, dass langfristig die Lösung mit einer »Spiegelstrich-Liste«, also mit dem Konstrukt »<ul><li>...</li><li>...</li>...</ul>« die bessere sein dürfte, aber letztlich kommt es ja darauf an, weniger die Technik-Freaks zu beeindrucken, als die Information so rüberzubringen, wie Du Dir das vorstellst.

    Die obige Lösung ist natürlich nur ein Workaround, aber es führt dazu, dass das Hintergrundbild erscheint. Bei den folgenden DIVs »weiß« der MSIE scheinbar über die Höhen besser Bescheid. ;)

    Ich hoffe, das hilft!
     
  7. natsuki

    natsuki Boskop

    Dabei seit:
    24.06.05
    Beiträge:
    205
    Hi,
    Danke, das hat geholfen.

    Zumindest ist das mal ne vorübergehende Lösung, bis ich mich mit einer "Spiegelstrich-Liste" ein bisschen beschäftigt habe.

    Danke
    natsuki
     
    #7 natsuki, 06.10.06
    Zuletzt bearbeitet: 07.10.06
  8. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    Fein:)

    Tipp: Auch bei der Abbildung der Listen hilft eine Angabe der Höhe zum relevanten LI-Tag, sonst verrechnet sich der MSIE ganz fürchterlich.
     

Diese Seite empfehlen