Hallo Leute!
Ich hab ein Problem. Ich habe eine bereits vorhandene Homepage auf Typo3 umgebaut. Funktionierte soweit alles gut.
Nun habe ich aber ein Problem in der Darstellung im Internet Explorer.
Wie ihr seht, verschiebt sich irgendwie alles im IE nach links. Ich hab keine Ahnung wieso. Unter FireFox sieht alles richtig aus.
Im original besteht der Fehler nicht - ich versteh nicht warum, ich habe alle CSS-Datein kopiert.
Hat jemand eine Idee wodran das liegen könnte und wie ich das Ändern kann?
Hi!
statt
DIV.table_center {
MARGIN-LEFT: auto; MARGIN-RIGHT: auto; TEXT-ALIGN: left
}
einfach durch folgendes ersetzen:
DIV.table_center {
margin:0px auto;
}
Hoffe damit geholfen zu haben 😉
Für alle vernünftigen Browser gilt für die horizontale Zentrierung:
#umschliessenderDivContainer {
margin: 0 auto;
}
Für den IE6:
body {
text-align: center;
}
#umschliessenderDivContainer {
text-align: left;
}
hey klasse.
m.att lösungsvorschlag geht!
nur ist leider nun im FF alles nach links gerückt ... ich fang gleich an zu weinen 😉 😉
wie mach ich es, dass das automatisch unterschieden wird?
Welche Firefox version benutzt du?
Bei mir ist alles zentriert.
edit.:
ansonsten versuchs damit:
DIV.table_center {
MARGIN-LEFT: auto; MARGIN-RIGHT: auto; TEXT-ALIGN: left
*margin:0px auto;
}
das sternchen bewirkt, dass es nur vom IE gelesen wird.
edit2: Achso, das ist aus der style.css, ich war mal so frech einfach die css runterzuladen 😉
ich hab es nicht da geändert, sondern erst mal lokal auf meiner testumgebung.
das mit den sternen geht nicht
div.table_center, table {
*margin:0px auto;
margin-left: auto;
margin-right: auto;
text-align: left;
}
dann stimmt es wieder in FF aber nicht im IE.
brauch ich jetzt echt zwei css-Dateien oder darf ich noch hoffnung haben, dass man das in der CSS datei zurecht biegen kann?!
setze es am besten genauso rein wie ich es dir im post vorher schrieb:
DIV.table_center {
MARGIN-LEFT: auto; MARGIN-RIGHT: auto; TEXT-ALIGN: left
*margin:0px auto;
}
so und nicht anders, es kommt auch auf die reihenfolge an...
hab ich versucht.
In FF rückt es nach auf die linke Seite und in IE siehts gut aus.
ich benutze firefox 2.0
hmm bei mir geht es in beiden browsern und zwar mit dieser style.css datei:
(das ist deine css, nur an der relevanten stelle modifiziert. Überschreibe deine vorhandene einfach mit diesem, wenn es dann nicht funktioniert weiss ich auch nicht.)
HTML {
COLOR: #666666; BACKGROUND-COLOR: #f7ffff
}
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 11pt; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: auto; COLOR: #666666; PADDING-TOP: 0px; FONT-STYLE: normal; FONT-FAMILY: verdana, arial, sans-serif; BACKGROUND-COLOR: #f7ffff; TEXT-ALIGN: center
}
.mainheader {
PADDING-RIGHT: 6px; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 1.6em; PADDING-BOTTOM: 1px; BORDER-LEFT: gray 1px solid; COLOR: #666666; LINE-HEIGHT: 150%; MARGIN-RIGHT: 3px; PADDING-TOP: 0px; BORDER-BOTTOM: gray 1px solid; TEXT-ALIGN: right
}
#container {
MARGIN: 0px auto; WIDTH: 1000px
}
.space {
FONT-SIZE: 0px; MARGIN: 0px 0px 2px; LINE-HEIGHT: 0px
}
ACRONYM {
CURSOR: help
}
PRE {
MARGIN: 0%
}
H1 {
FONT-SIZE: 1.2em; COLOR: #000000
}
H2 {
FONT-SIZE: 1.8em
}
H3 {
FONT-SIZE: 1em
}
H4 {
FONT-SIZE: 1.2em
}
STRONG {
FONT-SIZE: 1em
}
H1.csc-firstHeader {
FONT-SIZE: 1.2em; COLOR: #000000
}
P.bodytext {
FONT-SIZE: 10px
}
LI {
FONT-SIZE: 10px
}
TABLE {
WIDTH: 500px
}
UL.csc-bulletlist {
FONT-SIZE: 10px
}
DIV.table_center {
TEXT-ALIGN: center
}
DIV.table_center {
MARGIN-LEFT: auto; MARGIN-RIGHT: auto; TEXT-ALIGN: left
*margin:0px auto;
}
TABLE {
MARGIN-LEFT: auto; MARGIN-RIGHT: auto; TEXT-ALIGN: left
}
.menu {
BORDER-RIGHT: blue 0px solid; BORDER-TOP: blue 0px solid; BORDER-LEFT: blue 0px solid; WIDTH: 50%; BORDER-BOTTOM: blue 0px solid; POSITION: absolute; TOP: 100px
}
.menu A {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 1.1em; COLOR: #666666; FONT-FAMILY: verdana, arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.submenu A {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 0.7em; COLOR: #666666; FONT-FAMILY: verdana, arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.menu {
COLOR: #810027
}
A:hover {
COLOR: #810027
}
A.contentmenu {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 1.1em; FONT-FAMILY: verdana, arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A.contentmenu_a {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 1.1em; FONT-FAMILY: verdana, arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A.contentmenu_i {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 1.1em; FONT-FAMILY: verdana, arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A.contentmenu_a {
COLOR: #810027
}
A.contentmenu_i {
COLOR: #666666
}
A.contentmenu {
COLOR: #666666
}
A.contentmenu_a:hover {
COLOR: #810027
}
A.contentmenu_i:hover {
COLOR: #810027
}
.submenu {
COLOR: #810027
}
A:hover {
COLOR: #810027
}
A {
FONT-WEIGHT: bold; FONT-SIZE: 1.1em; COLOR: #810027; LINE-HEIGHT: 1.5em; FONT-FAMILY: tahoma, verdana, sans-serif; TEXT-DECORATION: none
}
.headerlogo {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND-IMAGE: url(../images/gradient.header.gif); PADDING-BOTTOM: 0.3em; PADDING-TOP: 0.3em; TEXT-ALIGN: right
}
#content {
BORDER-RIGHT: blue 1px solid; BORDER-TOP: blue 1px solid; FONT-SIZE: 10pt; BORDER-LEFT: blue 1px solid; WIDTH: 100%; BORDER-BOTTOM: blue 1px solid; FONT-FAMILY: verdana, arial, sans-serif
}
#ie-float-bug {
FONT-SIZE: 10pt; WIDTH: 100%; FONT-FAMILY: arial, sans-serif; HEIGHT: 50px
}
#left {
WIDTH: 49%
}
#right {
WIDTH: 49%
}
#left {
FLOAT: left
}
#right {
FLOAT: right
}
.clear {
CLEAR: both; FONT-SIZE: 0px; LINE-HEIGHT: 0px; HEIGHT: 0px
}
.service {
BORDER-RIGHT: silver 1px solid; BORDER-TOP: silver 1px solid; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: silver 1px solid; BORDER-BOTTOM: silver 1px solid; HEIGHT: 400px
}
.service_menu {
BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: black 1px solid; PADDING-LEFT: 5px; BACKGROUND: silver; FLOAT: left; PADDING-BOTTOM: 5px; BORDER-LEFT: black 1px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: black 1px solid; HEIGHT: 100%
}
.service_overview {
BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: black 1px solid; PADDING-LEFT: 5px; BACKGROUND: darkgray; PADDING-BOTTOM: 5px; MARGIN: 0px 0px 0px 185px; BORDER-LEFT: black 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: black 1px solid; HEIGHT: 100%
}
#pagewidth {
BORDER-RIGHT: blue 0px solid; BORDER-TOP: blue 0px solid; MARGIN-LEFT: auto; BORDER-LEFT: blue 0px solid; WIDTH: 960px; MARGIN-RIGHT: auto; BORDER-BOTTOM: blue 0px solid; HEIGHT: 100%; TEXT-ALIGN: left; min-width: 960px
}
.leftcol {
BORDER-RIGHT: green 0px dotted; BORDER-TOP: green 0px dotted; Z-INDEX: 5; FLOAT: left; MARGIN-LEFT: -3px; BORDER-LEFT: green 0px dotted; WIDTH: 3px; MARGIN-RIGHT: 1px; BORDER-BOTTOM: green 0px dotted; POSITION: relative
}
.outer {
WIDTH: auto
}
.rightcol {
BORDER-RIGHT: green 0px dotted; BORDER-TOP: green 0px dotted; Z-INDEX: 5; FLOAT: right; MARGIN-LEFT: 1px; BORDER-LEFT: green 0px dotted; WIDTH: 3px; MARGIN-RIGHT: -2px; BORDER-BOTTOM: green 0px dotted; POSITION: relative
}
.inner {
MARGIN: 0px; WIDTH: 100%
}
.maincol {
FLOAT: left; MARGIN: 0px -8px 0px -2px; WIDTH: 100%; POSITION: relative
}
.clr {
CLEAR: both
}
.content {
BORDER-RIGHT: blue 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: blue 0px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: blue 0px solid; PADDING-TOP: 0px; BORDER-BOTTOM: blue 0px solid
}
#header .content {
PADDING-BOTTOM: 0px
}
#dropmenudiv {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; Z-INDEX: 19; PADDING-BOTTOM: 0px; WIDTH: 100%; CURSOR: pointer; PADDING-TOP: 12px; POSITION: absolute; HEIGHT: 8px; TEXT-ALIGN: left
}
#dropmenudiv A {
WIDTH: 100%; CURSOR: pointer; TEXT-INDENT: 3px
}
#dropmenudiv A:hover {
COLOR: #810027
}
#submenu {
}
#submenu {
COLOR: #810027
}
A:hover {
COLOR: #810027
}
#submenu A {
DISPLAY: block; FONT-SIZE: 0.9em; COLOR: #333; FONT-FAMILY: verdana, arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
UL {
MARGIN-TOP: 2px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; LINE-HEIGHT: 120%; PADDING-TOP: 2px
}
OL {
MARGIN-TOP: 2px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; LINE-HEIGHT: 120%; PADDING-TOP: 2px
}
A.submenu {
FONT-SIZE: 0.8em; COLOR: #666666; TEXT-DECORATION: none
}
A.submenu:hover {
COLOR: #810027
}
#sitemap {
WIDTH: 550px; POSITION: relative
}
#sitemap .col {
DISPLAY: inline; FLOAT: left; MARGIN: 0px 0px 10px 10px; WIDTH: 120px; POSITION: relative
}
#sitemap .clearer {
CLEAR: both
}
#sitemap A {
DISPLAY: block; PADDING-LEFT: 13px; BACKGROUND: url(../images/sn_end.gif) no-repeat 0px 4px; COLOR: #666666; POSITION: relative
}
#sitemap A:hover {
BACKGROUND-IMAGE: url(../images/sn_act.gif); COLOR: #810027
}
#sitemap H3 TD A {
FONT-WEIGHT: bold
}
#sitemap H4 TD A {
FONT-WEIGHT: bold
}
#sitemap H2 {
PADDING-RIGHT: 5px; PADDING-LEFT: 9px; FONT-SIZE: 13px; PADDING-BOTTOM: 9px; COLOR: #333; PADDING-TOP: 7px
}
#sitemap H3 {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: #e7e7e7; PADDING-BOTTOM: 2px; MARGIN: 0px; PADDING-TOP: 2px
}
#sitemap H4 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 14px 0px 0px 5px; PADDING-TOP: 0px
}
#sitemap H4.first {
MARGIN-TOP: 7px
}
#sitemap IMG {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; WIDTH: 0px; BORDER-BOTTOM: 0px; HEIGHT: 0px
}
Zitat: "DER GÄÄHT, DER GÄÄYHHHT!"
danke. wenn ich mal eine Foren-Heldenliste erstelle kommst du mit rauf =)
magst du mir nun noch sagen, was du genau geändet hast, damit ich was lerne.
Das habe ich dir schon vorher beschrieben. Aber schaue dir einfach zeile 57 an. Die habe ich hinzugefügt. Die frage ist was hast du gemacht, dass es nicht funktioniert hat?
Mach dir nichts draus, jeder fängt mal klein an 😉
Freut mich auf jeden fall, dass es jetzt funktioniert
Grüße
m.att