CSS Darstellung mit IE und CMS

ly654 · #1 (**permalink**) 28.11.2005, 22:07

Hallo zusammen,

ich versuche ein Layout für meine neue Seite zu erstellen was im Firefox auch so aussieht wie es soll aber nicht im IE.

Ich erstelle dieses mit dem CMS "Der-Dirigent"

Ich habe nun das Forum durch sucht aber keine Antwort auf meine Frage gefuden.

Ich hoffe kommt mit dem Code klar und ich erschlage euch nicht
Würde mich über Hilfe freuen.

Gruß LY654

Die Box mit dem orangen-Dreieck soll über allem drüber liegen (überdecken) ich habe es mit z-index versucht aber es gelingt mir einfach nicht.
Das ist dar Code für die Ausgabe im Frontend
Die <dedi:lay> Tags sind "Platzhalter" für das CMS

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <dedi:lay type="head"/>
    <title><?PHP echo $con_side[$idcatside]['name']." - ".$_SERVER['SERVER_NAME'];?></title>
    <link rel="stylesheet" type="text/css" href="cms/css/style.css" media="screen, projection" />
    
    <link rel="stylesheet" type="text/css" href="cms/css/druck.css" media="print" />
  </head>
  <body>
<div id="logo"><dedi:lay type="container" id="1" title="img"/></div>
<div id="drum" class="clearfix">
         <a id="top" name="top"></a>
      <p id="skip">
           </p>
          <div id="head" class="clearfix">
        <dedi:lay type="container" id="3" title="Suche"/>
        <dedi:lay type="container" id="5" title="HeadNavi"/>
      </div>
      <div id="inhalt">
        <dedi:lay type="container" id="10" title="Content 1"/>
        <dedi:lay type="container" id="20" title="Content 2"/>
        <dedi:lay type="container" id="30" title="Content 3"/>
      </div>
      <div id="navi">
        <dedi:lay type="config"/>
      </div>
      <dedi:lay type="container" id="50" title="Footer"/>
    </div>
</body>
</html>

Diese Datei ist für das Grundgerüst (style.css)

Code:

/*
Grundeinstellungen                         */
*{
margin:0;
padding:0;
}
body{
font:100.01% Verdana,Geneva,Arial,Helvetica,sans-serif;
min-width:47.5em;
text-align:center;
}
img{
border:0px solid #FFFFFF;
}

#logo{
margin:0 auto;
text-align:left;
width:60.5em;
z-index:5;
}

#drum{
margin:0 auto;
text-align:left;
width:60.5em;
z-index:4;
}

#footer{
clear:both;
}
#inhalt{
float:right;
margin-right:1.0em;
width:58.3em;
z-index:3;
}

#skip a{
height:0;
left:2em;
overflow:hidden;
position:absolute;
top:1em;
width:0;
}
#skip a:active,#skip a:focus{
background:#A8BADE;
border:#E6EAC6 2px solid;
color:#595959;
font-weight:bold;
height:auto;
overflow:visible;
padding:.5em;
width:auto;
z-index:100;
}
.clearfix:after{
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
.clearfix{
display:inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix{
height:1%;
}
.clearfix{
display:block;
}
/* End hide from IE-mac */
/* falls der EDITbutton verdeckt wird
hier versuchen                     */
.dedieditgif{
}
/* Hover verlinkte Bilder unterdrücken */
#inhalt a img{
vertical-align:bottom;
}
/* Grundeinstellungen            ENDE

/* Navigation                    ENDE
Hilfsnavigation HEAD               */
#head ul{
clear:right;
list-style:none;
padding-top:3.7em;
padding-left:3em;
text-align:center;
width:58em;
}
#head li{
display:inline;
list-style:none;
}
#head ul li span{
height:0;
left:-1000px;
position:absolute;
top:-1000px;
width:0;
}
#head a{
margin:0 .3em -1px 0;
padding:4px 9px 1px 9px;
text-decoration:none;
}
/* Hilfsnavigation HEAD          ENDE
Footer                             */
#footer{
margin:.2em 2em .2em 0;
text-align:right;
}
/* Footer                        ENDE
Suche                              */
.search{
float:right;
margin-top:.2em;
width:11.5em;
}
.search input{
font-size:.7em;
}
.search label{
height:0;
left:-1000px;
position:absolute;
top:-1000px;
width:0;
}
/* Suche                         ENDE
Gaestbuch-Style                    */
#gast p{
margin:0;
}
.gb{
height:7em;/* IE */
margin:10px 0;
padding:10px;
position:relative;
}
.gb input,.gb textarea{
font-family:"Courier New",Courier,monospace;
margin-top:3px;
}
.gb label{
clear:left;
float:left;
margin-top:3px;
padding-right:4px;
text-align:right;
width:7em;
}
.gb textarea{
width:250px;
}
.gbantw{
padding:4px 10px 4px 10px;
position:relative;
z-index:2;/* Opera */
}
.gbcomm{
position:relative;
z-index:2;/* Opera */
}
.gbhead{
font:italic .8em Verdana,Geneva,Arial,Helvetica,sans-serif;
margin-bottom:10px;
position:relative;
z-index:2;/* Opera */
}
.gbneu{
text-align:center;
}
.gbnum{
font:italic bold 8em/1em "Courier New",Courier,monospace;
left:15px;
position:absolute;
top:0;
}
#gast{
padding:4px;
}
html>body .gb{
height:auto;/* Mozilla,Opera u.a. */
min-height:7em;/* Mozilla,Opera u.a. */
}
/* Gaestbuch-Style             ENDE
Kontaktformular                  */
#feedback{
margin:1em;
}
#feedback fieldset{
padding:1em 0;
}
#feedback label{
clear:left;
cursor:pointer;
float:left;
margin-top:3px;
padding-right:4px;
text-align:right;
width:7em;
}
#feedback textarea,#feedback input{
margin-top:3px;
}
/* Kontaktformular              ENDE
Galerie                           */
.box{
float:left;
text-align:center;
}
#inhalt .box p{
font-size:.9em;
margin:.2em 0;
}
/* Galerie          ENDE          */

Und diese hier ist für meine Formatierungen (layout.css)

Code:

.gbneu a:hover,.gbneu a:active,.gbneu a:focus {background:#C7D5EB; color:#5A7BAD; }
.gbhead a:hover,.gbhead a:active,.gbhead a:focus {background:#C7D5EB; color:#595959; }
#head a:hover,#head a:active,#head a:focus,#head a.akt {background:#E6EAC6; color:#595959; }
#inhalt a:hover,#inhalt a:active,#inhalt a:focus {background:#C7D5EB; color:#595959; }
.gbneu a:hover,.gbneu a:active,.gbneu a:focus {background:#C7D5EB; color:#5A7BAD; }
.gbhead a:hover,.gbhead a:active,.gbhead a:focus {background:#C7D5EB; color:#595959; }
#head a:hover,#head a:active,#head a:focus,#head a.akt {background:#E6EAC6; color:#595959; }
#inhalt a:hover,#inhalt a:active,#inhalt a:focus {background:#C7D5EB; color:#595959; }
td {border:1px solid #5A7BAD; padding:.2em; }
table {border:1px solid #5A7BAD; border-collapse:collapse; margin:1em; }
.box {height:9em; margin:.6em 0 0 .6em; width:11.35em; }
#feedback textarea,#feedback input {border:#5A7BAD 1px solid; color:#595959; }
#feedback fieldset {border:#A8BADE 1px solid; }
.gbnum {background:transparent; color:#C7D5EB; }
.gbneu a {background:transparent; color:#595959; padding:2px 8px; }
.gbhead a {background:transparent; color:#595959; }
.gbantw {background:#C7D5EB; color:#595959; }
.gb input,.gb textarea {background:#E6EAC6; border:#5A7BAD 1px solid; color:#595959; }
.gb {background:#A8BADE; color:#595959; }
form #gast .gb {background:url(../mod/smileys/emoticons.gif) #A8BADE no-repeat top right; color:#595959; }
#footer a {background:#C7D5EB; color:#595959; text-decoration:none; }
#head a {background:transparent; border-left:1px solid #5A7BAD; border-right:1px solid #5A7BAD; border-top:1px solid #5A7BAD; color:#5A7BAD; }
#logo {z-Index: 5;}
.logo {z-Index: 5;}
#inhalt ul {letter-spacing:.04em; line-height:1.4; margin:1em 0 1em 2em; }
#inhalt h2 {font:1.2em Arial,Helvetica,sans-serif; letter-spacing:.1em; line-height:1.4; margin:.3em 0 .3em .1em; }
#inhalt h1 {font:1.4em Arial,Helvetica,sans-serif; letter-spacing:.1em; line-height:1.4; margin:.3em 0 .3em .1em; }
#inhalt p {letter-spacing:.04em; line-height:1.4; margin:1em 0 1em .7em; }
#inhalt a {background:transparent; color:#595959;}
.dedieditgif {;}
#inhalt {background:#E6EAC6; border:1px solid #5A7BAD; color:#595959; height: auto;height: 20 em; z-Index: 1;}
#footer {font:.8em Verdana,Geneva,Arial,Helvetica,sans-serif; }
#head {margin-top: -18em;}
#drum {border-bottom:1px solid #5A7BAD; border-left:1px solid #5A7BAD; border-right:1px solid #5A7BAD; color:#000000; background-color: #ffffff; margin-bottom: -5.0em;}
body {background:#dddddd; color:#595959;}
th {background:#EADBC6; border:1px solid #5A7BAD; padding:.2em .4em; text-align:center; }

dummschnigger · #2 (**permalink**) 28.11.2005, 23:36

Gibt es auch die Möglichkeit sich das mal irgendwo live anzusehen? Ich habe momentan weder Zeit noch Lust mir das lokal zu kopieren.

magick · #3 (**permalink**) 29.11.2005, 15:44

Mal einige Ansätze zu den IE-Problemen:

Code:

min-width:47.5em;

min-width kann der IE nicht.

Code:

.clearfix:after

:after kann der IE nicht.

Code:

padding-left:3em;
width:58em;

width = padding+border+width (nur im IE).

Code:

float:left;

Float nie ohne width.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Clearfix / CSS Reset / CSS Hacks 2016	Elma	CSS	7	14.08.2016 02:12
Sitecheck - Problem mit CSS und Darstellung mit Firefox	muijschen	Site- und Layoutcheck	2	27.07.2008 12:16
Wege zum guten CSS - Ausgewählte Links	Sp33dy G0nz4l3s	Ressourcen	1	27.05.2008 11:09
Image darstellung nur mit CSS	karschten	CSS	8	18.06.2005 23:32
unterschiedliche css darstellung IE und firefox	eyetag	Site- und Layoutcheck	3	12.04.2005 17:09