Darstellungsproblem / in Firefox OK / im IE7 falsch dargestellt

Gast [ehemaliges Mitglied] · #1 09.03.08, 10:18

Hallo zusammen,

kurz vorweg...ich bin absoluter Typo3 Anfänger.

Ich habe mir nun ein Template gebaut, welches meinen Ansprüchen genügt.

Im Firefox wird es auch richtig dargestellt, nur im IE7 ist ragt mir das Logo nach rechts raus.

Leider weiß ich nicht, was ich tun muss um meine Page auch im IE7 richtig darzustellen.

Hat vielleicht einer von Euch einen Tip für mich?
Der Link zu meiner HP ist in meinem Profil hinterlegt.

Im voraus vielen Dank für Eure Hilfe

Hier mein CSS File:

Code:

body {
    color: black; 
    background-color: #000033;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0;
    text-align: center;  
  }

  div#Middle {
    text-align: left;    
    margin: 0 auto;     
    height: 435px;
    
  }

  div#Page {
    text-align: left;    
    margin: 0 auto;      
    width: 850px;
    padding: 0.5em;
    background-color: #FFFFFF;
  }

  html>body div#Page {
    border-color: gray; 
  }

  div#Menu {
    font-size: 9pt;
    float: left; 
    width: 200px;
    height: 100%;
    margin: 0; padding: 0;
    background-color: #FFFFFF;
  }

  div#Menu a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  div#Menu a:link {
    color: black; background-color: #eee;
  }
  div#Menu a:visited {
    color: #666; background-color: #eee;
  }
  div#Menu a:hover {
    color: black; background-color: white;
  }
  div#Menu a:active {
    color: white; background-color: gray;
  }


  .level1 {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
  }

  .level2{
    margin-left: 20px;
    margin-right: 10px;
  }

  .level3{
    margin-left: 30px;
    margin-right: 10px;
  }    

  .level4{
    margin-left: 40px;
    margin-right: 10px;
  }        

  div#Content {
    #margin-left: 200px;
    background-color: #FFFFCC;
    height: 433px;
    padding: 0 1em;
    #border: 1px dashed silver;
    overflow:auto;
  }
  div#Content h1 {
    font-size: 1.5em;
    margin: 0 0 1em;
  }
  div#Content h2 {
    font-size: 1.2em;
    margin: 0 0 1em;
  }
  div#Content p {
    font-size:0.7em;
    margin: 1em 0;
  }

  div#TopLayer {
    width: 100%;
    background-color: #000033;
    font-size: 70%;
    height: 20px;
  }

  div#LogoLayer {
    width: 100%;
    background-color: #000033;
    height: 50px;
  }

  div#RootlineLayer {
    width: 100%;
    background-color: #000033;
    height: 20px;
  }

  div#FooterLayer {
    width: 100%;
    background-color: #000033;
    height: 20px;
  }

Hier mein HTML Template:

Code:

<html>
<head>
<title>Seitentitel</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- ###DOCUMENT_BODY### START-->
<div id="Page">
    <div id="TopLayer">###ROOTLINE###</div>
    <div id="LogoLayer">###LOGO###</div>
    <div id="RootlineLayer"></div>
    <div id="Middle">
        <div id="Menu">
            <!-- ###MENU### START-->    
                <a href="einfuehrung.htm">Navigationslink</a>
              
            <!-- ###MENU### END-->
        </div>
          <div id="Content">
            <!-- ###CONTENT### START-->
                <h1>Willkommen</h1>
                <h2>Hier soll der Inhalt später stehen.</h2>
            <p>An dieser Stelle soll später der Inhalt von Typo3 eingefügt werden.</p>
            <!-- ###CONTENT### END-->
          </div>
    </div>
    <div id="FooterLayer"></div>
</div>
<!-- ###DOCUMENT_BODY### END-->
</body>
</html>

Gast [ehemaliges Mitglied] · #2 09.03.08, 13:12

Ich habe es nun durch hinzufügen von

Code:

div#LogoLayer img {
    width: 100%;
  }

in den Griff bekommen.

Ich denke mein bisheriger Code ist dennoch sehr optimierungsbedürftig, oder?

Für Hilfe wäre ich sehr sehr dankbar.

rolphee · #3 11.03.08, 15:02

Du solltest Dir meiner Meinung nach ein CSS Forum suchen wo du solche Fragen posten kannst, dies ist ein Typo3 Forum. So wirst du vermutlich mehr Antworten erhalten.

rl

fantomas · #4 20.03.08, 19:50

Hallo Porky
ich glaube du musst die Layer-Grösse im CSS anpassen. Der Explorer reagiert leicht anders.
Die Layer sprichst du oben falsch an. Bei mir funktioniert es so:

#inhalt {
padding-bottom:2px;
padding-right:2px;
width:720px;
}

*html div#inhalt { /* Korrektur fuer IE 5.x */

padding-bottom:2px;
padding-right:2px;
width:720px;
}

also mit einmal ganz normal und einmal mit
*html (abstand) div#namediv
danach kannst du verschiedenes ausprobieren.
aussenabstände mit margin anpassen, innenabstände mit padding. aber
das weisst du ja, wie man aus dem css oben entnehmen kann.

viel erfolg
fantomas

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
Darstellungsproblem bei Firefox	atzii	TYPO3 4.x Fragen und Probleme	2	02.07.08 10:28
Gelöst Leerzeichen werden falsch dargestellt	moohain	TYPO3 4.x Fragen und Probleme	6	12.11.07 12:57
Seite wird in Firefox falsch angezeigt	datrontypo3	TYPO3 4.x Fragen und Probleme	4	18.07.07 10:46
CSS Template wird in Typo3 falsch dargestellt	Anderl	TYPO3 4.x Fragen und Probleme	3	20.03.07 08:55
datetime im Backend falsch dargestellt	wwt	TYPO3 4.x Backend	2	07.03.07 09:28

Suche

Userpanel

Darstellungsproblem / in Firefox OK / im IE7 falsch dargestellt