[CSS] Invertierter IE-Bug?

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [CSS] Invertierter IE-Bug?

    Komisch, hab statt ner Post-Bestätigung nur ne weiße Seite angezeigt bekommen, und wenn ich den Thread aufrufe, ist auch alles nur weiß. Bitte entschuldigt das Doppel-Posten.


    Also, Ich habe da einen Header der aus einem DIV mit einer Tabelle drin besteht. Die Tabelle hat nur eine Zeile und eine Spalte und ist nur da um mir die Möglichkeit des vertical-align zu geben.

    Code:
    <div id="header">
    	<table border="0" cellspacing="0" cellpadding="0"><tr><td><h1>Tapetenblog</h1>Straight from the sixties</td></tr></table>
    </div>
    Das Header DIV soll 807 Pixel breit und 174 hoch sein. Das Tabellenfeld genauso. Zusätzlich hat das Tabellenfeld noch ein padding von 23 (Uh ja!) Pixeln:

    Code:
    #header {
    	background: url('images/header.gif') no-repeat;
    	width: 807px;
    	height: 174px;
    }
    
    #header table tr td {
    	width: 807px;
    	height: 174px;
    	padding: 23px;
    	text-align: right;
    	vertical-align: bottom;
    }
    Jetzt habe ich das komische Problem dass er es im FF perfekt anzeigt, im IE aber noch das Padding mit auf die Height schlägt. Ich dachte, wenn, sollte es umgekehrt laufen. Es wundert mich auch dass er an der width nichts ändert (sieht in beiden Browsern gleich aus).

    Nun gut, ich hab mal den Tantek-Hack versucht:

    Code:
    #header {
    	background: url('images/header.gif') no-repeat;
    	width: 807px;
    	height: 174px;
    }
    
    #header table tr td {
    	width: 807px;
    	height: 128px;
    	padding: 23px;
    	text-align: right;
    	vertical-align: bottom;
    
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	height: 174px;
    }
    
    body>#header table tr td {
    	height: 174px;
    }
    ...dann sieht es im FF wider normal (richtig) aus (Table und DIV sind Bündig) und im IE wieder verkackt (genau 46 (=2x23px padding) zu hoch).

    Hm...

    Luke

  • #2
    entscheide dich bei #header table mal für eine(!) höhenangabe

    gruß
    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      Hm? Ist doch 174px! Bzw, 128px+2*23px=174px

      Kommentar


      • #4
        PHP-Code:
        #header table tr td {
            
        width807px;
            
        height128px;
            
        padding23px;
            
        text-alignright;
            
        vertical-alignbottom;
            
        voice-family"\"}\"";
            
        voice-family:inherit;
            
        height174px;

        und jetzt zähl mal, wie oft da height vorkommt.

        peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          2 mal, aber meines wissens werden 'normale' Browser nur die letzte Eigenschaft lesen, während der IE an der stelle bei voice-family: "\"}\""; denkt es sei zu ende und die erste Höhenangebe benutzt. Tantek-Hack

          Kommentar


          • #6
            upsi, übersehen. sorry. also der ie zählt das das padding zur höhe hinzu. ff und opera nicht. tipp, arbeite mit conditional comments und leg die ie-eigenarten in eine separate css-datei. da brauchst die ganzen hacks nicht.

            du könntest ggf. bei td mit display: block arbeiten, kann ich aber nicht zu sagen, da ich seit jahren nicht mehr mit layout-tabellen arbeite.

            gruß
            peter
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              Original geschrieben von Kropff
              also der ie zählt das das padding zur höhe hinzu. ff und opera nicht.
              Nö, umgekehrt.


              Und der IE macht es falsch, wenn er sich im Quirks Mode befindet.
              I don't believe in rebirth. Actually, I never did in my whole lives.

              Kommentar


              • #8
                Ja gut, 'gefixt' hab ich's jetzt indem ich dem DIV das padding gegeben hab, da funktioniert auch der Tantek-Hack

                Kommentar


                • #9
                  Original geschrieben von wahsaga
                  Nö, umgekehrt.
                  Und der IE macht es falsch, wenn er sich im Quirks Mode befindet.
                  Nö umgekehrt.

                  habs per screenshot getestet. im ff und opera liegt die höhe bei 128px, im ie 6 und 7 bei 174px. (xhtml 1.0 trans.)

                  PHP-Code:
                  #header table tr td 
                  {
                      
                  width807px;
                      
                  height128px;
                      
                  padding23px;
                      
                  text-alignright;
                      
                  vertical-alignbottom;
                      
                  background-color#f00;

                  peter
                  Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                  Meine Seite

                  Kommentar


                  • #10
                    Original geschrieben von Kropff
                    Nö umgekehrt.

                    habs per screenshot getestet. im ff und opera liegt die höhe bei 128px, im ie 6 und 7 bei 174px. (xhtml 1.0 trans.)
                    Da mag eventuell ein Spezialfall vorliegen, weil du es auf eine Tabellenzelle anwendest - noch zusätzliche Formatierungen, Default-Formatierungen für Tabellenelemente, was weiss ich.

                    Aber normalerweise wird padding zur width/height dazuaddiert.
                    I don't believe in rebirth. Actually, I never did in my whole lives.

                    Kommentar


                    • #11
                      Aber normalerweise wird padding zur width/height dazuaddiert.
                      OffTopic:
                      weiss ich. aber hier nicht


                      peter
                      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                      Meine Seite

                      Kommentar

                      Lädt...
                      X