Zur Navigation

Template verschoben im IE

1 xelajo (Ex-Mitglied)

Hallo,
ich bin durch Zufall auf dieses Forum gestoßen und würde mich freuen, wenn man mir hier einen Tipp geben könnte mein Problem zu lösen!
Ich habe nicht viel, bzw. gar keine Ahnung von soetwas und bastle schon ne ganze Weile rum.
Ich habe eine neues Template, dass mit 98% CSS erstellt wurde.
Im Firefox wird es ohne Fehler dargestellt, im IE7 verschiebt sich das ganze komplett nach links.
Ich habe schon alles versucht es mittig zu bekommen, aber nichts klappt.
Wenn ich dem maincontent pixel zuweise klappt es, aber dass ist ja auch nicht die richtige Lösung!
Ich denke es liegt am stylesheet, siehe hier:

Danke vorab für Eure Hilfe!

body {
	color: #000000;
	margin: 0 0 -15px 0;
	background-image: url(img/bg.jpg);
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	
}

img{
	border:0;
}

A {
  color: #000000;
  text-decoration: none;
}

A:hover {
  color: #000000;
  text-decoration: underline;
}

FORM {
	display: inline;		   
}


A.pageResults {
	color: #000000;
	text-decoration: underline;
}

A.pageResults:hover {
  color: #ffffff;
  background: #5583b7;
}


TD.main, P.main {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

CHECKBOX, INPUT, RADIO, SELECT {
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
}

TEXTAREA {
  width: 98%;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

SPAN.greetUser {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #f0a480;
  font-weight: bold;
}

SPAN.underline {
	text-decoration: underline;
}

TABLE.formArea {
  background: #f1f1f1;
  border-color: #cccccc;
  border-style: solid;
  border-width: 1px;
}

.copyright {
  font-family: Verdana, Arial, sans-serif;
  font-size: 9px;
  line-height: 1.5;
  text-align:center;
}
.parseTime {
  font-family: Verdana, Arial, sans-serif;
  font-size: 9px;
  line-height: 1.5;
  text-align:center;
}

A.copyright {
  color: #000000;
}
A.copyright:hover {
  color: #000000;
  text-decoration: underline;
}


SPAN.markProductOutOfStock {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #c76170;
  font-weight: bold;
}

SPAN.productSpecialPrice {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}
SPAN.productOldPrice {
	font-family: Verdana, Arial, sans-serif;
	color: #ff0000;
	text-decoration: line-through;
}
SPAN.errorText {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}

SPAN.productDiscountPrice {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
  font-weight: bold;
}

.smallHeading {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-weight: bold;
	color: Black;
	border-bottom: 1px solid #000000;
}


/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }








.poweredby {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #000000;
  font-weight: bold;
}

.onepxwidth {
	width: 1px;
}



/*		Eigene Formatierung		*/


.clr {clear: both; margin: 0; padding: 0;}
.clrsmall {clear: both; margin: 0; padding: 0; height: 1px; overflow: hidden;}
.clrnone {clear: both; margin: 0; padding: 0; height: 0px; overflow: hidden;}
.clrmiddle {clear: both; margin: 0; padding: 0; height: 4px; overflow: hidden;}

label {width: 180px; display: block; float: left;}
legend {color: #575757;}
fieldset {border: 1px solid #6691c0; padding: 5px 5px 5px 10px;}


#topbg {
	height: 164px;
	background-image: url(img/topbg.jpg);

}

#topcontent {
  width: 980px;
  height: 90px;
  margin: 0 auto 0 auto;
}

#topcontent2 {
	position:absolute;
	top: 0px;
	right: 10%;
	width: 980px;
	height: 90px;
	margin: 0 auto 0 auto;
	background-image: url(img/top.png);
	background-position: top right;
	background-repeat: no-repeat;
}

#toplinkcopy {
  font-size: 10px;
  color: #454545;
  text-align: center;
  width: 120px;
  float: right;
  margin: 1px 0 0 0px;
  padding: 0 1px 0 0;
}

#topmenubox {
  clear: both;
  width: 980px;
  margin: 0 auto 0 auto;
  color: #ffffff;
  font-size: 11px;
}

#topmenu {
  width: 501px;
  height: 37px;
  float: left;
  background-image: url(img/topmenu.jpg);
}

.menutop {
  margin: 11px 0 0 0px;
  padding: 0;
}
.menutop li {
  display: inline;
  list-style-type: none;
  margin: 0;
  padding: 0;
}


.menutop li a {
  display: block;
  float: left;
  width: 124px;
  height: 25px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  font-weight: bold;
}

.menutop li a:hover {color: #ffffff;}

#searchbox {
  width: 370px;
  height: 24px;
  padding: 5px 0 0 10px;
  float: left;
  background-image: url(img/topsearch.jpg);
  margin: 8px 0 0 99px;
}


#maincontent {
  width: 980px;
  background: #ffffff;
  background-image: url(img/mainbg.jpg);
  background-repeat: repeat-x;
  border: 1px solid #000000;
  border-top: 0;
  border-bottom: 0;
  margin: 0 auto 0 auto;
  
}

#leftmenu {
  width: 202px;
  margin: 0px;
  float: left;
  padding: 0 0 0 5px;
}

#navtrail {
  width: 950px;
  padding: 6px 0 0 10px;
  font-size: 11px;
  margin: 0 0 6px 0;
}

#content {
  width: 550px;
  float: left;
  margin: 0 8px 0 8px;
}


#rightmenu {
  width: 202px;
  padding: 0 5px 0 0;
  float: left;  
}




#footer {
  width: 100%;
  height: 164px;
  background-image: url(img/footer1.jpg);
  margin: 0 auto 10px auto;
}

#commercial {
  width: 982px;
  height: 100px;
  margin: 0 auto 0 auto;
  text-align: center;
}


/*		########## Menu-Boxen Start ##########		*/

.menutopleft {
  width: 180px;
  height: 21px;
  padding: 6px 0 0 22px;
  background-image: url(img/menutop.jpg);
  margin: 0;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
}

.menucontentcat {
  padding: 1px 1px 0 1px;
  background: #ffffff;
  margin: 0 0 15px 0;
  font-size: 11px;
  border: 1px solid #cdcdcd;
  border-top: 0;
}

.menucontent {
  padding: 3px;
  background: #ffffff;
  margin: 0 0 15px 0;
  font-size: 11px;
  border: 1px solid #cdcdcd;
  border-top: 0;
}

.bestsellerbox {
  border-bottom: 1px dashed #cccccc;
  margin: 0 0 5px 0;
  padding: 4px;
}

.bestsellertopic {
  font-size: 10px;
  text-align: right;
  margin: 0; padding: 0;
}


/*		########## Menu-Boxen Ende ##########		*/




#loginboxtop {
  clear: both;
  width: 900px;
  padding: 5px 0 0 0;
}

#loginboxtop a {color: #ffffff;}


.loginfloattext {
  float: left;
  margin: 8px 5px 0 5px;
}

.loginfloatbut{
  float: left;
  margin: 4px 5px 0 5px;
}


.loginboxnew {
  margin: 5px 0 15px 0;
  padding: 0 0 5px 0;
  border-bottom: 1px dashed #000000;
}



/*		######## Start Produktinfo-Seite ########			*/


.pinfofacts {
  float: left;
  width: 170px;
  height: 17px;
  padding: 2px 5px 2px 5px;
  margin: 0 5px 0 0;
  font-size: 11px;
  border: 1px solid #ba3026;
  background: #ffdcd7;
}

.productbut {
  float: left;
  width: 170px;
  height: 20px;
  padding: 2px 5px 2px 5px;
  margin: 0 5px 0 0;
  font-size: 11px;
  border: 1px solid #6691c0;
  background: #dbe8fa;
}

.reviewsboxinfo {
  padding: 5px;
  background: #d0e0f6;
  border: 1px solid #4d7fb4;
  margin: 0 0 10px 0;
  font-size: 10px;
}

.leftsideproduct {
  clear: both;
  width: 210px;
  height: 225px;
  overflow: hidden;
  float: left;
  padding: 5px 0 0 0;
  margin: 0 116px 0 0;
  border: 1px solid #b2bc73;
  text-align: center;
}

.rightsideproduct {
  width: 207px;
  float: left;
  margin: 0;
}

.productdesc {
  clear: both;
  padding: 5px;
  margin: 0 0 10px 0;
  border: 1px solid #b2bc73;
}

.productdeschead {
  font-weight: bold;
  color: #000000;
  background: #dee5bd;
  border: 1px solid #b2bc73;
  border-bottom: 0;
  width: 200px;
  margin:0;
  padding: 5px;  
}

/*		######## Ende Produktinfo-Seite ########			*/



/*		######## Start Categorie-Listing ########			*/

.abstandcat {width: 12px; overflow: hidden; float: left;}

.subcat {
  width: 172px;
  height: 40px;
  overflow: hidden;
  text-align: center;
  float: left;
}

.subcat a {
  display: block;
  width: 160px;
  height: 28px;
  padding: 5px;
  background: #fafafa;
  border: 1px solid #adc2de;  
}

.subcat a:hover {background: #6691c0; color: #ffffff; text-decoration: none;}


/*		######## Ende Categorie-Listing ########			*/


/*		######## Start Bewertungen ########			*/


.reviewsbox {
  padding: 5px;
  background: #dbe8fa;
  border: 1px solid #6691c0;
  margin: 0 0 10px 0;
}

.reviewsboxinfo {
  padding: 5px;
  background: #dbe8fa;
  border: 1px solid #6691c0;
  margin: 0 0 10px 0;
  font-size: 10px;
}


/*		######## Ende Bewertungen ########			*/


/*		########## Ueberschriften ##########		*/

.h1topic {
  width: 539px;
  height: 21px;
  overflow: hidden;
  background-image: url(img/contenttop.jpg);
  background-repeat: no-repeat;
  border-right: 1px solid #e0dede;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 6px 0 0 10px;
  margin: 0 0 10px 0;
}

.h2topic {
  font-size: 12px;
  margin: 0 0 5px 0;
  padding: 0;
}

.h2topiclist {
  font-size: 11px;
  margin: 0 0 8px 0;
  padding: 1px 5px 5px 5px;
  background: #eaeaea;
 height: 36px;
 overflow: hidden;  
}
.h2topiclist a {color: #5c5c5c;}


/*		########## Diverses ##########		*/

.logoffbut {
  clear: both;
  margin: 0;
  padding: 12px 0 0 25px;
}

.logoffbut a {color: #ff0000; font-weight: bold;}


.boxlistingpic {
  margin: 5px 0 15px 0;
  text-align: center;
  height: 110px;
}

.pprice {
  padding: 5px;
  margin: 0;
}

.pricebox {
  text-align: center;
}

.boxlisting {
  width: 170px;
  height: 280px;
  border: 1px solid #e2e1e1;
  float: left;
  margin: 0;
}

.taxinfo {
  font-size: 10px;
}

.listabstand {
  float: left;
  width: 16px;
  overflow: hidden;
}


.headmessage {
  border: 1px dashed #000000;
  padding: 5px;
  margin: 5px 0 5px 0;
  text-align: center;
}

.accountleftbox {
  width: 250px;
  padding: 5px;
  float: left;
  margin: 0 0 0 7px;
  font-size: 11px;
}

.accountprice {
  text-align: right;
  padding: 0;
  margin: 0;
}

.trenner {
  height: 1px;
  overflow: hidden;
  background: #000000;
  margin: 4px 0 4px 0;
}


.listhori {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.listhori li {float: left;}

.historytabtop {
  border-bottom: 1px solid #4881c0;
  font-weight: bold;
  background: #a4c0d8;
  color: #ffffff;
  padding: 2px 0 2px 0;
}

.histsub {
  font-size: 11px;
}

.historyinvoice {
  width: 260px;
  height: 100px;
  padding: 5px;
  float: left;
  border-bottom: 1px solid #cccccc;
  border-top: 1px solid #cccccc;  
  font-size: 11px;
}

.historyblock {
  border: 1px solid #cccccc;
  padding: 4px;
  font-size: 11px;
  margin: 3px 0 6px 0;
}

.historyvalue {
  float: right;
  width: 400px;
  font-size: 11px;
  text-align: right;
}

.addresscolor {
  background: #d1e5f8;
  padding: 4px;
}

.addressleft {
  width: 270px;
  padding: 3px;
  margin: 0 50px 0 0;
  float: left;
  font-size: 11px;
  background: #d1e5f8;
}

.addressbutleft {
  width: 200px;
  float: left;
}

.giftcartbox {
  background: #ebeff2;
  border: 1px solid #a4c0d8;
  padding: 3px;
  text-align: center;
}

.littleaddress {
  font-size: 11px;
  border: 1px solid #a4c0d8;
  padding: 3px;
  margin: 2px 0 5px 23px;
}


.checkoutbox {
  width: 127px;
  padding: 4px 2px 4px 2px;
  overflow: hidden;
  text-align: center;
  float: left;
  margin: 0 0 0 5px;
  background: #cccccc;
  font-size: 10px;
}

.checkoutboxa {
  width: 127px;
  padding: 4px 2px 4px 2px;
  overflow: hidden;
  text-align: center;
  float: left;
  margin: 0 0 0 5px;
  background: #a4c0d8;
  font-size: 10px;
}


.payartbox {
  border: 1px dashed #5281b5;
  padding: 4px;
  margin: 3px 0 6px 0;
  background: #f7fbff;
}

.payselection {
  float: left;
  width: 40px;
}

.freeshipping {
  background: #d1e5f8;
  padding: 4px;
  margin: 4px 0 4px 0;
}

.partytitle {
  width: 410px;
  float: left;
  margin: 0 10px 0 0;
}

.agbcheckbox {
  background: #abc6e0;
  padding: 2px;
  margin: 3px 3px 15px 0;
}

.bearbeiten {
  color: #6584a2;
}

.confirmationbox {
  border: 1px solid #cccccc;
  padding: 4px;
  font-size: 11px;
}

.navigator {font-size: 11px;}

.productpricebox {
  width: 260px;
  float: right;
  text-align: right;
}

.ppics {
  width: 210px;
  float: left;
  text-align: center;
  border-right: 1px solid #cccccc;
  padding: 0 6px 0 0;
}

.productdesc {
  border: 1px solid #cccccc;
  padding: 5px;
  margin: 15px 0 15px 0;
  background: #f6f6f6;
}

.pinfooptions {
  padding: 2px;
  background: #6691c0;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 11px;
}

.headinggreen {
  padding: 4px;
  background: #6691c0;
  margin: 0;
  font-weight: bold;
  color: #ffffff;
  font-size: 11px;
}

.downloadbox {
  border: 1px solid #cccccc;
  padding: 4px;
  margin: 10px 0 10px 0;
}

.errosearchbox {
  width: 350px;
  padding: 5px;
  margin: 0 auto 0 auto;
  border: 1px solid #96beea;
  background: #d7e8fa;
}

.upcoming {
  width: 400px;
  float: left;
}

.upcomingdate {
  width: 140px;
  float: left;
  text-align: right;
}

.upcomingover {
  border-bottom: 1px solid #cccccc;  
  padding: 4px 0 4px 0;
  margin: 0 0 10px 0;
}

.artcont {
  width: 410px;
  float: left;
}

.artcontsize {
  width: 130px;
  float: left;
  text-align: right;
}

.artcontbox {
  border-bottom: 1px solid #cccccc;  
  padding: 4px 0 4px 0;
  margin: 0 0 10px 0;
}

gratuatebox {
  width: 200px;
}

.gratuatedleft {
  width: 100px;
  float: right;
  padding: 2px 0 2px 0;
}

.gratuatedright {
  width: 100px;
  float: right;
  padding: 2px 4px 2px 0;  
}

.smallText {
  font-size: 11px;
}

.totalblock {
  text-align: right;
  float: right;
}


/*		########## Menu ##########		*/
ul.navilist { list-style-type:none; margin:0px;padding:0px;}
li.maincat {padding:0px; margin: 0;}

 /*		##########Hauptkategorie ##########		*/
.maincat { list-style-type:none; margin: 0; padding: 0; border-bottom: 1px solid #ffffff;}
.maincat a {font-size: 11px; color:#101010; padding: 5px; display: block; background: #e0dede;}
.maincat a:hover{background: #6691c0; color: #ffffff; text-decoration: none;}
.maincat a.gewaehlt{background: #6691c0; color: #ffffff;}
.maincat a.gewaehlt:hover{background: #6691c0; color: #ffffff;}


 /*		##########Unterkategorie 1 Ebene  ##########		*/

.subcatlevel1 {margin: 0; padding: 0; border-bottom: 1px solid #ffffff;}
.subcatlevel1 a{font-size: 11px; color:#101010; padding: 5px 5px 5px 15px; display: block; background: #eaeaea;}
.subcatlevel1 a:hover {background: #6691c0; color: #ffffff; text-decoration: none;}
.subcatlevel1 a.gewaehlt{background: #6691c0; color: #ffffff;}
.subcatlevel1 a.gewaehlt:hover{background: #6691c0; color: #ffffff; text-decoration: none;}


/*		##########Unterkategorie 2 Ebene  ##########		*/
.subcatlevel2 {margin: 0; padding: 0; border-bottom: 1px solid #ffffff;}
.subcatlevel2 a{font-size: 11px; color:#101010; padding: 5px 5px 5px 25px; display: block; background: #f1f1f1;}
.subcatlevel2 a:hover {background: #6691c0; color: #ffffff; text-decoration: none;}
.subcatlevel2 a.gewaehlt{background: #6691c0; color: #ffffff;}
.subcatlevel2 a.gewaehlt:hover{background: #6691c0; color: #ffffff; text-decoration: none;}


/*		##########Unterkategorie 3 Ebene  ##########		*/
.subcatlevel3 {margin: 0; padding: 0; border-bottom: 1px solid #ffffff;}
.subcatlevel3 a{font-size: 11px; color:#101010; padding: 5px 5px 5px 35px; display: block; background: #f1f1f1;}
.subcatlevel3 a:hover {background: #6691c0; color: #ffffff; text-decoration: none;}
.subcatlevel3 a.gewaehlt{background: #6691c0; color: #ffffff;}
.subcatlevel3 a.gewaehlt:hover{background: #6691c0; color: #ffffff; text-decoration: none;}

04.08.2008 14:49

2 Jörg Kruse

Hallo xelaju,

welches Doctype verwendet die HTML-Datei? Wenn die Seite über keine Doctype-Angabe verfügt oder nur eine Transitional-Variante von HTML/XHTML verwendet, rendert der IE 6 + 7 die Seite im Quirks-Modus, d.h. so wie der IE 5. Dies hat u.a. auch zur Folge, dass der IE das "margin:auto" zum Zentrieren von Blockelementen ignoriert. Probier es in so einem Fall mal mit einer stricten Doctype-Angabe, z.B. für XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

04.08.2008 15:17 | geändert: 04.08.2008 15:18

3 xelajo (Ex-Mitglied)

Hallo Jörg,

vielen Dank für die schnelle Antwort!
Ich habe den Code eingefügt, cache gelöscht aber es ändert sich nichts im IE!
Auch die Boxenüberschriften sind kleiner als im Firefox.

Ich stelle das Template jetzt mal für kurze Zeit online, vielleicht kannst Du Dir es mal anschauen!?

www.xelajo-onlineshop.de

Tausend Dank!

04.08.2008 15:42

4 xelajo (Ex-Mitglied)

Hi, Jörg,

es funktioniert, nur lokal hat es nicht geklappt!
Suuuuuper!
Tausendmal Danke!

Gruß xelajo

04.08.2008 15:46

6 xelajo (Ex-Mitglied)

Hallo Dieter,

danke für Deinen Hinweis!

Das habe ich auch schon gesehen, aber da ich nicht viel Ahnung von der Materie habe, weiß ich nicht wie ich die Fehler beheben kann!

Ich werde mal wieder überall suchen müssen!

lg Petra

11.08.2008 07:09

7 Forum

Hallo Petra,

da deine Frage nichts mehr mit dem ursprünglichen Thema zu tun hat, habe ich sie mal in einen eigenen Thread verschoben und dort beantwortet:

Falsche Kodierung wird angezeigt

11.08.2008 08:41 | geändert von Jörg: 11.08.2008 08:43

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]