Darstellung im Internet Explorer 6/7 falsch!

Hightech Master · 21. Februar 2008

Hallo Tutorials-Community,
ich bin neu, und brauche unbedingt eure Hilfe.
Ich hab ein Design für die Version 3 des WoltLab Burning Boards
erstellt welcher auch mit neuen TPLs ausgeliefert wird. Nun hab
ich aber das Problem, das Opera und firefox kein Problem mit der Darstellung haben,
dafür aber beide Internet Explorer Brüder (6 und 7).
Leider ist der Code der boardList lang, aber man musst an jeder Ecke fast etwas ändern.
Hoffe jemand kann mir helfen.

Code:

{if $boards|count > 0}
	{cycle name='boardlistCycle' values='1,2' advance=false print=false}
	<ul id="boardlist">
		{foreach from=$boards item=child}
			{* define *}
			{assign var="depth" value=$child.depth}
			{assign var="open" value=$child.open}
			{assign var="hasChildren" value=$child.hasChildren}
			{assign var="openParents" value=$child.openParents}
			{assign var="board" value=$child.board}
			{assign var="boardID" value=$board->boardID}
			{counter assign=boardNo print=false}
			{if $board->isBoard()}
				{* board *}
		
				<li{if $depth == 1} class="border"{/if}>
					<div class="boardlistInner container-{cycle name='boardlistCycle'} board{@$boardID}"{if $board->image} style="background-image: url({$board->image});"{/if}>
						<div class="containerIcon">
							<img id="boardIcon{@$boardNo}" src="{@RELATIVE_WCF_DIR}images/necto/{if $newPosts.$boardID}new{/if}folder.png" alt="" {if $newPosts.$boardID}title="{lang}wbb.board.markAsReadByDoubleClick{/lang}" {/if}/>
						</div>
						
						<div class="containerContent">
							{if $depth > 3}<h6 class="boardTitle">{else}<h{@$depth+2} class="boardTitle">{/if}
								<a id="boardLink{@$boardNo}" {if $newPosts.$boardID}class="new" {/if}href="index.php?page=Board&amp;boardID={@$boardID}{@SID_ARG_2ND}">{lang}{$board->title}{/lang}{if $unreadThreadsCount.$boardID|isset}<span> ({#$unreadThreadsCount.$boardID})</span>{/if}</a>
							{if $depth > 3}</h6>{else}</h{@$depth+2}>{/if}
							{if $newPosts.$boardID}
								<script type="text/javascript">
									//<![CDATA[
									boardMarkAsRead.init({@$boardNo}, {@$boardID});
									//]]>
								</script>
							{/if}
							{if $lastPosts.$boardID|isset}
							<div class="boardlistLastPost">								
								<div class="containerIconSmall"><a href="index.php?page=Thread&amp;threadID={@$lastPosts.$boardID->threadID}&amp;action=firstNew{@SID_ARG_2ND}"><img src="{@RELATIVE_WBB_DIR}icon/goToFirstNewPostS.png" alt="" title="{lang}wbb.index.gotoFirstNewPost{/lang}" /></a></div>
								<div class="containerContentSmall">
									<p>
										{lang}{$lastPosts.$boardID->prefix}{/lang}
										<a href="index.php?page=Thread&amp;threadID={@$lastPosts.$boardID->threadID}&amp;action=firstNew{@SID_ARG_2ND}">{$lastPosts.$boardID->topic}</a>
									</p>
									<p>{lang}wbb.board.threads.postBy{/lang}
										{if $lastPosts.$boardID->lastPosterID != 0}
											<a href="index.php?page=User&amp;userID={@$lastPosts.$boardID->lastPosterID}{@SID_ARG_2ND}">{$lastPosts.$boardID->lastPoster}</a>
										{else}
											{$lastPosts.$boardID->lastPoster}
										{/if}
										<span class="light">({@$lastPosts.$boardID->lastPostTime|shorttime})</span>
									</p>
								</div>
							</div>
							{/if}
							
							{if $board->description}
								<p class="boardlistDescription">
									{lang}{if $board->allowDescriptionHtml}{@$board->description}{else}{$board->description}{/if}{/lang}
								</p>
							{/if}
							
							{if $subBoards.$boardID|isset}
							<div class="boardlistSubboards">
								{implode from=$subBoards.$boardID item=subBoard}{counter print=false}{assign var="subBoardID" value=$subBoard->boardID}
									{if $depth > 4}<h6>{else}<h{@$depth+3}>{/if}
										<img id="boardIcon{@$boardNo}" src="{@RELATIVE_WBB_DIR}icon/{if $subBoard->isBoard()}board{if $newPosts.$subBoardID}New{/if}{elseif $subBoard->isCategory()}category{else}boardRedirect{/if}S.png" alt="" {if $subBoard->isBoard() && $newPosts.$subBoardID}title="{lang}wbb.board.markAsReadByDoubleClick{/lang}" {/if}/> 
										<a id="boardLink{@$boardNo}" {if $newPosts.$subBoardID}class="new" {/if}{if $subBoard->isExternalLink()}class="externalURL" {/if}href="index.php?page=Board&amp;boardID={@$subBoardID}{@SID_ARG_2ND}">{lang}{$subBoard->title}{/lang}{if $unreadThreadsCount.$subBoardID|isset} <span>({#$unreadThreadsCount.$subBoardID})</span>{/if}</a>{if $depth > 4}</h6>{else}</h{@$depth+3}>{/if}{if $newPosts.$subBoardID}<script type="text/javascript">
											//<![CDATA[
											boardMarkAsRead.init({@$boardNo}, {@$subBoardID});
											//]]>
										</script>{/if}{/implode}
							</div>
							{/if}
							
							{if $boardUsersOnline.$boardID.users|isset || $boardUsersOnline.$boardID.guests|isset}
								<p class="boardlistUsersOnline">
									<img src="{@RELATIVE_WCF_DIR}icon/usersS.png" alt="" />
									{if $boardUsersOnline.$boardID.users|isset}
										{implode from=$boardUsersOnline.$boardID.users item=userOnline}<a href="index.php?page=User&amp;userID={@$userOnline.userID}{@SID_ARG_2ND}">{@$userOnline.username}</a>{/implode}
									{/if}
									{if $boardUsersOnline.$boardID.guests|isset}
										{lang}wbb.index.boardUsersOnline.guests{/lang}
									{/if}
								</p>
							{/if}
							
							{if $moderators.$boardID|isset}
								<p class="moderators">
									<img src="{@RELATIVE_WBB_DIR}icon/moderatorS.png" alt="" />
									{implode from=$moderators.$boardID item=moderator}{if $moderator->userID}<a href="index.php?page=User&amp;userID={@$moderator->userID}{@SID_ARG_2ND}">{$moderator}</a>{else}{$moderator}{/if}{/implode}
								</p>
							{/if}
							
							{if $child.additionalBoxes|isset}{@$child.additionalBoxes}{/if}
							
							{if !$board->description && !$subBoards.$boardID|isset && !$boardUsersOnline.$boardID.users|isset && !$boardUsersOnline.$boardID.guests|isset && !$moderators.$boardID|isset && !$child.additionalBoxes|isset}
							<!--[if IE]>&nbsp;<![endif]-->
							{/if}
						</div>
					</div>
			{/if}
			
			{if $board->isCategory()}
{counter assign=border print=false}
{if $border < 3}
{else}
<li>
<div class="untenlinks">
<div class="untenrechts">
<div class="untenmitte">
</div></div></div>
</li>
{/if}
				{* category *}
				{cycle name='boardlistCycle' advance=false print=false reset=true}
<li>
<div class="obenlinks">
<div class="obenrechts">
<div class="obenmitte">
<div class="fix">
						<div class="containerHeadIcon">
							{if $open}<a href="{$selfLink}&amp;hideBoard={@$boardID}{@SID_ARG_2ND}#boardLink{@$boardNo}" onclick="return !openList('category{@$boardID}', true, '{lang}wbb.index.showCat{/lang}', '{lang}wbb.index.hideCat{/lang}')"><img id="category{@$boardID}Image" src="{@RELATIVE_WCF_DIR}icon/minusS.png" alt="" title="{lang}wbb.index.hideCat{/lang}" /></a>
							{else}<a href="{$selfLink}&amp;showBoard={@$boardID}{@SID_ARG_2ND}#boardLink{@$boardNo}"><img src="{@RELATIVE_WCF_DIR}icon/plusS.png" alt="" title="{lang}wbb.index.showCat{/lang}" /></a>
							{/if}
						</div>
                                                 <div class="containerHeadFont">   
							{if $depth > 3}<h6 class="boardTitle">{else}<h{@$depth+2} class="boardTitle">{/if}
								<a id="boardLink{@$boardNo}" {if $newPosts.$boardID}class="new" {/if}href="index.php?page=Board&amp;boardID={@$boardID}{@SID_ARG_2ND}">{lang}{$board->title}{/lang}{if $unreadThreadsCount.$boardID|isset} ({#$unreadThreadsCount.$boardID}){/if}</a>
							{if $depth > 3}</h6>{else}</h{@$depth+2}>{/if}
                                                   </div>
                                                <div class="containerContent">
							{if $board->description}
								<p class="boardlistDescription">
									{lang}{if $board->allowDescriptionHtml}{@$board->description}{else}{$board->description}{/if}{/lang}
								</p>{/if}
                                                  </div>
</div>
</li>
                       
                      <div class="fix_second">
				<li{if $depth == 1} class="border"{/if}>
                                             <div class=" boardlistInner board{@$boardID}">
						<div class="containerContent">
                      </div>
							

							
							{if $subBoards.$boardID|isset}
								<div class="boardlistSubboards">
									{implode from=$subBoards.$boardID item=subBoard}{counter print=false}{assign var="subBoardID" value=$subBoard->boardID}
										{if $depth > 4}<h6>{else}<h{@$depth+3}>{/if}
											<img id="boardIcon{@$boardNo}" src="{@RELATIVE_WBB_DIR}icon/{if $subBoard->isBoard()}board{if $newPosts.$subBoardID}New{/if}{elseif $subBoard->isCategory()}category{else}boardRedirect{/if}S.png" alt="" {if $subBoard->isBoard() && $newPosts.$subBoardID}title="{lang}wbb.board.markAsReadByDoubleClick{/lang}" {/if}/> 
											<a id="boardLink{@$boardNo}" {if $newPosts.$subBoardID}class="new" {/if}{if $subBoard->isExternalLink()}class="externalURL" {/if}href="index.php?page=Board&amp;boardID={@$subBoardID}{@SID_ARG_2ND}">{lang}{$subBoard->title}{/lang}{if $unreadThreadsCount.$subBoardID|isset} <span>({#$unreadThreadsCount.$subBoardID})</span>{/if}</a>{if $depth > 4}</h6>{else}</h{@$depth+3}>{/if}{if $newPosts.$subBoardID}<script type="text/javascript">
												//<![CDATA[
												boardMarkAsRead.init({@$boardNo}, {@$subBoardID});
												//]]>
											</script>{/if}{/implode}
								</div>
							{/if}
							
							{if $child.additionalBoxes|isset}{@$child.additionalBoxes}{/if}
						</div>
					</div>
			{/if}
			
			{if $board->isExternalLink()}	
				{* external url *}
				<li{if $depth == 1} class="border"{/if}>
					<div class="container-{cycle name='boardlistCycle'} boardlistInner board{@$boardID}"{if $board->image} style="background-image: url({$board->image});"{/if}>
						<div class="containerIcon">
							<img src="{@RELATIVE_WBB_DIR}icon/boardRedirectM.png" alt="" />
						</div>
						<div class="containerContent">
							{if $depth > 3}<h6 class="boardTitle">{else}<h{@$depth+2} class="boardTitle">{/if}
								<a href="index.php?page=Board&amp;boardID={@$boardID}{@SID_ARG_2ND}" class="externalURL">{lang}{$board->title}{/lang}</a>
							{if $depth > 3}</h6>{else}</h{@$depth+2}>{/if}
							
							{if $board->description}
								<p class="boardlistDescription">
									{lang}{if $board->allowDescriptionHtml}{@$board->description}{else}{$board->description}{/if}{/lang}
								</p>
							{/if}
								
							<p class="boardlistCounter">
								{lang}wbb.board.clicks{/lang} {#$board->getClicks()}
							</p>
							
							{if $child.additionalBoxes|isset}{@$child.additionalBoxes}{/if}
						</div>
					</div>
			{/if}
			
			{if $hasChildren}<ul id="category{@$boardID}">{else}</li>{/if}
			{if $openParents > 0}{@"</ul></li>"|str_repeat:$openParents}{/if}
		{/foreach}
	</ul>
{/if}

Das ist mein Code. Die Darstellung kann man auf den Screens sehen!

Maik · 21. Februar 2008

Hi und herzlich Willkommen auf tutorials.de

Wenn es Probleme mit der Seitendarstellung gibt, solltest du hier auch den CSS-Code veröffentlichen, denn aus dem Template-Codeschnipsel lässt sich die Ursache nicht ausmachen, und besser den geparsten Quellcode, also den vom Browser ausgegebenen HTML-Code zeigen.

Hightech Master · 21. Februar 2008

So sieht es im IE aus,

So soll es aussehen

also so sieht es im Firefox und im Opera aus!

Hier der CSS Code!

Code:

.mainMenu  {
background: url("../images/necto/background_menu.png") repeat-x;
min-width: 92px;
}

#mainMenu div ul li a img {
height: 0;
overflow: hidden;
position: absolute;
left: -9000px;
max-width: 8000px;
position: center;
}

.mainMenu a:hover {
background: url("../images/necto/background_menuHover.png") no-repeat;
min-width: 92px;
}

.mainMenu a {
border: 0px solid #8da4b7;
border-width: 0 0px;
padding: 3px 5px;
min-width: 92px;
min-height: 24px;
}

#userPanel{
position: absolute;
top: 90px;
left: 550px;
z-index:100;
height: 15px;
background: url("../images/mafix/userCPBG.png") repeat-x;
padding: 0 0 0 0;
width: 100%;
}

#date {
position: absolute;
right: 100px; 
}

#main {
max-width: 99%;
padding-top: 30px;
padding-left: 7px;
}

#search {
position: absolute;
top: 138px;
}

#boardList {
max-width: 86%;
}

/* ### -- -- -- -- -- Abschlussgrafiken -- -- -- -- -- ### */
.obenlinks {
background: url("../images/necto/containerHead_left.png");
background-repeat: no-repeat;
background-position: bottom left;
padding-left: 342px;
height: 31px;
}
.obenmitte {
background: url("../images/necto/containerHead_center.png");
background-repeat: repeat-x;
}

.obenrechts {
background: url("../images/necto/containerHead_right.png");
background-repeat: no-repeat;
background-position: bottom right;
padding-right: 164px;
height: 31px;
}
.untenlinks {
background: url("../images/WoltLab Blue Sunrise/untenlinks.gif");
background-repeat: no-repeat;
background-position: top left;
padding-left: 100px;
height: 11px;
margin: -7px auto 15px auto;
}
.untenmitte {
background:url("../images/WoltLab Blue Sunrise/untenmitte.gif");
background-repeat: repeat-x;
background-position: top;
padding-left: 25px;
height: 11px;
}
.untenrechts {
background: url("../images/WoltLab Blue Sunrise/untenrechts.gif");
background-repeat: no-repeat;
background-position: top right;
padding-right: 25px;
height: 11px;
}

.neu {
background: url("../images/necto/containerHead_center.png");
background-repeat: no-repeat;
background-position: bottom left;
padding-left: 1px;
height: 1px;
}

.neulinks {
background: url("../images/necto/containerHead_left.png");
background-repeat: no-repeat;
background-position: bottom left;
padding-top: 10px;
padding-left: 342px;
height: 31px;
}

.neumitte {
background: url("../images/necto/containerHead_center.png");
background-repeat: repeat-x;
background-position: bottom;
padding-top: 0px;
}

.neurechts {
background: url("../images/necto/containerHead_right.png");
background-repeat: no-repeat;
background-position: bottom right;
padding-top: 0px;
padding-right: 164px;
height: 31px;
}

.fix {
 position: relative;
 top: -10px;
 left: -275px;
}

.containerHeadIcon {
 position:relative;
 top: 18px;
 left: 250px;
 font-color: white;
}

.fix_second {
 max-height: 1px;
}

.containerHeadFont {
   color: white;
}

.copyright {
  color: #fff;
  position: relative;
  bottom: 10px;
}

/* ### -- -- -- -- -- Abschlussgrafiken -- -- -- -- -- ### */

.container-1 {background: #F8FAFB url(../images/necto/background_container_one_right.png) no-repeat top right !important;}
.container-2 {background: #E8F1F9 url(../images/necto/background_container_second_right.png) no-repeat top right !important;}

.messageLeft, .messageRight, .messageFramedLeft, .messageFramedRight, .messageTop, .messageFramedTop {
background-image: url("../images/necto/messageSidebar.jpg");
background-repeat: repeat-x;
}

.threadStarterPost .messageLeft, .threadStarterPost .messageRight, .threadStarterPost .messageFramedLeft, .threadStarterPost .messageFramedRight, .threadStarterPost .messageTop, .threadStarterPost .messageFramedTop  {
background-image: url("../images/necto/messageSidebarThreadStarter.jpg");
background-repeat: repeat-x;
}

fish-guts · 22. Februar 2008

Moin

Dein Zweiter Link funktioniert nicht. Und mit dem CSS Code alleine können wir nicht so viel Anfangen. Machs nochmals in einem browser auf, und Kopiere dann den Quelltext hierher, damit wir es ggf. auch offline bei uns testen können.

Gruss

FG

Maik · 22. Februar 2008

fish-guts hat gesagt.:
Und mit dem CSS Code alleine können wir nicht so viel Anfangen. Machs nochmals in einem browser auf, und Kopiere dann den Quelltext hierher, damit wir es ggf. auch offline bei uns testen können.

Aus diesem Grund schrieb ich bereits gestern Mittag:

Maik hat gesagt.:
[...] solltest du hier auch den CSS-Code veröffentlichen, denn aus dem Template-Codeschnipsel lässt sich die Ursache nicht ausmachen, und besser den geparsten Quellcode, also den vom Browser ausgegebenen HTML-Code zeigen.

Hightech Master · 22. Februar 2008

so, hier der AugabeCode, Richtig mit Opera und Falsch mit IE7!

Darstellung im Internet Explorer 6/7 falsch!

Hightech Master

Grünschnabel

Maik

Hightech Master

Grünschnabel

fish-guts

Erfahrenes Mitglied

Maik

Hightech Master

Grünschnabel

Anhänge

Neue Beiträge