firefox will nicht so wie IE..warum?

[heatseeker]

Hey Folks,

Mache gerade Ferienarbeit...
Die haben da son Kalenderscript umgeschrieben, leider sieht das jetzt ziemlich scheisse aus...
Ich soll das fixen.

Folgende Seite:
http://www.uplus.de/kalender.html


Im Firefox dehnen sich die Zellen nicht nach unten aus.
Ich bin leider kein CSS-Profi...


Habt ihr ne Idee wie man das ändern kann?


Hier mal das Stylesheet:

body, td, dl, ul, li, menu, blockquote, input, textarea, select, option, h1, h2, h3, h4, p, table {
    font-family :  Tahoma, Arial, Helvetica;

    FONT-SIZE: x-small;

}


h1 { font-size: 200%; }
h2 { font-size: 175%; }
h3 { font-size: 150%; }
h4 { font-size: 125%; }

TD
{
    BACKGROUND-COLOR: transparent;
}

BODY
{
        BACKGROUND-COLOR: transparent;
}


.tagzahl    { font-size: 11pt; BACKGROUND-COLOR: transparent;}
.lfdtag     { font-size:  8pt;  color: Gray; TEXT-ALIGN: right; FONT-WEIGHT: normal; BACKGROUND-COLOR: transparent; padding-top:2px;}


.monat      { font-size: 150%;
              COLOR:  Gray;
              font-family :  Tahoma, Arial, Helvetica;
              font-weight: bold;  }

.fett       { font-size: 140%;
              COLOR: #000000;
              font-family :  Tahoma, Arial, Helvetica;
              font-weight: bold;  }


.liste
{
    BACKGROUND-COLOR: #FFFFFF;
    COLOR: #000000;
    FONT-FAMILY:  Tahoma, Arial, Helvetica;
    FONT-SIZE: 100%;
    TEXT-ALIGN: left;
}

.listeueber
{
    BACKGROUND-COLOR: #FFFFFF;
    COLOR: #000000;
    FONT-FAMILY:  Tahoma, Arial, Helvetica;
    FONT-SIZE: 125%;
    FONT-WEIGHT: bold;
    TEXT-ALIGN: center;
}

.wotagname
{
    COLOR:  Gray;
    FONT-SIZE: 100%;
    FONT-WEIGHT: bold;
    TEXT-ALIGN: center;
}

.wotagMo
{
        BACKGROUND-COLOR: #ffffff;
        COLOR: #000000;
        FONT-FAMILY:  Tahoma, Arial, Helvetica;
        TEXT-ALIGN: left;
        text-decoration : none;
		  line-height:10px;
		  FONT-SIZE: 8pt;
}
.wotagDi
{
        BACKGROUND-COLOR: #ffffff;
        COLOR: #000000;
        FONT-FAMILY:  Tahoma, Arial, Helvetica;
        TEXT-ALIGN: left;
        text-decoration : none;
		  line-height:10px;
		  FONT-SIZE: 8pt;
}
.wotagMi
{
        BACKGROUND-COLOR: #ffffff;
        COLOR: #000000;
        FONT-FAMILY:  Tahoma, Arial, Helvetica;
        TEXT-ALIGN: left;
        text-decoration : none;
 		  line-height:10px;
		  FONT-SIZE: 8pt;
}
.wotagDo
{
        BACKGROUND-COLOR: #ffffff;
        COLOR: #000000;
        FONT-FAMILY:  Tahoma, Arial, Helvetica;
        TEXT-ALIGN: left;
        text-decoration : none;
		  line-height:10px;
		  FONT-SIZE: 8pt;
}
.wotagFr
{
        BACKGROUND-COLOR: #ffffff;
        COLOR: #000000;
        FONT-FAMILY:  Tahoma, Arial, Helvetica;
        TEXT-ALIGN: left;
        text-decoration : none;
		  line-height:10px;
		  FONT-SIZE: 8pt;
}

.wotagSa
{
    BACKGROUND-COLOR: #FFF0F0;
    COLOR: #ff0000;
    FONT-FAMILY:  Tahoma, Arial, Helvetica;
    text-decoration : none;
    TEXT-ALIGN: left;
    line-height:10px;
	 FONT-SIZE: 8pt;
}

.wotagSo
{
    BACKGROUND-COLOR: #FFF0F0;
    COLOR: #ff0000;
    FONT-FAMILY:  Tahoma, Arial, Helvetica;
    TEXT-ALIGN: left;
    text-decoration : none;
	 line-height:10px;
	 FONT-SIZE: 8pt;
}

.wotagFrei
{
    BACKGROUND-COLOR: #FFF0F0;
    COLOR: #ff0000;
    FONT-FAMILY:  Tahoma, Arial, Helvetica;
    TEXT-ALIGN: left;
    text-decoration : none;
	 line-height:10px;
	 FONT-SIZE: 8pt;
}



.anderermon
{
    BACKGROUND-COLOR: #e1e1e1;
    COLOR: #999999;
	 FONT-SIZE: 8pt;
    FONT-FAMILY:  Tahoma, Arial, Helvetica;
    TEXT-ALIGN: left;
    text-decoration : none;
	 line-height:10px;
}



.textFrei
{
    COLOR: #ff0000;
    FONT-FAMILY:  Tahoma, Arial, Helvetica;
    TEXT-ALIGN: left;
    FONT-SIZE: 8pt;
    text-decoration : none;
	 overflow:hidden;
}

.textArbeit
{
    COLOR: #000000;
    FONT-FAMILY:  Tahoma, Arial, Helvetica;
    TEXT-ALIGN: left;
    FONT-SIZE: 8pt;
    text-decoration : none;
	 overflow:hidden;
}

.terminkommt
{
    COLOR: #FF0000;
}

.terminwar
{
    text-decoration: line-through;
}



.heute
{
        border : 1px solid Red;
}


.grau
{
    BACKGROUND-COLOR: #e1e1e1;
    COLOR: #000000;
    FONT-FAMILY:  Tahoma, Arial, Helvetica;
    TEXT-ALIGN: left;
    FONT-WEIGHT: bold;
    text-decoration : none;
}

.gruen
{
    BACKGROUND-COLOR: #CAFFE4;
    COLOR: #000000;
    FONT-FAMILY:  Tahoma, Arial, Helvetica;
    TEXT-ALIGN: left;
    FONT-WEIGHT: bold;
    text-decoration : none;
}


.showterminlink {
	color: black;
	text-decoration: none;
	
}

.large    { font-size: 125%; font-weight: bold; }
.normal   { font-size: 100%; font-weight: bold; }
.small    { font-size: 75%; }
.footnote { font-size: 70%; color: Gray; }



.mkmonat { line-height:75%; text-align:left;  width:25px; font-size: 75%; color:#000000; background-color:#FFFFFF; font-weight: bold; }
.mk0     { line-height:75%; text-align:right; width:12px; font-size: 75%; color:#000000; background-color:#FFFFFF; }
.mk1     { line-height:75%; text-align:right; width:12px; font-size: 75%; color:#000000; background-color:#FFFFFF; }
.mk2     { line-height:75%; text-align:right; width:12px; font-size: 75%; color:#000000; background-color:#FFFFFF; }
.mk3     { line-height:75%; text-align:right; width:12px; font-size: 75%; color:#000000; background-color:#FFFFFF; }
.mk4     { line-height:75%; text-align:right; width:12px; font-size: 75%; color:#000000; background-color:#FFFFFF; }
.mk5     { line-height:75%; text-align:right; width:12px; font-size: 75%; color:#FF0000; background-color:#FFF0F0; }
.mk6     { line-height:75%; text-align:right; width:12px; font-size: 75%; color:#FF0000; background-color:#FFF0F0; }
.mkact   { line-height:75%; text-align:right; width:12px; font-size: 75%; color:#000000; background-color:#FFFFFF; border : 1px solid #999999}
.mkgrey  { line-height:75%; text-align:right; width:12px; font-size: 75%; color:#999999; background-color:#e1e1e1; }
.hr      { border-width: 1px; border-style: solid; border-color: #cc0000; }

Grüße

Danny

[akratellio]

hallo heatseeker,

kann es sein, dass du eine höhe für td definiert hast?
weg damit...

mfg

akratellio

[Adromir]

Also als Erste Schritte würde ich folgendes Vorschlagen:

1. Quelltext auf Basis dieser Validationsresultate Nachbearbeiten:
http://validator.w3.org/check?verbos.../kalender.html

2. Benutz den Transitional- Doctype mit URL. Da sind die Unterschiede zwischen IE und FF am geringsten..

3. Schmeiß alle Proprietären Tags und Attribute wie z.B. Border und width raus und löse es über CSS

Als kleiner Tipp für das Schreiben von CSS:
Wenn du willst, daß eine Formatierung auf alle Elemente angewendet wird, benutze
* {deine Formatierungen} anstatt alle Einzeln aufzulisten..

[heatseeker]

hab jetzt mal height durch min-height ersetzt.
jetzt sieht es nicht mehr ganz so scheisse aus.
es sieht sogar in beiden browsern gleich aus.

aber min-height wird nicht interpretiert...

PS: der aktuelle Code ist leider nicht online, da ich es auf dem XAMPP laufen lassen muss...

[steffenk]

der aktuelle Code ist leider nicht online, da ich es auf dem XAMPP laufen lassen muss...

Dafür gibts eine einfache Lösung: mit DynDNS kannst Du Deine lokalen Seiten öffentlich verfügbar machen

[heatseeker]

es ist nicht mein XAMPP...

Ich habe doch geschrieben das ich nur Ferienarbeit machen...
Ich bin nur für 3 wochen hier und möchte wegen so einem scheiss keinen großen aufstand machen...

also nichts mit dyndns , nichts mit ganzem php skript umschreiben....

möchte nur wissen ob man das über css vernünftig lösen kann...

[designfanatiker]

Höhenangaben raus und schon passt das.

[heatseeker]

aber dann sind die Zellen zu klein.
Sie sollen ja eine Mindeshöhe von 40px haben...

[Boris]

Der IE kennt leider kein min-height, interpretiert height aber so wie min-height.

Schreib für die braven Browser min-height: 123px und für den IE mit Sterchenhack das height (damit die anderen Browser es nicht interpretieren):

.zelle
{
min-height: 123px;
}

* html .zelle
{
height: 123px;
}

Der Safari auf dem MAC kennt min-height allerdings auch nicht und kann auch nix mit dem height-Ersatz anfangen.

[steffenk]

1. inline-styles ins Stylesheet
2. für den IE height:40px;
für alle anderen min-height:40px;

Wie Du das trennen kannst, steht hier: http://www.css-technik.de/details/30...owser-Bugs.htm

... und wieder geschlagen

[heatseeker]

fertig. alles gemacht.
ergebnis:
IE wieder wunderbar.
Firefox ignoriert min-heigt immer noch...

wieso??

[heatseeker]

* html .wotagMo
{
height: 40px;
}



.wotagMo
{

min-height:40px;
height:auto;
        BACKGROUND-COLOR: #ffffff;
        COLOR: #000000;
        FONT-FAMILY:  Tahoma, Arial, Helvetica;
        TEXT-ALIGN: left;
        text-decoration : none;
		  line-height:10px;
		  FONT-SIZE: 8pt;
}

so wars doch gemeint oder?

[Boris]

Das height: auto; solltest Du schon raus nehmen, und die Fontgröße besser in px angeben (pt eignet sich nur für den Druck)