Text wird nicht immer angezeigt.

griffin · Beitrag von **griffin** » Mi 10. Okt 2007, 06:55

Hallo

ich bin seit Tagen am Verzweifeln. Bin am Entwicklen einer Website und habe dass Problem, dass im Internet Explorer der Text meiner Artikelliste, die ich rechts positioniert habe nicht immer sichtbar ist. Der Text dort ist mal sichtbar mal nicht. Firefox dagegen zeigt den Text immer einwandfrei an.

Hier der Link zur Homepage http://www.hvs-tk.de/hvstklive/front_co ... p?idcat=82

Wie gesagt ganz rechts sollen News angezeigt werden. Momentan sind es zu Testzwecken 3. Die News zeige ich mit der Standard Advanced Artikelliste an.

Wo ist das Problem? Hat wer Infos?

Positioniert wurden die News mit css da Rechts. Soweit ich das eingrenzt habe, könnte das vielleicht an dem CSS liegen? Weil auch wenn ich einen normalen Text rechts hinschreibe, also ohne die Artikelliste, habe ich das gleiche Problem.

Hier mal noch die CSS-Klasse zum Anzeigen des rechten Textes:

Code: Alles auswählen

#right {
	position:absolute;
	top:10px;
	left:800px;
	width:180px;
	padding-top:110px;
	padding-left:10px;
	padding-right:10px;
	
	background-color:#999999;
	background:url('../images/randbg.jpg');
	background-position:0px 0px;
	background-repeat:no-repeat;
	color:rgb(62,77,116);
}

Hier das Layout:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Handball-Verband Saar e.V. - Spieltechnik</title>
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<!--[if IE]>
		<style>
			#imagecolumn {
				width:170px;
			}
			#logo {
				margin-top:0;
			}
			#navipath {
				padding-top:2px;
			}
			.balken {
				background-position:0px 0px ;
			}				
			#additionalnavi {
				padding-top:2px;
			}
        </style>
	<![endif]-->
<script language="javascript" type="text/javascript" src="js/jsApi.js"></script>
</head>
<body>
<div id="outer" align="center"> 
	<div id="innerwrap"> 
		<div id="centrecontent"> 
			<div id="navipath">
				<container id="60" name="Navigationspfad" types="Navigation" mode="fixed" default="Navigationspfad">Navigationspfad</container>
			</div>
			<container id="10" name="Headline" types="Content" default="Headline (HTML)">Headline (HTML)</container>
			<container id="12" name="Text" types="Content" default="">Content 1</container>
			<container id="15" name="Text" types="Content" default="">Content 2</container>
			<container id="22" name="Text" types="Content" default="">Content 3</container>
			<container id="24" name="Text" types="Content" default="">Content 4</container>
			<container id="26" name="Text" types="Content" default="">Content 5</container>
			<container id="28" name="Text" types="Content" default="">Content 6</container>
			<br/><br/>
			<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td style="background-color:rgb(210,210,210);"><img src="images/grey.gif" width="1" height="1" border="0" alt="" title=""/></td></tr></table>
			<div id="bottomnavi">
				<container id="30" name="BottomNavigation" types="Navigation" mode="fixed" default="BottomNavigation">BottomNavigation</container>
			</div>			
		</div>
		<div id="left"> 
			<container id="40" name="Hauptnavigation" types="Navigation" mode="fixed" default="Hauptnavigation">Hauptnavigation</container>
			<container id="44" name="Suche" types="Navigation" default="">Suche</container>
			<container id="48" name="Login" types="Navigation" default="">Login</container>
			<container id="49" name="Newsletter" types="Navigation" default="">Newsletter</container> 
		</div>
	</div>
	<div id="right">
		<container id="75" name="Text" types="Content" default="">Text rechts</container>
	</div>
	
	<div id="clearfooter"></div>
	<div id="header"> 
		<div id="additionalnavi"><container id="50" name="Hilfsnavigation" types="Navigation" mode="fixed" default="Hilfsnavigation">Hilfsnavigation</container></div>
		<div id="logo">
			<table width="1000" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td><a href="front_content.php" title="Zur Homepage">
                                                  <!--<img src="images/logo.gif" width="101" hspace="30" height="61" border="0" alt="Logo" title="Logo"/>-->
                                                  Handball-Verband Saar e.V. - Spieltechnik
                                              </a></td>
					<td align="right"><img src="images/blank.gif" width="449" height="1" border="0"/></td>
					<td align="right"><container id="80" name="Illustration" types="Content" default=""></container></td>
				</tr>
				<tr>
					<td colspan="3" class="balken"><img src="images/blank.gif" border="0" width="780" height="5" alt=""/></td>
				</tr>
			</table>
		</div>
	</div>
</div>
<!--<div id="imagecolumn">
	<container id="70" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
	<container id="72" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
	<container id="74" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
</div>-->
</body>
</html>

Solltet ihr weitere Informationen benötigen meldet euch bitte.

Bis dann
Daniel

griffin · Beitrag von **griffin** » Mi 10. Okt 2007, 11:26

weiß keiner einen rat??

kummer · Beitrag von **kummer** » Mi 10. Okt 2007, 11:45

könnte es sein, dass du überlappende divs hast? da ist das verhalten (die interpretation) von firefox und ie oftmals nicht identisch.

griffin · Beitrag von **griffin** » Mi 10. Okt 2007, 11:56

könnte sein. gibt es ein tool o.ä. um sowas schnell und bequem herauszufinden?

Beitrag von **Dodger77** » Mi 10. Okt 2007, 12:07

Mal abgesehen davon, dass ich die Problematik weder mit IE7 noch IE6 nachvollziehen kann, gibt es für den IE eine Developer Toolbar, die einem bei der Suche nach CSS-Problemen helfen kann.

Wenn es um solch reinen CSS-/HTML-Probleme geht, empfiehlt sich auch die Nutzung eines CSS-/HTML-Forums (z.B. http://forum.de.selfhtml.org/)

griffin · Beitrag von **griffin** » Mi 10. Okt 2007, 12:08

Problem könnte die CSS-Klasse clearfooter sein. Lösche ich das div-Tag aus dem Standardtemplate raus, zeigt er mir rechts die Texte zwar an, aber der Kopf der Seite ist komplett verschoben

griffin · Beitrag von **griffin** » Mi 17. Okt 2007, 07:10

Hallo
das Problem ist noch immer nicht gelöst. Ich habe versucht mit der IE Development Toolbar zu arbeiten, nur bringt die mich nicht weiter.

Was ich rausgefunden habe, ist, dass wenn ich die Zeile

Code: Alles auswählen

<div id="clearfooter"></div>

aus dem Layout entferne, werden die News rechts korrekt angezeigt. Allerdings ist dann der Header komplett verschoben. Für was genau ist das clearfooter eigentlich gut?

Hier nochmal mein komplettes Layout:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Handball-Verband Saar e.V. - Spieltechnik</title>
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<!--[if IE]>
		<style>
			#imagecolumn {
				width:170px;
			}
			#logo {
				margin-top:0;
			}
			#navipath {
				padding-top:2px;
			}
			.balken {
				background-position:0px 0px ;
			}				
			#additionalnavi {
				padding-top:2px;
			}
        </style>
	<![endif]-->
<script language="javascript" type="text/javascript" src="js/jsApi.js"></script>
</head>
<body>
<div id="outer" align="center"> 
	<div id="innerwrap"> 
		<div id="centrecontent"> 
			<div id="navipath">
				<container id="60" name="Navigationspfad" types="Navigation" mode="fixed" default="Navigationspfad">Navigationspfad</container>
			</div>
			<container id="10" name="Headline" types="Content" default="Headline (HTML)">Headline (HTML)</container>
			<container id="12" name="Text" types="Content" default="">Content 1</container>
			<container id="15" name="Text" types="Content" default="">Content 2</container>
			<container id="22" name="Text" types="Content" default="">Content 3</container>
			<container id="24" name="Text" types="Content" default="">Content 4</container>
			<container id="26" name="Text" types="Content" default="">Content 5</container>
			<container id="28" name="Text" types="Content" default="">Content 6</container>
			<br/><br/>
			<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td style="background-color:rgb(210,210,210);"><img src="images/grey.gif" width="1" height="1" border="0" alt="" title=""/></td></tr></table>
			<div id="bottomnavi">
				<container id="30" name="BottomNavigation" types="Navigation" mode="fixed" default="BottomNavigation">BottomNavigation</container>
			</div>			
		</div>
		<div id="left"> 
			<container id="40" name="Hauptnavigation" types="Navigation" mode="fixed" default="Hauptnavigation">Hauptnavigation</container>
			<container id="44" name="Suche" types="Navigation" default="">Suche</container>
			<container id="48" name="Login" types="Navigation" default="">Login</container>
			<container id="49" name="Newsletter" types="Navigation" default="">Newsletter</container> 
		</div>
	</div>
	<div id="right">
		<container id="75" name="Text" types="Content" default="">Text rechts</container>
	</div>
        <div id="clearfooter"></div>
	<div id="header"> 
		<div id="additionalnavi"><container id="50" name="Hilfsnavigation" types="Navigation" mode="fixed" default="Hilfsnavigation">Hilfsnavigation</container></div>
		<div id="logo">
			<table width="1000" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td><a href="front_content.php" title="Zur Homepage">
                                                  <!--<img src="images/logo.gif" width="101" hspace="30" height="61" border="0" alt="Logo" title="Logo"/>-->
                                                  Handball-Verband Saar e.V. - Spieltechnik
                                              </a></td>
					<td align="right"><img src="images/blank.gif" width="449" height="1" border="0"/></td>
					<td align="right"><container id="80" name="Illustration" types="Content" default=""></container></td>
				</tr>
				<tr>
					<td colspan="3" class="balken"><img src="images/blank.gif" border="0" width="780" height="5" alt=""/></td>
				</tr>
			</table>
		</div>
	</div>
</div>
<!--<div id="imagecolumn">
	<container id="70" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
	<container id="72" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
	<container id="74" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
</div>-->
</body>
</html>

Und hier die komplette CSS-Datei:

Code: Alles auswählen

html, body { height:100%; }

body {
	padding:0;
	margin:0;
	text-align:center;
         min-width:780px;
         background-color:#999999;
	font-size:12px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
	scrollbar-arrow-color:#FFFFFF;
         scrollbar-face-color:#2E14FF;
         scrollbar-highlight-color:#FFFFFF;
         scrollbar-3dlight-color:#0033CC;
         scrollbar-shadow-color:#000000;
         scrollbar-darkshadow-color:#666666;
         scrollbar-track-color:#CCCCCC;
}


td {
	font-size:12px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(62,77,116);
	margin-bottom:8px;
}

.input {
	font-size:12px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
	width:240px;
	margin-bottom:8px;
	border-top:1px solid #999999;
	border-right:1px solid #999999;
	border-bottom:1px solid #999999;
	border-left:1px solid #999999;
}

.label {
	font-size:12px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
}

.small {
	font-size:9px;
}

#outer{
        margin:auto;
        height:100%;
	min-height:100%;
	width:1000px;
	color:#000000;
	text-align:left;
	position:relative;
        background-image:url('../images/test.gif');	
        background-repeat:repeat-y;
	background-position:0px 0px;
}
 
html>body #outer{ height:auto; } 

#innerwrap {
	float:left;
	width:790px;
}

#header{
	position:absolute;
	top:0;
	width:1000px;
	height:103px;
	color:#000000;
	background-color:#ffffff;
	background:url("../images/schraffur_rechts_oben.gif");
	background-repeat:repeat-x;
	background-position:0px 0px ;
	z-index:5;
}

#left {
	position:relative;
	width:190px;
	float:left;
	padding-top:120px;
	padding-bottom:20px;
	padding-left:3px;
}

#left p { padding-left:3px;padding-right:2px }

#right p { padding-left:4px;padding-right:2px }

#rightcontent {
}

#imagecolumn {
	margin-top:0px;
	position:absolut;
	top:20px;
	left:608px;
	width:148px;
	height:550px;
	z-index:10;
	padding-top:112px;
	padding-left:10px;
	padding-right:10px;
	color:rgb(62,77,116);
}

#imagecolumn a {
	padding:0;
	font-weight:normal;
	font-size:12px;
	color:rgb(190,190,190);
	margin:0;
}

#imagecolumn h1 {
	padding:0;
	font-weight:normal;
	font-size:12px;
	color:rgb(217,104,28);
	margin:0;
}

#right {
	position:absolute;
	top:110px;
	left:805px;
	width:180px;
	padding-top:10px;
	padding-left:5px;
	padding-right:10px;
	
	background-color:#999999;
	background:url('../images/randbg.jpg');
	background-position:0px 0px;
	background-repeat:no-repeat;
	color:rgb(62,77,116);
}

div,p  { margin-top:0; }

#centrecontent {
	width:585px;
	float:right;
	padding-left:0px;
	padding-right:0px;
	padding-top:105px;
	padding-bottom:20px;
	color:rgb(62,77,116);
}

#centrecontent p { padding-left:3px;color:rgb(62,77,116); }

#clearfooter { width:100%;height:52px;clear:both; }

#bottomnavi {
	text-align:center;
	color:rgb(160,160,160);
         font-size:9px;
}

#additionalnavi {
	float:right;
	background-color:#ffffff;
	margin-top:3px;
        padding-bottom:2px;
	padding-top:0px;
	text-align:center;
	width:170px;
	color:rgb(160,160,160);
}

#logo {
	width:780px;
	margin-top:18px;
}

#navipath {
	padding:0;
	padding-bottom:10px;
	background-color:#ffffff;
	color:rgb(99,99,99);
	width:388px;
}

.navi{
	width:190px;
	border-bottom:1px solid rgb(170,170,170);
	background-color:rgb(255,255,255);
}

h1 {
	padding-left:2px;
	font-weight:bold;
	font-size:13px;
	color:#2E14FF;
	margin:0;
}

h1.content {
	margin-bottom:12px;
	padding:0;
}

hr { color:rgb(210,210,210); }

a { font-size:12px; color:rgb(197,74,51); text-decoration:none; }
a:hover { text-decoration:underline; }

a.newsheadline { font-weight:bold; } 

a.bottomnavi { color:rgb(160,160,160); font-size:9px; } 

a.additionalnavi { font-size:10px; color:rgb(160,160,160); }

a.navipath { font-size:10px; color: rgb(160,160,160); } 

a.navileft_passive {
	display:block;
	background-color:#E8E8EE;
	padding-top:3px;
	padding-bottom:3px;
	color:rgb(51,79,119);
} 

a.navileft_passive:hover {
        text-decoration:underline;
        padding-left:20px;
        background-color:#AAAAAE;
        padding-left:20px;
}

a.navileft_active {
	display:block;
	background-color:#ffffff;
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:right;
	padding-top:3px;
	padding-bottom:3px;
	color:rgb(51,79,119);
} 

a.navileft_active:hover {
        text-decoration:underline;
        padding-left:20px;
        background-color:#AAAAAE;
        padding-left:20px;
}

a.navileft_open {
	padding-left:10px;
	display:block;
	font-weight:bold;
	background:url("../images/navi_pfeil.gif") no-repeat;
	background-position:right;
	background-color:#E8E8EE;
	padding-top:3px;
	padding-bottom:3px;
	color:rgb(51,79,119);
} 

a.navileft_open:hover {
        text-decoration:underline;
        padding-left:20px;
        background-color:#AAAAAE;
        padding-left:20px;
}

a.sitemap_level1 {
	display:block;
	border-bottom:1px solid #b4a8b4;
	color:rgb(217,104,28);
	font-weight:normal;
	padding-bottom:.4em;
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:right;
}

a.sitemap_level2 {
	color:rgb(62,77,116);
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:170px 4px;
	display:block;
}

a.sitemap_level3 {
	color:rgb(190,190,190);
}

.sitemap_level2_container {
	float:left;
	width:50%;
	padding-top:.3em;
}

.sitemap_level3_container {
	float:right;
	width:50%;
	padding-top:.3em;
}

.input_searchbox {
	width:95px;
	vertical-align:middle;
	font-size:12px;
	color: rgb(62,77,116);
}

.input_newsletterselect {
	width:80px;
	vertical-align:middle;
	font-size:12px;
	margin-right: 8px;
	color: rgb(62,77,116);
}

.label_searchbox {
	vertical-align:middle;
	color:#9d9ea2;
	position:relative;
	padding-left:10px;
	/*left:-65px;*/
}

#loginbox {
	background-color:#DFE0E5;
	border-top:1px solid #aeaeae;
	border-bottom:1px solid #aeaeae;
	padding-bottom:.6em;
	padding-top:.6em;
	padding-left:0em;
	padding-right:0em;
	margin-top:1.5em;
	margin-bottom:1.5em;
}

#searchbox {
	background-color:#DFE0E5;
	border-top:1px solid #aeaeae;
	border-bottom:1px solid #aeaeae;
	padding-bottom:.6em;
	padding-top:.6em;
	padding-left:0em;
	padding-right:0em;
	margin-top:1.5em;
	margin-bottom:1.5em;
}

#newsletterbox {
   background-color:#DFE0E5;
   border-top:1px solid #aeaeae;
   border-bottom:1px solid #aeaeae;
   padding-bottom:.6em;
   padding-top:.6em;
   padding-left:.5em;
   padding-right:.5em;
   margin-top:1.5em;
   margin-bottom:1.5em;
}

.hidden {
	display:none;
}

.balken {
	padding-left:0px;
	background-color:#2E14FF;
	background-image:url('../images/test2.gif');
	background-position:2px 0px ;
}

.teaser_img {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px; 
}

Muss also irgendwo am Zusammenspiel zwischen right und clearfooter hängen. Bitte helft mir.

Danke & Gru0
Daniel