css design - jeder browser verstehts anders

Status
Nicht offen für weitere Antworten.

sh0x

Erfahrenes Mitglied
Grüße euch, CSSler,

Wollte eine Homepage mit CSS designen und bin wie es scheint noch ziemlich unbeholfen.
Auf jedem Browser sieht die Seite anders aus bzw. wird komplett zerstückelt und ich weiss nicht, was ich dagegen unternehmen kann.

Der Mozilla Firefox 1.0 zeigt folgendes an:
mozilla_firefox1.0.jpg


Der Opera 7.23 sieht die Sache eher so:
opera7.23.jpg


Der Netscape 7.1 interpretiert folgendermaßen:
netscape7.1.jpg


Und so wies der IE6.0 macht, soll es auch wirklich aussehen
ie6.0.jpg


Vielleicht hab ich echt alles falsch gemacht.
Das Menü wird als Tabelle includet. Habe auch versucht mit PS7.0 in Divs umzuwandeln, aber das gab noch mehr Probleme, so dass zwischen den Slices immer Abstände entstanden.

Hier nochmal der CSS-Code:
Code:
html,body {
	background-color:#2E8B57;
         color:#9c9;
         text-align:center;
         margin:0;
         padding:15px 0;
}



h1,h2,h3 {font-family:georgia,serif;
	text-align:center;padding-top:15px;padding-bottom:20px}
.content {
	font:86%/140% arial,sans-serif;
         padding:15px;
}


ul{      list-style-image:none;
            }

.fotos {
 float:left;
 border:1px solid gray;
 margin-left:15px;
 margin-bottom:15px;
    }

a:link 	{color:lightsteelblue; text-decoration:none;text-decoration:underline; }
a:visited{color:lightsteelblue;text-decoration:none; text-decoration:underline;}
a:hover 	{color:#4682B4; text-decoration:none; }
a:active {color:#6a6a6a; text-decoration:none; }
a:focus 	{color:#6a6a6a; text-decoration:none;}


.newsbox {
    margin-left:auto;
    margin-right:auto;
    width:610px;
    border: 1px solid gray;
}
.newsheader {
    background-color:#452;
    margin:15px;
    border:1px white solid;
    }
    
.newstitel {
    text-align:left;
    font-size:140%;
    font-family:georgia;
    font-weight:bold;
    }
.newsdatum {
    font-style:oblique;
    }
    
 .newscontent {
     margin:15px;

     }
.newsautor {
    }


.formbox {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width: 610px;
  color: #000;
  background-color: #FAEBD7;
  border: 1px grooved #789;
}

.reihe {
  clear: both;
  padding: 1px 0px;
  margin:1px;
}

.label {
  float: left;
  text-align: right;
  padding-right:6px;
  width: 250px;
}

.feld {
  float: right;
  text-align:left;
width: 300px;
}

.knopf {
  clear: both;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 30px;
}


img {
	border:0;

}

.defbreite {
  width: 143px;
}

.error,.notice {font-weight:bold;padding-left:10px;padding-right:10px;padding-top:15px;}
.error{color:red;}
.notice{color:green;}

#root {
         background-color:#100;
         width:740px;
         height:100%;
         margin-top:0;
         margin-right:auto;
         margin-bottom:0;
         margin-left:auto;
         border:1px dashed #FAEBD7;
         text-align:justify;
         width: 742px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:740px;
	}
 
 html>body #content {
	width:742px; /* ie5win fudge ends */
	}

#banner {
        background:url(../banner.jpg) no-repeat;
        height:80px;
        width:740px;

}

.bannerinhalt {
    font-size:70%;
    font-family:arial;
    padding-left:10px;
    float:left;
    }

#menu {
        height:207px;
        border-bottom:1px dashed #789;
        width:740px;
        cursor:crosshair;
}

(!) Ich bin dankbar für jede Hilfe oder jeden gutgemeinten Ratschlag sowie konstruktive Kritik (!)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück