unterschiedliche Tabellendarstellung in IE und Firefox

MKPP · Beitrag von **MKPP** » Di 17. Feb 2009, 10:15

Hallo zusammen,

ich versuche mich mal wieder an der Nutzung von Contenido. Da ich bisher alles immer nur im IE getestet habe, ist mir folgender Fehler bisher nicht aufgefallen:

Das Layout habe ich mit Hilfe von einer Tabelle erstellt. Eine Zeile dieser Tabelle habe ich mit "height = 400" auf eine minimale Höhe von 400 Pixeln festgelegt. Das heißt, im IE ist dies eine minimale Höhe. Im Firefox ist dies dann eine definitive Höhenangabe, was dazu führt, dass längere Inhalte über den Tabellenrand hinausgehen ;-( .
Auch die Umstellung dieser Höhenangabe mit Hilhe einer Blindgrafik brachte am Ergebnis nichts. Woran mag es liegen? Was könnte ich ändern?

Mein body-Bereich sieht im Layout so aus:

Code: Alles auswählen

<body background="./upload/layout/hintergrund.gif">

<div align="center">
    <table border="0" width="890" id="table2" bgcolor="#000000" style="border-collapse: collapse" cellpadding="0">
        <tr>
            <td width="255" bgcolor="#000000" height="145">
            <p align="center">
            <img border="0" src="./upload/layout/fn.gif" width="180" height="147"></td>
            <td bgcolor="#000000" width="615" height="145">&nbsp;</td>
            <td bgcolor="#FF0000" width="20" height="145">
            <p align="center">
            &nbsp;</td>
        </tr>
        <tr>
            <td width="255" bgcolor="#969696" height="175">Messetermine 2009<p>04.- 
            07.05.2009 CoilWinding Berlin&nbsp;</td>
            <td bgcolor="#FFFFFF" width="615" height="175">
            <p align="center">
            <img border="0" src="./upload/layout/banner.jpg" width="615" height="175"></td>
            <td width="20" bgcolor="#000000" height="175">&nbsp;</td>
        </tr>
        <tr>
            <td width="255">&nbsp;</td>
            <td bgcolor="#000000" width="615">
                <div id="content">
                    <container id="31" name="Navigation_Pfad" types="Navigation" mode="fixed" default="Navigation_Breadcrumb">Navigation_Pfad</container>         
                </div>
            </td>
            <td width="20">&nbsp;</td>
        </tr>
        <tr>
            <td width="255" valign="top" height="400">
                <div id="navigation">
                    <container id="30" name="Navigation_Main" types="Navigation" mode="fixed" default="Navigation_Main">Navigation_Main</container>         
                </div>
            </td>
            <td bgcolor="#000000" width="615" height="400" valign="top">
                    <div id="content" style="width: 604px; height: 10px">
                        <container id="50" name="Headline" types="Content" mode="optional" default="Headline">Headline</container>
                        <container id="51" name="SubHeadline" types="Content" mode="optional" default="Sub_Headline">SubHeadline</container>
                        <container id="52" name="Text" types="Content" mode="optional" default="">Content 1</container>
                        <container id="53" name="Text" types="Content" mode="optional" default="">Content 2</container>
                        <container id="54" name="Text" types="Content" mode="optional" default="">Content 3</container>
                        <container id="55" name="Text" types="Content" mode="optional" default="">Content 4</container>
                        <container id="56" name="Text" types="Content" mode="optional" default="">Content 5</container>
                        <container id="57" name="Text" types="Content" mode="optional" default="">Content 6</container>
                        <container id="58" name="Text" types="Content" mode="optional" default="">Content 7</container>
                        <container id="59" name="Text" types="Content" mode="optional" default="">Content 8</container>
                    </div>
            </td>
            <td width="20" height="400">&nbsp;</td>
        </tr>
        <tr>
            <td width="255" height="50" bgcolor="#FF0000">&nbsp;
                    <container id="40" name="Search_Input" types="Content" mode="optional" default="Search_Input">Search_Input</container>            
            </td>
            <td bgcolor="#FFFFFF" width="615" height="50">
                    <div id="footerContentLeft">
                        <container id="75" name="Navigation_Meta" types="Content" mode="fixed" default="Navigation_Meta">Navigation_Meta</container> 
                    </div>
            </td>
            <td width="20" bgcolor="#000000" height="50">
            </td>
        </tr>
    </table>
</div>
         <container id="99" name="Text" types="Content" default="eTracker">eTracker</container>
</body>

Falls sich jemand die Seite mal anschauen möchte: http://www.nettelhoff.de/front_content.php?idcat=46

Beste Grüße
Manfred

PS:
Eventuell hilft auch noch der (fast) Standardinhalt des CSS-Files weiter...

Code: Alles auswählen

/**
 * CSS styles for Contenido sample client.
 * 
 * @author Rudi Bieller
 * @copyright four for business AG <www.4fb.de>
 * @version 1.0.0
 * 
 * created  2008-03-04
 * modified 2009-01-27 by Manfred Brinkschulte
 */

/* ----------------- general html structure */
html, body, div, p, td, a, input, textarea, select {
    font-family:Verdana, Arial, sans-serif;
    color:#606060;
}
html, body {
    margin:0;
    padding:0;
    /*overflow:auto;*/
}

html {
/*    background-image:url('../images/pattern_contenido.gif'); */
/*    background-position:0 140px; */
/*    height:100%; */
}
/*
body {
    background-image:url(../images/bg.gif);
    background-repeat:repeat-y;
    background-position:240px 0;
    height:100%; 
}
*/
form {
    margin:0;
    padding:0;
}

textarea {
    width:418px;
    height:85px;
}

img {
    border:0;
}
/* /----------------- general html structure */

/* ###################################################### */
/* ####################### HEADER ####################### */
/* ###################################################### */

#head h1 {
    display:block;
    float:left;
    padding:0 0 0 30px;
    margin:0;
    width:690px;
    height:60px;
    line-height:60px;
    font-weight:normal;
    color:#435d06;
    /* transparency */
    background-color:#fff;
    opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;
}

#head h1, #head a#logoTop {
    margin:90px 0 0 0;
}

/* ###################################################### */
/* ####################### MAIN BODY #################### */
/* ###################################################### */
#outerContainer {
    /*background-image:url('../images/pattern_contenido.gif');*/
    min-height:90%;
}
* html #outerContainer {
    height:90%;
}
#contentContainer {
    width:960px;
}
#outerContainer, #contentContainer {
    margin:0;
    padding:0;
}

#whiteBg {
    float:left;
    background-color:#fff;
    padding:0;
    margin:0;
    height:100%;
}

#navigation, #content, #teasersRight {
    float:left;
    padding-top:30px;
}
#outerContainer #contentContainer #content {
    padding-top:30px;
}

#contentContainer #navigation {
    width:240px;
    background-color:transparent;
}

#contentContainer #content {
    width:430px;
    padding:0 30px;
    margin:0;
}

#contentContainer #teasersRight {
    width:230px;
}


/* ###################################################### */
/* ####################### NAVIGATION ################### */
/* ###################################################### */

/* Level 1 */
#navigation ul {
    width:230px;
    margin:0;
    padding:0;
    background-color:transparent;
}
#navigation ul li {
    width:220px;
    margin:0;
    padding:0 0 0 10px;
    list-style-type:none;
}
#navigation ul li a {
    display:block;
    width:220px;
    height:19px;
    line-height:19px;
    margin:0;
    padding:0 0 0 10px;
    font-size:11px;
    color:#606060;
    background-image:url(../upload/navigation/fn_navi.gif);
    background-repeat:no-repeat;
    background-position: 200px 0;
    border-bottom:1px solid #606060;
    text-decoration:none;
}
#navigation ul li a:hover, #navigation ul li.active a {
    background-image:url(../upload/navigation/fn_navi_over.gif);
    background-repeat:no-repeat;
    background-position:0 0;
    color:#969696;
}

/* Level 2 */
#navigation ul.subNavigation {
    width:210px;
    margin:0;
    padding:0;
}
#navigation ul.subNavigation li a {
    background-image:url(../upload/navigation/fn_subnavi.gif);
    background-repeat:no-repeat;
    background-position:190px 0;
    border-bottom:1px dotted #606060;
    color:#606060;
    width:210px;
}
#navigation ul.subNavigation li.active a {
    color:#606060;
}
#navigation ul.subNavigation li a:hover, #navigation ul.subNavigation li.active a {
    background-image:url(../upload/navigation/fn_subnavi_over.gif);
    background-repeat:no-repeat;
    background-position:0 0;
    color:#606060;
}

/* Level 3 */
#navigation ul.subSubNavigation {
    width:200px;
    margin:0;
    padding:0;
}
#navigation ul.subNavigation li ul.subSubNavigation li a {
    background-image:none;
    border-bottom:0;
    color:#666;
    width:200px;
}
#navigation ul.subNavigation li ul.subSubNavigation li a:hover, #navigation ul.subNavigation li ul.subSubNavigation li.active a {
    background-image:url(../images/subsubnavi_over.gif);
    background-repeat:no-repeat;
    background-position:0 0;
}
/* ###################################################### */
/* ####################### SEARCH INPUT ################# */
/* ###################################################### */
#search {
    margin:20px 0 0 20px;
    font-size:11px;
    background-color:transparent;
}
#search label {
    font-size:11px;
    display:block;
    float:left;
    width:42px;
    padding:2px 0 0 0;
}
#search input {
    border:1px solid #ccc;
    width:140px;
    height:12px;
    font-size:10px;
}
#search input.sbmt {
    border:0;
    width:5px;
    height:8px;
    margin:0 0 0 10px;
}
/* ###################################################### */
/* ####################### SEARCH OUTPUT ################ */
/* ###################################################### */
#searchResults {
    margin:0 0 10px 0;
}
#searchResults p.message {
    margin:20px 0 30px 0;
}
#searchResults div.searchResultItem {
    border-bottom:1px solid #ccc;
    margin:0 0 10px 0;
    padding:0 0 10px 0;
}
#searchResults div.searchResultItem h2 {
    font-size:14px;
    margin:0 0 5px 0;
    padding:0;
    color:#0060b1;
    font-style:normal;
}

/* ###################################################### */
/* ####################### MAIN CONTENT ################# */
/* ###################################################### */
#content {
    font-size:11px;
    color:#333;
    line-height:14px;
}
#content h1, #content h2 {
    margin:0 0 10px 0;
    padding:0;
    font-size:20px;
    font-weight:normal;
    color:#333;
}
#content h1 {
    line-height:22px;
}
#content h1 a {
    color:#0060b1;
    text-decoration:none;
}
#content h2 {
    font-style:italic;
    font-size:11px;
}
#content table, tr, colgroup, col, thead, tbody, tfoot, th, td  {
    font-size:11px;
}

img.hr {
    display:block;
    margin:10px 0;
    padding:0;
}

/* ###################################################### */
/* ####################### RIGHT COLUMN ################# */
/* ###################################################### */
#teasersRight .teaserItem {
    color:#333;
    font-size:11px;
}
#teasersRight .teaserItem h3 {
    color:#0060b1;
    font-size:14px;
    margin:0 0 5px 0;
    font-weight:normal;
}

#teasersRight .teaserItem a.more {
    display:block;
    width:230px;
    margin:10px 0;
    padding:0 0 0 15px;
    background-image:url(../images/link_pfeil_klein.gif);
    background-repeat:no-repeat;
    background-position:0 5px;
}
* html #teasersRight .teaserItem a.more {
    width:200px;
}

/* ###################################################### */
/* ####################### FOOTER ####################### */
/* ###################################################### */
#footer {
    /*width:100%;*/
    height:104px;
    font-size:11px;
    background-color:#ccc;
    overflow:hidden;
}
#footerContainer {
    width:960px;
}
#footer a#logoBottom {
    display:block;
    float:left;
}

#footer #footerContentContainer {
    float:left;
    background-color:#F1F1F1;
    width:720px;
    height:104px;
}
#footerContentLeft, #footerContentRight {
    float:left;
    color:#999;
}
#footerContentLeft {
    width:450px;
    margin:10px 0 0 30px;
    font-size:10px;
    padding-right:10px;
}
* html #footerContentLeft {
    margin-left:15px; /* hae? */
}
#footerContentRight {
    width:220px;
    font-size:11px;
    background-color:#F9FBDD;
    padding-left:10px;
    height:104px;
}
* html #footerContentRight {
    padding-top:10px;
}

#footerContentRight h3 {
    font-size:11px;
}

#footerContentRight input {
    width:150px;
    height:12px;
    border:1px solid #ccc;
    font-size:10px;
    margin:0 0 4px 0;
}
* html #footerContentRight input {
    width:142px;
}

#footerContentRight label {
    display:block;
    width:60px;
    float:left;
    margin:0 0 4px 0;
}

#footer input#loginBtn {
    background-color:#F9FBDD;
    border:0;
    color:#0060b1;
    padding:0 20px 0 0;
    background-image:url(../images/link_pfeil_klein.gif);
    background-repeat:no-repeat;
    background-position:right 6px;
    font-size:12px;
    width:auto;
    height:auto;
    float:right;
    margin:0 10px 0 0;
}
* html #footer input#loginBtn {
    margin:0 14px 0 0;
}

ul#metaNavigation {
    margin:0 0 20px 0;
    padding:0;
}
ul#metaNavigation li {
    margin:0;
    padding:0 1px 0 8px;
    display:inline;
    border-left:1px solid #606060;
}

#logoutText {
    position:relative;
    height:70px;
}
#logoutText a {
    position:absolute;
    right:10px;
    bottom:10px;
    text-decoration:none;
}

/* ###################################################### */
/* ####################### LINKS ######################## */
/* ###################################################### */
a {
    color:#606060;
/*    color:#0060b1; */
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}

/* ###################################################### */
/* ####################### CONTACT FORM ############'#### */
/* ###################################################### */
#contactForm {
    font-size:11px;
}
#contactForm .contactRow {
    margin:4px 0;
}
#contactForm label {
    display:block;
    float:left;
    width:80px;
}
#contactForm .contactRow input, #contactForm .contactRow textarea {
    border:1px solid #ccc;
    width:346px;
}
#contactForm .contactRow select {
    border:1px solid #ccc;
    width:172px;
}
* html #contactForm .contactRow input, * html #contactForm .contactRow textarea {
    width:343px;
}

#contactForm .contactRow input {
    height:14px;
}

#contactForm .contactRow textarea {
    height:105px;
    font-size:10px;
}

#contactFormSubmit #contactFormSubmitLeft {
    float:left;
    margin:0 0 0 80px;
    width:174px;
}
* html #contactFormSubmit #contactFormSubmitLeft {
    margin:0 0 0 26px;
}
#contactFormSubmit #contactFormSubmitRight {
    float:right;
    width:174px;
}

#contactFormSubmit #contactFormSubmitLeft input, 
#contactFormSubmit #contactFormSubmitRight input {
    background-color:#fff;
    border:0;
    color:#0060b1;
    padding:0 20px 0 0;
    background-image:url(../images/link_pfeil.gif);
    background-repeat:no-repeat;
    background-position:right 4px;
    font-size:10px;
    width:auto;
    height:auto;
    float:right;
    margin:0;
}
#contactFormSubmit #contactFormSubmitLeft input {
    background-image:none;
    padding:0;
    float:left;
}

#contactForm table {
    width:100%;border-collapse:collapse;
}
#contactForm table td {
    padding:0;
}
#contactForm table td.pt {
    padding-top:2px;
}
* html #contactForm table td.pt {
    padding-top:0;
}
/* ###################################################### */
/* ####################### BACKEND STYLES ############### */
/* ###################################################### */
#modHeaderImgEdit {
    position:absolute;
    top:60px;
    left:270px;
}


/* good old clearfix - remember to use conditional comment for ie6 with .clearfix {height:1px;} */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */



/**** IMAGE GALLERY ****/
table.gallery {
    margin: 20px 10px 0px 0px;
    width: 410px;
}

table.gallery td.gallery-navigation {
    /*font-size: 0.6875em;*/    
}

table.gallery tr.thumbnails td {
    padding: 0;
}

table.gallery dd {
}

div.download {
    padding: 3px 0 3px 10px;
    background: url(../images/link_pfeil_klein.gif) no-repeat 0px 7px;

}

div.downloadImg {

    padding: 0;
    margin-top:10px;
    background: url(../images/navi_pfeil_rechts.gif) no-repeat 10px 7px;
}

dl.gallery-detail {
    margin: 20px 10px 0px 0px;
}

dl.gallery-detail dt {
    text-align: left;
    padding: 0;
}


td.gallery_image{
    height: 220px;
    padding:0px;
    
}
td.gallery_image div.link_image{
    padding:0;  
    background-position:top center; 
    min-height:120px; 
    margin-bottom:5px; 
    overflow:hidden;
}
td.gallery_image .bottom_links{
     height:40px; margin-top:10px;
}
td.gallery_image .bottom_links{
    margin-bottom: 0px; 
    text-align:left; 
    width:180px; 
}
td.gallery_image .links{
    margin-bottom: 0px;
}


/**
 * CSS styles for Contenido Sitemap.
 * 
 * @author Frederic Schneider
 * @copyright four for business AG <www.4fb.de>
 * @version 0.1.0
 * 
 * created 2008-04-11
 */

.sitemap, .sitemap ul {
        margin-left:0;
        padding-left: 0;
}

.sitemap li {
    border-bottom: 1px solid #ffffff;
    list-style-type: none;
}

.sitemap .level1 {
        background-color: #e6f1fb;
        padding: 3px 3px 3px 10px;
}

.sitemap .level2 {
        background-color: #f4f9fd;
        padding: 3px 3px 3px 30px;
}

.sitemap .level3 {
        background-color: #ffffff;
        padding: 3px 3px 3px 50px;
}

/* Only for IE */
*+html .sitemap .list2, * html .sitemap .list2 {
        margin-top: -14px;
}

Beitrag von **xmurrix** » Di 17. Feb 2009, 11:34

Hallo MKPP,

auf deiner Seite gibt es eher ein Problem mit den Floats. Die Navigation (<div id="navigation">) und der Contentbereich (<div id="content">) haben die CSS-Angabe float:left. Das macht aber bei keinen Sinn, weil du mit einem Tabellenlayout (muss das wirklich sein? mach es doch ohne das Tabellenkauderwelsch) arbeitest. Und der Contentbeereicht hat eine fixe Höhe von 10px, daher das Ergebnis bei Firefox.

Das Floaten behebst du, in dem du in der Stylesheet-Datei in der Zeile 100 das float:left; entfernst. Die Höhe des Contentbereichs ist inline definiert, da kannst du die Angabe "height: 10px" entfernen.

Ehrlich gesagt, wäre da schon noch einiges an Optimierung drin.

Gruß
xmurrix

MKPP · Beitrag von **MKPP** » Di 17. Feb 2009, 13:24

Hi xmurrix,

vielen Dank für Deine prompte Hilfe und zielsichere Fehlererkennung / -lösung. Alles funktioniert nun einwandfrei

Du hast natürlich Recht, Tabellen sind nicht die erste Wahl, aber da es mal eben schnell gehen muss (wie immer), wurde es "quick & dirty" realisiert. Da ich mich mit den CSS nicht (so gut) auskenne, habe ich das Layout einfach mal eben mit Tabellen realisiert und mich auf die Abänderung der Contenido-Standard-CSS beschränkt. Sicherlich ist da noch vielen zu optimieren bzw. zu ändern. Sicherlich auch der Verzicht auf das Tabellen-Layout.
Hast Du da eventuell Tipps, wie man sinnvoller vom Contenido-Beispiel auf eine eigene Darstellung kommt? Reicht es womöglich, vom Standard nur das CSS-File zu bearbeiten?

Beste grüße
Manfred

Beitrag von **xmurrix** » Do 19. Feb 2009, 00:14

MKPP hat geschrieben:...Hast Du da eventuell Tipps, wie man sinnvoller vom Contenido-Beispiel auf eine eigene Darstellung kommt? Reicht es womöglich, vom Standard nur das CSS-File zu bearbeiten?...

Das kann man so genau nicht sagen, es kommt immer auf das umzusetzende Design an. Das Layout des Contenido-Beispielmandaten ist ein klassisches 3-Spalten Layout mit Header, Footer und fixer Breite.

Code: Alles auswählen

-------------------------------------------
| header                                  |
-------------------------------------------
| navigation | content           | rechts |
-------------------------------------------
| footer                                  |
-------------------------------------------

Wenn die Seite, die du damit erstellst, auch das gleiche Grundgerüst hat, lässt sich die CSS-Datei den eigenen Wünschen anpassen und da ist viel Spieraum dabei. Wie man da am Besten vorgeht, ist auch eine Ansichtssache.

Man kann vorhandene CSS-Angaben bist auf das Grundgerüst löschen, um neu anzufangen, oder man passt die Formate Stück für Stück an zuerst das Grundgerüst (Maße für Header, Footer Contentspalten) und danach die Navigation und andere Bereiche.

Manchmal kann es auch einfacher sein, ein CSS-Layout von Grund auf neu zu erstellen, als ein vorhandenes anzupassen oder du nimmst dir eines der vorhandenen CSS-Frameworks als Grundlage und baust darauf dein eigenes Layout.

Den richtigen Weg oder eine allgemeingültige Lösung gibt es also nicht

Gruß
xmurrix

MKPP · Beitrag von **MKPP** » Do 19. Feb 2009, 16:29

Danke xmurrix,

sobald mein Sohn heute abend zu Bett gegangen ist, probiere ich es nach der Anleitung aus.

Beste Grüße
Manfred

Beitrag von **OliverL** » Mi 25. Feb 2009, 18:19

... verschoben.
Für mich ein CSS-Problem. Kein Tipp und kein Trick.
mfg OliverL

CONTENIDO Forum

unterschiedliche Tabellendarstellung in IE und Firefox

unterschiedliche Tabellendarstellung in IE und Firefox

Re: unterschiedliche Tabellendarstellung in IE und Firefox

Re: unterschiedliche Tabellendarstellung in IE und Firefox

Re: unterschiedliche Tabellendarstellung in IE und Firefox

Re: unterschiedliche Tabellendarstellung in IE und Firefox

Re: unterschiedliche Tabellendarstellung in IE und Firefox