[sabmaz]

Hallo,

ich habe jetzt eine Website auf Basis von Typo3 erstellt:

| Unternehmen

Habe die Seite immer bisher nur im Internet Explorer 6.0 getestet, sieht 99% sauber aus!

Jetzt habe ich die Seite auch einmal im Firefox 2.0 bzw. IE 7.0 probiert. Doch leider ist das Layout ganz weit entfernt, wie im IE 6.0 (siehe Menüleiste oben am Rand, Abstände vom linken Content zum Maincontent mit den 3 Bildern etc.).

Die Seite habe ich durch den Validator überprüfen lassen (nur 6 kleine Fehler!)

Habe im TS-Setup folgenden Code eingefügt (LEIDER OHNE ERFOLG!:sad:

page.config.doctype = xhtml_trans
page.config.xmlprologue = none


Wäre für schnelle Hilfestellung sehr dankbar.

sabmaz
-----------------------------------------------------------

Hier mein CSS:

h1, h2, h3, h4, h5, h6, p, ul, ol, li, div, td, th, caption, form, fieldset, label, select, input, textarea, address, blockquote, nobr
{
font-family: Verdana, Arial, Helvetica, sans-serif;
}

a img { color: #fff; } /* hide the border in Netscape 4 */
@media all { /* hide from Netscape 4 */
a img { color: inherit; /* undo the rule above */
border: none; /* hide from Netscape 4 */
}
}

#anateks
{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003399;
font-size: 11px;
display: block;
margin-top: 20px;
margin-left: 20px;
margin-right: 2px;
margin-bottom: 20px;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
width: 240px;
height: 578px;
background-color: #ffffff;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}

#anateks a:link, #anateks a:visited
{
color: #cc0000;
text-decoration: none;
}


#anateks a:hover
{
background-color: #E7E7E7;
color: #000;
display: block;

}


#anateks a#current{
background-color: #E7E7E7;
}


#rssteks
{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003399;
font-size: 11px;
display: block;
margin-top: 20px;
margin-left: 0px;
margin-right: 2px;
margin-bottom: 20px;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
width: 455px;
height: 180px;
background-color: #ffffff;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}

#rssteks a:link, #rssteks a:visited
{
color: #cc0000;
text-decoration: none;
}


#rssteks a:hover
{
background-color: #E7E7E7;
color: #000;

}


#rssteks a#current{
background-color: #E7E7E7;
}


#sagteks
{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003399;
font-size: 11px;
display: block;
margin-top: 20px;
margin-left: 0px;
margin-right: 2px;
margin-bottom: 20px;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
width: 455px;
height: 152px;
background-color: #ffffff;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}

#sagteks a:link, #sagteks a:visited
{
color: #cc0000;
text-decoration: none;
}


#sagteks a:hover
{
background-color: #E7E7E7;
color: #000;

}


#sagteks a#current{
background-color: #E7E7E7;
}


#anaframe
{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003399;
font-size: 11px;
display: block;
margin-top: 20px;
margin-left: 20px;
margin-right: 2px;
margin-bottom: 20px;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
width: 700px;
height: 578px;
background-color: #ffffff;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}

#anaframe a:link, #anaframe a:visited
{
color: #003399;
text-decoration: none;
}

#anaframe a:hover
{
background-color: #E7E7E7;
color: #000;
}

#anaframe a#current{
background-color: #E7E7E7;
}




#naviteks {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 12px;
padding-right: 20px;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
}

#naviteks a:link, #naviteks a:visited
{
color: #003399;
text-decoration: none;
}

#naviteks a:hover
{
background-color: #003399;
color: #fff;
}

#naviteks a#current{
background-color: #003399;
}

.tx-newloginbox-pi1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003399;
font-size: 11px;

}

#tx-newloginbox-pi1-user {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003399;
font-size: 11px;
text-decoration: bold;
}

#tx-newloginbox-pi1-pass {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003399;
font-size: 11px;
text-decoration: bold;

}

#mateks {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003399;
font-size: 11px;
padding-right: 20px;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;

}

#mateks a:link, #mateks a:visited
{
color: #003399;
text-decoration: none;
}

#mateks a:hover
{
background-color: #003399;
color: #fff;
}

#mateks a#current{
background-color: #003399;
}

#mateks a.img{
background-color: none;
}

.csc-uploads-fileName {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003399;
font-size: 11px;
}

.csc-uploads-fileSize {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003399;
font-size: 11px;
}



#resimler
{
margin-top: 20px;
margin-left: 11px;
margin-right: 22px;
margin-bottom: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
height: 566px;
}
.box_header {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #FFFFFF;
background-color: #FF9900;
font-size: 10px;
padding-right: 10px;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
}


.box_content {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: none;
background-color: #E7E7E7;
font-size: 10px;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 20px;
}



.left_column {
background-color: #E7E7E7;
margin: 0;
padding: 0;
}

.left_column a{
color: #FB9F00;
text-decoration: none;
}
.left_column a:hover{
text-decoration: underline;
}





.center_column {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 0;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}

.center_column h1{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
margin: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 20px;
padding-bottom: 10px;
}

.center_column p{
margin: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 10px;

}

.center_column a{
color: #F45C20;
text-decoration: none;
}
.center_column a:hover{
text-decoration: underline;
}






#mainnavcontainer {
width: 151px;
}

#mainnavcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#mainnavcontainer ul li
{
margin: 0;
padding: 0;
}

#mainnavcontainer a
{
display: block;
padding-right: 10px;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
margin: 0;
width: 151px;
background-color: #D1D2D4;
border-bottom: 1px solid #fff;
}

html>body #mainnavcontainer a {
width: 131px;
}


#mainnavcontainer a:link, #mainnavcontainer a:visited
{
color: #000;
text-decoration: none;
}

#mainnavcontainer a:hover
{
background-color: #E7E7E7;
color: #000;
}

#mainnavcontainer a#current{
background-color: #E7E7E7;
}




#zusatznavicontainer {
width: 153px;
}


#zusatznavicontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

#zusatznavicontainer a
{
display: block;
padding-right: 10px;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
width: 151px;
background-color: #FB9F00;
border-bottom: 1px solid white;
color: white;
}

html>body #zusatznavicontainer a{
width: 133px;
}

#zusatznavicontainer a:link, #zusatznavicontainer a:visited
{
color: #white;
text-decoration: none;
}

#zusatznavicontainer a:hover
{
background-color: #FFB400;
color: white;
}



/* Login-Formulare */
/***************/
/* Farben:
#F6F6F6 = light grey
#707586 = medium blue
#333333 = dark grey
*/
/* Email, Login und Suchformulare allgemein: */
FORM TABLE { border: 1px solid #708586; font-size: 1em; padding: 0px; background-color: #f6f6f6; margin-left: 1px;}
FORM TABLE TR TD { padding-left: 1px; padding-right: 0px; }
FORM TABLE TR TD.csc-form-labelcell, FORM TABLE TR TD.csc-form-commentcell { }
FORM TABLE TR TD.csc-form-fieldcell { }
FORM TABLE TR TD.csc-form-fieldcell INPUT,
FORM TABLE TR TD.csc-form-fieldcell SELECT,
FORM TABLE TR TD.csc-form-fieldcell TEXTAREA { border: 3px solid #ff9900;}
FORM TABLE TR TD.csc-form-labelcell P.csc-form-label-req { font-weight: normal;}
FORM TABLE TR TD.csc-form-labelcell P.csc-form-label { font-weight: normal;}

/* Email-formular, gesondert */
FORM TABLE.csc-mailform TR TD.csc-form-labelcell { }





/*Styles der New Login Box*/
DIV.tx-newloginbox-pi1 {
background-color: transparent;
color: #003399;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
margin-left: -1px;
}
/*Ausrichten der überschriften*/
DIV.tx-newloginbox-pi1 H3 {
margin-left: 4px;
background-color: transparent;
color: #003399;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}

/*Ausrichtung der Texte*/
DIV.tx-newloginbox-pi1 P {
margin-left: 4px;
}

DIV.tx-newloginbox-pi1 TABLE {
margin-top:0px;
padding-top:0px;
padding-left:5px;
width: 215px;
margin-left: 3px;
}

DIV.tx-newloginbox-pi1 TABLE TR TD P {
margin-top:0px;
padding-top:0px;
margin-left: px;
}

DIV.tx-newloginbox-pi1 TABLE TR TD {
margin-top:0px;
padding-top:0px;
margin-left: 0px;
}

DIV.tx-newloginbox-pi1 TABLE TR {
margin-top:0px;
padding-top:0px;
margin-left: -0 px;
}

/*Ausrichtung des Submit Buttons*/

DIV.tx-newloginbox-pi1 TABLE TR TD INPUT.tx-newloginbox-pi1-submit {
margin-left: 0px;
margin-top: 6px;
border: 1px solid #999999;
background-color: #F00E10;
width: 70px;
heigh: 20px;
color: #ffffff;
font-size: 10px;
font-weight: bold;
}


/*Für den Inhalt der Eingabefelder*/
DIV.tx-newloginbox-pi1 TABLE TR TD INPUT {
margin-left: 0px;
margin-top: 4px;
border: 1px solid #999999;
background-color: #FFFFFF;
width: 130px;
}

DIV.tx-newloginbox-pi1 P.tx-newloginbox-pi1-forgotP {
margin-top:0px;
margin-left: 4px;
padding-top:0px;
width:100px;
}

DIV.tx-newloginbox-pi1 P.tx-newloginbox-pi1-forgotP A {
margin-top:0px;
margin-left: 0px;
padding-top:0px;
width:100px;
align: center;
}

DIV.tx-newloginbox-pi1 P.tx-newloginbox-pi1-back {
margin-top:0px;
margin-left: 4px;
padding-top:0px;
width:100px;
}

DIV.tx-newloginbox-pi1 P.tx-newloginbox-pi1-back A {
margin-top:0px;
margin-left: 4px;
padding-top:0px;
width:100px;
}

/*Ausrichtung des Usernamens, wenn angemeldet*/

DIV.tx-newloginbox-pi1 P.tx-newloginbox-pi1-username {
margin-left: 10px;
margin-top:0px;
padding-top:0px;
width:50px;
align: center;
}





#nav, #nav ul {
float: left;
width: 86em;
list-style: none;
line-height: 1em;
background: white;
color: #000;
font-weight: bold;
padding: 0;
border: solid #eda;
border-width: 1px 0;
margin: 0 0 1em 0;
}

#nav a {
display: block;
width: 10em;
color: #7C6240;

text-decoration: none;
padding: 0.25em 0em;
}

#nav a.menuparent {
background: url(arrow.gif) no-repeat 90% 40%;
}

#nav li {
float: left;
padding: 0;
width: 10em;
}

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14em;
font-weight: normal;
border-width: 0.25em;
margin: 0;

}

#nav li li {

width: 14em
}

#nav li ul a {
width: 14em;
padding-left: 1em;
}

#nav li ul ul {
margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
background: #eda;
color: white;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* mail form */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

fieldset.csc-mailform
{
border: none;
margin-top: 20px;
}

.csc-mailform label
{
width: 7em;
float: left;
font-size: 11px;
}

.csc-mailform input,
.csc-mailform textarea,
.csc-mailform select
{
font-size: 11px;
border: 1px solid #999999;
margin: 2px 0px;
}

.csc-mailform-field
{
clear: left;

}

.csc-mailform input.csc-mailform-submit
{
border: none;
background: #cc0000;
color: #FFFFFF;
cursor: pointer;
margin-left: 7em;
}

[ghoti]

Grundsätzliches: du solltest dir darüber im klaren sein, dass der IE6 die Größe einer Box (z.B.) anders berechnet, als der IE7 und FF (die es übrigens richtig machen). Hier findest du eine Erklärung dafür:
SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell

Ich kann dir jetzt nicht sagen, wo du was zu ändern hast, aber mein Vorschlag ist, dass du am padding was veränderst.

PS: Mein Ratschlag für die Zukunft - entwickele lieber Seiten im IE7 oder FF, die entsprechen wenigstens den Standards, und für den leidigen IE kann man Browserweichen definieren:
SELFHTML: Stylesheets / CSS-basierte Layouts / Browserweichen

[sabmaz]

Danke für den Hinweis.

Ich werde es probieren!

sabmaz