✔ Seltsames Verhalten bei Tabellen in Div

rethus · 27. Dezember 2006

Auf folgender Seite: http://www.unser-horrem.de/cms/front_content.php?idcat=67 seht Ihr links zwei Teaser-Boxen. Im Mozilla werden die vernünftig untereinander dargestellt, aber der IE legt die Boxen übereinander.

Kann mir jemand einen Tipp geben, woran das liegen kann?Bin für jeden Tipp dankbar.

Dr Dau · 27. Dezember 2006

Hallo!

Liegt es evtl. daran weil Du die ID für TeaserHeader bzw. TeaserFooter mehrfach vergeben hast?

Gruss Dr Dau

rethus · 27. Dezember 2006

Tatsächlich habe ich die Tabelle mit einer ID versehen, die mehrfach verwendet wurde.
Dass habe ich jetzt abgeändert, indem ich direkt auf die Elemente im div-Layer bezug nehme:

Doch das Problem ist nochnicht gelößt.

Hier der HTML-Quelltext zur Seite:

Code:

	<div id="TeaserLayer">

<!-- BEGIN:BLOCK -->
<table cellspacing="0" cellpadding="0" align="right">
<thead>
	<tr>
		<th><h1>Presseportal.de - </h1></th>
	</tr>

</thead>
<tfoot>
        <tr>
                <td><img class="TeaserFooter" src="./upload/Layout/shadow.gif" alt=""></td>
        </tr>
</tfoot>
<tbody>
	<tr><td>
		<ul></ul>
		<br/>

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

</table>
<!-- END:BLOCK --> 
<!--
	<p>
		<a href="http://www.presseportal.de/images/pp_logo.gif" title="Presseportal.de"><img src="http://www.presseportal.de/images/pp_logo.gif" alt="Presseportal.de" border="0" /></a>
	</p>
-->
<!-- BEGIN:BLOCK -->
<table cellspacing="0" cellpadding="0" align="right">
<thead>
	<tr>
		<th><h1>Google News: Horrem horrem -dormargen -Dormagen -POL-REK</h1></th>
	</tr>
</thead>

<tfoot>
        <tr>
                <td><img class="TeaserFooter" src="./upload/Layout/shadow.gif" alt=""></td>
        </tr>
</tfoot>
<tbody>
	<tr><td>
		<ul>
		<li>
<!--                     <a href="http://news.google.de/news/url?sa=T&ct=de/0-0&fd=R&url=http://www.werbe-post.de/rag-wp/docs/40583/lokales&cid=0&ei=GISSRaDvEJ_CwQGovYWSDw" target="_blank">Festzelt darf doch auf Marktplatz - Werbepost Bergheim</a>
                     <a href="http://news.google.de/news/url?sa=T&ct=de/0-0&fd=R&url=http://www.werbe-post.de/rag-wp/docs/40583/lokales&cid=0&ei=GISSRaDvEJ_CwQGovYWSDw" onClick="fenster=window.open('', 'fenster','toolbar=no,status=no,menubar=no,scrollbars=auto,width=800,height=600')">Festzelt darf doch auf Marktplatz - Werbepost Bergheim</a>
-->
 <a href="http://news.google.de/news/url?sa=T&ct=de/0-0&fd=R&url=http://www.werbe-post.de/rag-wp/docs/40583/lokales&cid=0&ei=GISSRaDvEJ_CwQGovYWSDw" onClick="openWindow(this.href,'hallo','100','500'); return false;">Festzelt darf doch auf Marktplatz - Werbepost Bergheim</a>

                </li>
                
		<li>
<!--                     <a href="http://news.google.de/news/url?sa=T&ct=de/1-0&fd=R&url=http://www.ksta.de/html/artikel/1162473194944.shtml&cid=0&ei=GISSRaDvEJ_CwQGovYWSDw" target="_blank">Unzufriedenheit stets vermieden - Kölner Stadt-Anzeiger</a>
                     <a href="http://news.google.de/news/url?sa=T&ct=de/1-0&fd=R&url=http://www.ksta.de/html/artikel/1162473194944.shtml&cid=0&ei=GISSRaDvEJ_CwQGovYWSDw" onClick="fenster=window.open('', 'fenster','toolbar=no,status=no,menubar=no,scrollbars=auto,width=800,height=600')">Unzufriedenheit stets vermieden - Kölner Stadt-Anzeiger</a>
-->
 <a href="http://news.google.de/news/url?sa=T&ct=de/1-0&fd=R&url=http://www.ksta.de/html/artikel/1162473194944.shtml&cid=0&ei=GISSRaDvEJ_CwQGovYWSDw" onClick="openWindow(this.href,'hallo','100','500'); return false;">Unzufriedenheit stets vermieden - Kölner Stadt-Anzeiger</a>
                </li>
                
		<li>
<!--                     <a href="http://news.google.de/news/url?sa=T&ct=de/2-0&fd=R&url=http://www.sonntags-post.de/rag-spo/docs/38917/lokales&cid=0&ei=GISSRaDvEJ_CwQGovYWSDw" target="_blank">Hilfsaktion f&uuml;r Fußballer erfolgreich - Sonntags-Post</a>
                     <a href="http://news.google.de/news/url?sa=T&ct=de/2-0&fd=R&url=http://www.sonntags-post.de/rag-spo/docs/38917/lokales&cid=0&ei=GISSRaDvEJ_CwQGovYWSDw" onClick="fenster=window.open('', 'fenster','toolbar=no,status=no,menubar=no,scrollbars=auto,width=800,height=600')">Hilfsaktion f&uuml;r Fußballer erfolgreich - Sonntags-Post</a>
-->
 <a href="http://news.google.de/news/url?sa=T&ct=de/2-0&fd=R&url=http://www.sonntags-post.de/rag-spo/docs/38917/lokales&cid=0&ei=GISSRaDvEJ_CwQGovYWSDw" onClick="openWindow(this.href,'hallo','100','500'); return false;">Hilfsaktion f&uuml;r Fußballer erfolgreich - Sonntags-Post</a>

                </li>
                </ul>
		<br/>

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

</table>
<!-- END:BLOCK --> 
<!--
	<p>
		<a href="http://news.google.com/intl/de_de/images/news_res.gif" title="Google News: Horrem horrem -dormargen -Dormagen -POL-REK"><img src="http://news.google.com/intl/de_de/images/news_res.gif" alt="Google News: Horrem horrem -dormargen -Dormagen -POL-REK" border="0" /></a>
	</p>
-->

		    
		</div>

und hier der Stylesheed:

Code:

/* Überladung der Standart-Formatierungen 
 * zur optischen Gestaltung der Tewaserboxen 
 */
div#TeaserLayer
  {
position:relative;
top: 65px;
right:20px;
    float: right; 
    width: 210px;
    font-size: 0.85em; 
    /*margin: 65px 20px 0px 0px;*/
    background-color: #fff; 
  }

#TeaserLayer a {
    text-decoration:none;
    color: rgb(50,50,50);
}

#TeaserLayer a:hover {
    text-decoration:underline;           
}

#TeaserLayer h1 
{
    color: rgb(110,110,110);
    margin:7px 5px;
    font-size:1em;
    font-family: arial, verdana, helvetica, sans-serif;
    font-weight:bold;
    background:transparent;
    text-align:right;
}
#TeaserLayer th {
    background-color:#fff;
    background-image: url(../upload/Layout/teaser_head.jpg);
    background-repeat:repeat-y;
    border-left:  1px solid #C0C0C0;    
    border-right: 1px solid #C0C0C0;
    border-bottom: 1px solid #C0C0C0;
}
#TeaserLayer td {
    padding: 7px;
    width: 210px;
    border-left:  1px solid #C0C0C0;    
    border-right: 1px solid #C0C0C0;

}

#TeaserLayer ul {
    margin-bottom: 0px;
}
#TeaserLayer li {
    margin-left: -15px;
    /*padding:3px 0px;*/
    white-space: pre-wrap;
    text-decoration:none;
    list-style-type:none;
    list-style-image:url(../images/navi_pfeil_rechts.gif);
}


#TeaserLayer table
  {
    width: auto;
    text-align: right;
    padding:0px;
    font-size: 0.95em; 
    background-color: #fff; 
    border-top: 1px solid #C0C0C0;
  }
#TeaserLayer tbody
  {
    text-align: left;
    font-size: 0.95em; 
    background-color: #fff; 
  }
#TeaserLayer tfoot td
  {
    border-top: 1px solid #C0C0C0;    
    border-left:  0px solid #C0C0C0;    
    border-right: 0px solid #C0C0C0;    
    border-bottom:0px solid #C0C0C0;    
  }
img.TeaserFooter
  {
    margin-top:-7px;
    width:210px;
    background-color:#fffe;
    vertical-align:top;
  }

rethus · 27. Dezember 2006

Habs rausgefunden.
Der IE spinnt rum, weil ich align="right" in der Tabelle eingegeben habe:

Code:

<table cellspacing="0" cellpadding="0" align="right">

✔ Seltsames Verhalten bei Tabellen in Div

rethus

Erfahrenes Mitglied

Dr Dau

ich wisch hier durch

rethus

Erfahrenes Mitglied

rethus

Erfahrenes Mitglied

Neue Beiträge