Problem mit CSS in Typo3

Roger80 · #1 30.03.08, 18:20

Hallo zusammen

Ich habe ein Problem, meine Seite wird im IE komplett auseinander gezogen. Im FF werden dafür die Pictures nicht angezeigt. Ich kriege langsam die Krise. :bang:
Als ich die Designvorlage erstellt habe, hat im IE und im FF alles paletti ausgesehen. Als ich die Designvorlage anschliessend in den Folder fileadmin importiert habe, hat nichts mehr geklappt. Hier noch mein CSS und HTML Code. Ich habe Euch noch 2 screenshots attached damit Ihr seht wie das Ganza aussieht. Das 1.te ist die Ansicht im FF ohne Bilder. Das 2te die Ansicht im IE wo die Seite massiv in die Länge gezogen wird (siehe seitliche Scrollbar), aber wieso?
Hoffe jemand kann helfen...

HTML Code:

HTML-Code:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- 
    This website is brought to you by TYPO3 - get.content.right
    TYPO3 is a free open source Content Management Framework created by Kasper Skaarhoj and licensed under GNU/GPL.
    TYPO3 is copyright 1998-2005 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
    Information and contribution at http://www.typo3.com
--> <style type="text/css">
        /*<![CDATA[*/
    <!--
    /* default styles for extension "tx_mininews_pi1" */
    .tx-mininews-pi1 .tx-mininews-pi1-listrow P.tx-mininews-pi1-listrowField-title { font-weight:bold; }
    .tx-mininews-pi1 .tx-mininews-pi1-listrow P.tx-mininews-pi1-listrowField-teaser { margin-bottom:15px; }
    .tx-mininews-pi1 .tx-mininews-pi1-fp_listrow P.tx-mininews-pi1-fp_listrowField-title { font-weight:bold; }
    .tx-mininews-pi1 .tx-mininews-pi1-fp_listrow P.tx-mininews-pi1-fp_listrowField-teaser { margin-top:0px; margin-bottom:10px; }
    .tx-mininews-pi1 .tx-mininews-pi1-singleView P.tx-mininews-pi1-singleViewField-teaser { font-style:italic; margin-top:5px; margin-bottom:10px; }
    .tx-mininews-pi1 .tx-mininews-pi1-browsebox P SPAN.tx-mininews-pi1-browsebox-strong { font-weight:bold; }
    .tx-mininews-pi1 .tx-mininews-pi1-listrow P.tx-mininews-pi1-listrowField-teaser A { color:black; text-decoration:none; }
    .tx-mininews-pi1 .tx-mininews-pi1-listrow P.tx-mininews-pi1-listrowField-teaser A:hover { color:black; text-decoration:none; }
    -->
        /*]]>*/
    </style> <link rel="stylesheet" type="text/css" href="fileadmin/css/style.css" /> <title>Home</title> <meta name="generator" content="TYPO3 3.8 CMS" /> <meta name="AUTHOR" content="Roger Böhlen" /> <meta name="DESCRIPTION" content="Sherins Kosmetikseite" /> <script type="text/javascript">
        /*<![CDATA[*/
    <!--
        browserName = navigator.appName;
        browserVer = parseInt(navigator.appVersion);
        var msie4 = (browserName == "Microsoft Internet Explorer" && browserVer >= 4);
        if ((browserName == "Netscape" && browserVer >= 3) || msie4 || browserName=="Konqueror" || browserName=="Opera") {version = "n3";} else {version = "n2";}
            // Blurring links:
        function blurLink(theObject)    {    //
            if (msie4)    {theObject.blur();}
        }
        
    // -->
        /*]]>*/
    </script> </head> <body bgColor = "#FFFFFF"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" href="css/style.css"
        type="text/css" /> <title>Sherin Cosmetics</title> </head> <body> <!-- ###DOKUMENT### begin --> <div id="main" > <!--Level1--> <div id="level_1_left" style="margin:auto;text-align:left"></div> <div id="level_1_logo"><img src="pictures\logo.jpg" class="logopicture"></div> <div id="level_1_navigation">###NAVIGATION###</div> <!--Level2--> <div id="level_2_left"></div> <div id="level_2_bordertop"></div> <div id="level_2_right"></div> <!--Level3--> <div id="level_3_left"></div> <div id="level_3_borderleft"></div> <div id="level_3_content">###CONTENT###</div> <div id="level_3_borderright"></div> <div id="level_3_right"></div> <!--Level4--> <div id="level_4_left"></div> <div id="level_4_borderbottom"></div> <div id="level_4_right"></div> <!--Level5--> <div id="level_5_left"></div> <div id="level_5_footer"><img src="fileadmin\pictures\footer.jpg"></div> <div id="level_5_right"></div> </div> <!-- ###DOKUMENT### begin --> </body> </html> </body> </html>

CSS Code:

HTML-Code:

/* CSS Document */

/**Text- und Bildklassen*/

.logopicture 
{
display:block;
padding-top: 45px;
line-height: 100%;    
}

.bodytext
{
    color: #353535;
    background-color: White;
    font-family: sans-serif;
    font-size: 12px;
}

.title
{
    color: #353535;
    background-color: White;
    font-family: sans-serif;
    font-size: 14px;
    font-style: bold;
    font-weight: bold;
}


/**Hauptbereiche*/
body{
    text-align:center;
    background-color: White;
}

div{
    background-color: White;
    width: 1024px;
    height: 768px;
    margin: auto;
}

div div {
    background-color: #ffb;
}

#div_main{
}

#level_1_left {
    background: white;
    width:206px;
    height: 256px;
    position: relative;
    left:-409px;
    top:0px;
}

#level_1_logo
{
    margin: auto;
    background: white;
    width:612px;
    height: 256px;
    position: relative;
    left:0px;
    top:-256px;
    margin: 0 auto;
    text-align: left;

}

#level_1_navigation
{
    margin: auto;
    background: white;
    width:206px;
    height: 256px;
    position: relative;
    left:409px;
    top:-512px;
    margin: 0 auto;
    text-align: left;
}

#level_2_left
{
    margin: auto;
    background: white;
    width:205px;
    height: 1px;
    position: relative;
    left:-409px;
    top:-512px;
    margin: 0 auto;
    text-align: left;
}

#level_2_bordertop
{
    margin: auto;
    background: #4C0707;
    width:614px;
    height: 1px;
    position: relative;
    left:0px;
    top:-513px;
    margin: 0 auto;
    text-align: left;
}

#level_2_right
{
    margin: auto;
    background: white;
    width:205px;
    height: 1px;
    position: relative;
    left:410px;
    top:-514px;
    margin: 0 auto;
    text-align: left;
}

#level_3_left
{
    margin: auto;
    background: white;
    width:205px;
    height: 340px;
    position: relative;
    left:-409px;
    top:-514px;
    margin: 0 auto;
    text-align: left;
}

#level_3_borderleft
{
    margin: auto;
    background: #4C0707;
    width:1px;
    height: 340px;
    position: relative;
    left:-306px;
    top:-854px;
    margin: 0 auto;
    text-align: left;
}

#level_3_content
{
    margin: auto;
    background: white;
    width: 612px;
    height: 340px;
    position: relative;
    left:0px;
    top:-1194px;
    margin: 0 auto;
    text-align: left;
}

#level_3_borderright
{
    margin: auto;
    background: #4C0707;
    width: 1px;
    height: 340px;
    position: relative;
    left:307px;
    top:-1534px;
    margin: 0 auto;
    text-align: left;
}

#level_3_right
{
    margin: auto;
    background: white;
    width: 205px;
    height: 340px;
    position: relative;
    left:410px;
    top:-1874px;
    margin: 0 auto;
    text-align: left;
}

#level_4_left
{
    margin: auto;
    background: White;
    width:205px;
    height: 1px;
    position: relative;
    left:-409px;
    top:-1874px;
    margin: 0 auto;
    text-align: left;
}

#level_4_borderbottom
{
    margin: auto;
    background: #4C0707;
    width:614px;
    height: 1px;
    position: relative;
    left:0px;
    top:-1875px;
    margin: 0 auto;
    text-align: left;
}

#level_4_right
{
    margin: auto;
    background: white;
    width:205px;
    height: 1px;
    position: relative;
    left:410px;
    top:-1876px;
    margin: 0 auto;
    text-align: left;
}

#level_5_left
{
    margin: auto;
    background: white;
    width:205px;
    height: 170px;
    position: relative;
    left:-409px;
    top:-1876px;
    margin: 0 auto;
    text-align: left;
}

#level_5_footer
{
    margin: auto;
    background: white;
    width:614px;
    height: 170px;
    position: relative;
    left:0px;
    top:-2046px;
    margin: 0 auto;
    text-align: left;
}

#level_5_right
{
    margin: auto;
    background: white;
    width:205px;
    height: 170px;
    position: relative;
    left:410px;
    top:-2216px;
    margin: 0 auto;
    text-align: left;
}

rosieres · #2 01.04.08, 16:46

FF => FIREBUG installieren
IE => iedeveloper toolbar installieren

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht	Thema bewerten
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln	Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit TYPO3 4.1.3	gerik	TYPO3 4.x Fragen und Probleme	0	09.11.07 14:17
css-TYPO3-IE-Problem	Brosius	HTML & CSS	1	19.06.07 14:44
Css Problem bei Typo3	egbrother	TYPO3 4.x Fragen und Probleme	6	30.05.07 13:33
Problem mit CSS und Typo3	fr-kenny	HTML & CSS	6	20.10.06 16:35
typo3 menu problem	mab82	GMENU, HMENU, TMENU und Co.	7	18.10.06 13:45

Suche

Userpanel

Problem mit CSS in Typo3