DIV "springt" im IE nach unten FF alles ok

Hier können allgemeine Fragen zu HTML und CSS gestellt und diskutiert werden.
Antworten
silke
ConPresso-User
Beiträge: 50
Registriert: 20.06.2008 07:49
Hat sich bedankt: 1 Mal

DIV "springt" im IE nach unten FF alles ok

Beitrag von silke »

Hallo,
nochmal eine Frage, sicherlich liegts am HTML:
www.Karlsfelder-Triathlon.org unter Strecken "springt" im IE die Newsleiste rechts nach unten. Bei allen anderen Seiten passts und im FF sowieso.
Ich befürchte ich hab da was übersehen?!?

Hier mal die Codes:
global header:
<!-- Allgemein-->


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"



<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz">
<meta name="description"
content="homepage, dokument, webpage, page, web, netz" >
<title>Karlsfelder Triathlon</title>





<link rel="stylesheet" href="../_cfg/style.css" type="text/css">
<link rel="stylesheet" href="../_cfg/menue.css" type="text/css">

</head>
<body>

<div id="alles">


<!-- Menue ganz oben-->

<div id="menueoben">
<table align="left" id="menu" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td ><a href="mailto:Internet_Triathlon@gmx.de" >Kontakt</a></td><td class="trenn2">|</td>
<td ><a href="http://www.karlsfelder-triathlon.org/_r ... =Impressum" >Impressum</a></td><td class="trenn2">|</td>
</tr>
</table>
</div>

<!-- Kopfbereich-->

<div id="kopfleiste">

<tr>
<td id="top1">


<table align="left" cellspacing="0" cellpadding="0" border="0" width="30%">
<tr>
<td valign="middle" ><img src="../_images/logo.gif" width="200" height="99" border="0" align="left" valign="middle" alt="">

</tr>
</table >

<table align="right" cellspacing="0" cellpadding="0" border="0" width="20%">

<tr>
<td valign="middle" ><img src="../_images/TSVLogo72.gif" width="79" height="99" border="0" align="left" valign="middle" alt="">
</td>
</tr>
</table >

<table align="middle" cellspacing="0" cellpadding="0" border="0" width="50%">
<tr>
<td valign="middle" height="99" >
<br>

<span id="hpname"><b>Karlsfelder Triathlon</b> </span>
<br>
<span id="slogan"> <q><i>karlsfeld race = adrenalin² </i></q></span></td><td align="left" valign="middle" >
&nbsp;</td>
</tr>
</table >

</td>
</td>
</tr>


</div>
<!-- Menue unter Kopf-->

<div id="menuehorizontal">

<table width="910" align="center" id="menuhorizontal" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="14%" ><a href="http://www.karlsfelder-triathlon.org/_r ... ubric=Home" >HOME</a></td>
<td class="trenn">|</td>
<td width="14%"><a href="http://www.karlsfelder-triathlon.org/_r ... s+komplett" >NEWS</a></td>
<td class="trenn">|</td>
<td width="14%"><a href="http://www.karlsfelder-triathlon.org/_r ... schreibung" >AUSSCHREIBUNG</a></td>
<td class="trenn">|</td>
<td width="14%"><a href="http://www.karlsfelder-triathlon.org/_r ... =Anmeldung" >ANMELDUNG</a></td>
<td class="trenn">|</td>
<td width="14%"><a href="http://www.karlsfelder-triathlon.org/_r ... ehmerinfos" >TEILNEHMERINFOS</a></td>
<td class="trenn">|</td>
<td width="14%"><a href="http://www.karlsfelder-triathlon.org/_r ... c=Strecken" >STRECKEN</a></td>
<td class="trenn">|</td>
<td width="14%"><a target="_blank" href="http://www.triathlon-karlsfeld.org/_rub ... ergalerien" >FOTOS</a></td>
</tr>
</table>
</div>

<!--Inhaltsbereich-->

<div id="inhalt">
<div id="links">
dann der global footer
</div>
<div class="box2">
<div id="rechts">
<h3 class="boxheader">News. </h3>
<br><script language="JavaScript" type="text/javascript" src="http://www.karlsfelder-triathlon.org/_r ... "></script>




<!--BOX 3-->
<br><br><br>

<div id="menu2">
<h3 class="boxheader">Danke an unsere Sponsoren </h3>

<ul >
<li><br><img src="../_images/sponsoraok.gif" width="88" height="50" border="0" alt=""> <br> <a target="_blank" href="http://www.aok.de/bay/rd/117777.htm" >AOK München</a> </li><br>
<li><br><img src="../_images/sponsorerdinger.gif" width="157" height="50" border="0" alt=""> <br> <a target="_blank" href="http://www.erdinger-alkoholfrei.de" >Erdinger Alkohlfrei</a> </li><br>
<li><br><img src="../_images/sponsorscott.gif" width="149" height="25" border="0" alt=""> <br> <a target="_blank" href="http://www.scott-sports.com" >Scott</a> </li><br>
<li><br><img src="../_images/sponsorsailfish.gif" width="68" height="50" border="0" alt=""> <br><a target="_blank" href="http://www.sailfish-wetsuits.com" >Sailfish</a> </li><br>
<li><br><img src="../_images/sponsorhubertus.gif" width="57" height="50" border="0" alt=""> <br><a target="_blank" href="http://www.hubertus-dachau.de/" >Hotel Hubertus</a> </li><br>
<li><br><img src="../_images/sponsoraqua.gif" width="81" height="50" border="0" alt=""> <br><a target="_blank" href="http://www.aquasphereswim.com/de/" >Aqua Sphere</a></li><br>
<li><br><img src="../_images/sponsorbittl.gif" width="75" height="50" border="0" alt=""><br><a target="_blank" href="http://www.bittl.de" >Sport Bittl</a> </li>
<li> <br><!-- Microcounter-START -->
<a href="http://www.microcounter.de">
<img src="http://www.microcounter.de/microcounter ... er=Silke78" width="100" height="60" alt="" border="0"></a></li>
<!-- Microcounter-END -->
</ul>
</div>
</div>
</div>
</div>



<!--Fuss-->

<div id="unten">
<div class="bottom">
<table id="main_fuss" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td id="fuss">
Triathlon Karlsfeld / TSV Eintracht Karlsfeld; Jahnstrasse 15; 85757 Karlsfeld
</td>
</tr>
<tr>
<td width="100%" id="fuss2" align="center" >

<!-- menü GANZ unten-->
<table align="center" id="menu" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td ><a href="index.html" >Mail</a></td><td class="trenn2" >|</td>
<td ><a href="index.html" >Kontakt</a></td><td class="trenn2">|</td>
<td ><a href="index.html" >Impressum</a></td><td class="trenn2">|</td>

</tr>
</table>
<!-- ende menü GANZ unten-->
www.karlsfelder-triathlon.de <br>
</td>
</tr>
</table>

</div>

</div>



</body>
</html>
und die CSS
/* ================ ALLGEMEIN================ */

body
{margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px;
background-color:#ffffff ; padding:0px;text-align: center;
width:100%;

font-size: 16px;line-height: 18px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
}
/* hinweis: die schrift für den inhaltsbereich ändern sie weiter unten bei #inbox */


/* scrolleiste internet explorer ab vers.5.5 */
body
{scrollbar-arrow-color: #c7c7c7; scrollbar-base-color: #fff;
scrollbar-highlight-color : #c7c7c7; scrollbar-shadow-color : #fff;
SCROLLBAR-TRACK-COLOR: #fff;}




#alles {
border-width: thin; border-style: solid; border-color: red;
width:900px; height:1700; margin-left: auto; margin-right: auto;

}


/* ================ Menue ganz oben ================ */

#menueoben {
border-width: thin; border-style: solid; border-color: blue;
width: 100%; height: 44px; text-align: center;

}

/* ================ KOPFBEREICH ================ */

#kopfleiste {
border-width: thin; border-style: solid; border-color: black;
width: 100%; height: 170px; margin: auto; padding-top: 20px;

}

#top1 {padding-left:50px;
padding-right:0px;
height:270px;
vertical-align:middle;
text-align:center;
color:#ff0107;

}

#hpname {letter-spacing:-1px;font-size:36px;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
color:#00aeef;font-style: ; font-style:bold;

}

#slogan {letter-spacing:-1px;font-size:16px;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
color:#f7931e;font-style:italic; font-style:strong;
padding-left:3px
}

/* ================ Menue unter Kopf ================ */




#menuehorizontal {
border-width: thin; border-style: solid; border-color: #00ff00;
width: 100%; height: 58px;

}

/* ================ Inhaltsbereich ================ */

#hauptinhalt {
border-width: thin; border-style: solid; border-color: black;
width: 100%; height: 1000px;

}


#inhalt {
border-width: thin; border-style: solid; border-color: #00ff9a;
padding right: 5px; height: 1400px;
}

#links {
border-width: thin; border-style: solid; border-color: #f8f8f8; text-align: left;
padding right: 5px; height: 1300px; width: 70%; float: left;
}


/* ================ Bereich rechts für News ================ */

#rechts{
border-width: thin; border-style: solid; border-color: #black;
width: 200px; height: 1200px; float: right; float: top; margin-top: 10px; text-align: left; font-size: 12px; line-height: 12px;
}

element.style {
font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular,sans-serif;
}

h3.boxheader {color:#989898;
font-size: 15px;line-height: 18px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
border-bottom:solid 1px #7F7F7F}


/* ================FUSSBEREICH ================ */

#unten {
border-width: thin; border-style: solid; border-color: blue;
height: 58px; margin-top: 10px; text-align: center;

}



#fuss {width:90%;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
font-size:12px;
color: #000;
height:58px;
text-align:center;
vertical-align:middle;
letter-spacing:6px;
padding-left: 60px;

}

#fuss2 {width:100%;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
font-size:12px;
color: #989898;
height:89px;
text-align:center;
vertical-align:middle;

}




/* überschriften */
h2{ font-family: arial, helvetica, tahoma ,verdana, sans-serif;
color:#00aeef;
margin-bottom:10px;letter-spacing:2px;font-size: 14pt;
border-bottom:dashed 0px #000;
padding-bottom:4px;font-style:bold;
}

/* überschrift für die box rechts */
h3{ font-family: arial, helvetica, tahoma ,verdana, sans-serif;
color:#00aeef;
margin-bottom:2px;letter-spacing:1px;font-size: 10pt;
border-bottom:dashed 0px #000;
padding-bottom:0px;font-style:bold;
}



#counter {width:30%;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
font-size:12px;
color: #000;
height:130px;
text-align:center;
vertical-align:top;
letter-spacing:0px;
align: lieft;
background-color:#ffffff;
}


/* conpresso */
.more {text-decoration:none; color:#00aeef; font-family: verdana, sans-serif; padding: 0px}

.titel {padding-left: 10px; padding-right: 10px;}

.datum {float: right; }

.initial {float: right; margin-top: 0px; margin-right: 10px; color:#00aeef; font-size: 10px;}

.streckentemplate {width: 60%;}
Die Rahmen hab ich nur momentan für die Anschaulichkeit...
Benutzeravatar
Mr. Magpie
ConPresso-Profi
Beiträge: 1004
Registriert: 01.01.1970 01:00
Wohnort: Wuppertal
Hat sich bedankt: 274 Mal
Danksagung erhalten: 59 Mal

Beitrag von Mr. Magpie »

Hallo Silke,

momentan springt offenbar nix, aber du bastelst wahrscheinlich auch gerade daran, oder. Allerdings habe ich mir nur die Seite online angeschaut und nicht deinen geposteten Code.
Generell: Solche Probleme treten häufig auf, solange IE der Versionen 6.0 und älter verbreitet sind. Dies ist ein Grund, warum wir lange Zeit noch auf Tabellenlayouts gesetzt haben. Aber seit ich YAML (www.yaml.de) ein bisschen kennengelernt habe, gehören solche Probleme der Vergangenheit an.
Dies mag dir jetzt im Moment bei deinem aktuellen Problem zwar nicht unbedingt helfen, aber mittelfristig dürfte es evtl. ganz hilfreich sein.

EDIT: hatte mir nur die Eingangsseite angeschaut, nicht die Seite "Strecken"
Günther Ludwig
silke
ConPresso-User
Beiträge: 50
Registriert: 20.06.2008 07:49
Hat sich bedankt: 1 Mal

Beitrag von silke »

Hallo Mr. Magpie,

ja ich bastel noch - allerdings springts auch nur bei "Strecken"....
Alle anderen Seiten passen und ich hab IE V 7 :shock:
Benutzeravatar
Mr. Magpie
ConPresso-Profi
Beiträge: 1004
Registriert: 01.01.1970 01:00
Wohnort: Wuppertal
Hat sich bedankt: 274 Mal
Danksagung erhalten: 59 Mal

Beitrag von Mr. Magpie »

Auch der IE 7 hat Macken, wenn auch weniger.

Wenn du es so verstanden hast, dass YAML nur im Zusammenhang mit IE <= 6 sinnvoll ist, dann habe ich das wohl missverständlich formuliert. Tut mir leid.
Günther Ludwig
Benutzeravatar
Mr. Magpie
ConPresso-Profi
Beiträge: 1004
Registriert: 01.01.1970 01:00
Wohnort: Wuppertal
Hat sich bedankt: 274 Mal
Danksagung erhalten: 59 Mal

Beitrag von Mr. Magpie »

Noch ein paar Hinweise:
Der DIV-Container "alles" ist bei dir nicht geschlossen.
Die Doctype-Deklaration ist nicht geschlossen (> fehlt am Ende) und sollte unbedingt als allererste Zeile im Quellcode stehen, da sonst alle IE im Quirks-Mode laufen!
Du öffnest eine TD, die du nicht schließt.
Du schließt einige TD's ohne sie geöffnet zu haben.

Kannst du diese Fehler 'mal beheben? Vielleicht war's das dann schon, auf jeden Fall macht das die Fehleranalyse einfacher.
Hab' leider zurzeit nicht so viel Zeit, um komplett in deinen Code und CSS einzusteigen.
Günther Ludwig
Benutzeravatar
balu
ConPresso-Entwickler
Beiträge: 1748
Registriert: 01.01.1970 01:00
Hat sich bedankt: 81 Mal
Danksagung erhalten: 133 Mal

Beitrag von balu »

Hi,

noch ein kleiner Tipp: Das Firefox-Plugin "HTML-Validator" ist für das Finden solcher Probleme sehr praktisch:

http://users.skynet.be/mgueury/mozilla/

Auf Deiner Seite sieht man da kleinere Macken, wie z.B. ein </ul> am Anfang der Sponsoren-Liste (wo vermutlich ein <ul> sein muesste), falsche <br />-Tags (der / muss am Ende stehen), mehrfache Verwendung der ID "menu" (IDs duerfen nur einmal verwendet werden, evtl. auf class umstellen) und zu guter letzt wird <div id="alles"> vor dem </body> nicht mehr geschlossen.

Das ist alles nur Krimskrams, führt aber oft zu solchen seltsamen Phaenomenen.

Balu
Bartels.Schöne
ConPresso Support & Development
Antworten