Design wird im IE nicht richtig dargestellt
| Autor | Nachricht |
|---|---|
|
Verfasst am: 21. 12. 2010 [10:45]
|
|
|
nitramf
Themenersteller
Dabei seit: 29.11.2010
Beiträge: 8
|
Hallo! ich bin grad minimal am verzweifeln Es handelt sich um diese Seite: http://typo3.gutschein-king.eu/index.php?id=5 Im Firefox wird bei mir alles korrekt dargestellt, im Internet-Explorer ist es die reinste Katastrophe. Ich habe bei Google die Lösung gefunden, einfach ein text-align:center; in das CSS vom body einzufügen, habe ich probiert, bringt leider nix. Was kann ich noch tun? Ich würde mich freuen, wenn mir jemand helfen könnte Gruß, nitramf |
|
Verfasst am: 21. 12. 2010 [12:00]
|
|
|
ISS
Dabei seit: 05.10.2010
Beiträge: 50
|
hallo nitramf am einfachsten ist, wenn du eine browserweiche mit ts einbindest. TYPOSCRIPT [browser = msie] && [version=<7] page.includeCSS.file6 = fileadmin/css/menu_ie7.css page.includeCSS.file7 = fileadmin/css/style_ie7.css [global] [browser=msie]&&[version=8] page.includeCSS.file8 = fileadmin/css/menu_ie8.css page.includeCSS.file9 = fileadmin/tschau/css/style_ie8.css [global] [browser = netscape, mozilla, firefox] page.includeCSS.file10 = fileadmin/css/menu.css page.includeCSS.file11 = fileadmin/css/style.css [global] jetzt musst du für ie8 ie7 und tiefer und firefox ein eigenes temlplate und css file anlegen Gruss, ISS |
|
Verfasst am: 21. 12. 2010 [12:31]
|
|
|
nitramf
Themenersteller
Dabei seit: 29.11.2010
Beiträge: 8
|
Hallo, danke für die Antwort! das Problem ist, dass ich die Erweiterung TemplaVoila nutze, die wird mir da sicherlich rein funken, oder? Wenn ich es mit dem text-align probiere, geht es ja nicht, mal davon abgesehen, dass das Design dann im Firefox anders dargestellt wird. Können andere HTML Doctypes oder Header da helfen? Ich habe auch noch eine andere Frage, ich habe gerade die Richtige Schriftart eingebunden, allerdings wird diese nicht wirklich schön ausgegeben. Hier ist das Orginal. http://friedel.mivi-solutions.de/main/index.php Ich habe mich mit der Option niceText befasst, und denke dass sie abhilfe schaffen kann, allerdings wird einfach kein Text mehr angezeigt, sobald ich sie aktiviere. Woran kann das liegen? TYPOSCRIPT temp.menu = HMENU temp.menu { special = directory special.value = 1 1 = GMENU 1 { expAll = 1 noBlur = 1 wrap = <ul id="nav">|</ul> # wrap= <ul id="nav"><div style="margin-right:50px"> | </div> |*| | |*| |</ul> NO = 1 NO { wrapItemAndSub = <li style="margin-right:50px;">| </li>|*|<li>|</li> #wrapItemAndSub = <li>|</li> XY = 155, 25 backColor = #231F20 5 = IMAGE 10=TEXT 10 { text.field=title offset=10,20 fontColor = #FFFFFF fontFile=fileadmin/templates/lte50194.ttf fontSize=17 # niceText = 1 } } IFSUB = 1 IFSUB { wrapItemAndSub = <li>|</li> #155,25 XY = 155, 25 backColor = #231F20 5 = IMAGE 10=TEXT 10 { text.field=title offset=10,20 fontColor = #FFFFFF fontFile=fileadmin/templates/lte50194.ttf # niceText = 1 fontSize=17 } } } 2 < .1 2 { wrap = <ul class="wat"> | </ul> IFSUB { ATagParams = class="daddy" } } 3 < .2 } Gruß, nitramf /edit: hier meine Konfiguration: ImageMagick enabled: 1 ImageMagick path: /usr/bin/ (6.3.7) ImageMagick path/LZW: /usr/bin/ (6.3.7) Version 5/GraphicsMagick flag: im6 GDLib enabled: 1 GDLib using PNG: IM5 effects enabled: 0 (Blurring/Sharpening with IM 5+) Freetype DPI: 96 (Should be 96 for Freetype 2) Mask invert: (Should be set for some IM versions approx. 5.4+) File Formats: gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai [Dieser Beitrag wurde 2mal bearbeitet, zuletzt am 21.12.2010 um 12:48.] |
|
Verfasst am: 21. 12. 2010 [13:27]
|
|
|
ISS
Dabei seit: 05.10.2010
Beiträge: 50
|
hallo nitramf Zitat Frage1: das Problem ist, dass ich die Erweiterung TemplaVoila nutze, die wird mir da sicherlich rein funken, oder? Es tut mir leid, doch da ich noch nie mit TemplaVoila gearbeitet habe, kann ich dir diese Frage nicht beantworten. Doch mein Gefühl sagt mir, ja wird wohl reinfunken. Zitat Frage2: Wenn ich es mit dem text-align probiere, geht es ja nicht, mal davon abgesehen, dass das Design dann im Firefox anders dargestellt wird. Können andere HTML Doctypes oder Header da helfen? Dies sind eben so die Eigenheiten von IE... nein andere Header oder Doctypes werden nicht helfen... hier mal meine CSS zum zeigen, wwas so unterschiedlich ist bei ie und firefox: CSS für Firfox CSS body { background-color: #d7d7cf; padding:0px; margin:0px; font-family: Verdana, Geneva, sans-serif; color: #898A74; } #container { background-image: url(../images/sonstige/bk_gradient1.png); position:absolute; left:50%; width:951px; margin-left:-475px; background-color: #E3E3DE; padding-bottom:40px; } #head{ padding:0px; margin:0px; height:394px; } #header { width: 951px; height: 398px; } /* Bilder CSS */ #home { position:absolute; width: 33px; margin-top: -301px; margin-left: 595px; } #ausbildung { position:absolute; width: 33px; margin-top: -301px; margin-left: 628.5px; } #beziehung { position:absolute; width: 33.5px; margin-top: -301px; margin-left: 662px; } #freizeit { position:absolute; width: 33px; margin-top: -301px; margin-left: 695.5px; } #lebenswelt { position:absolute; width: 33px; margin-top: -301px; margin-left: 729px; } #wohlfuehlen { position:absolute; width: 33px; margin-top: -301px; margin-left: 762.5px; } #rechte { position:absolute; width: 33px; margin-top: -301px; margin-left: 796px; } #umwelt { position:absolute; width: 33px; margin-top: -301px; margin-left: 828.5px; } #multimedia { position:absolute; width: 33px; margin-top: -301px; margin-left: 862px; } #beratung { position:absolute; width: 34px; margin-top: -282.5px; margin-left: 898px; } #beratung_aktiv { position:absolute; width: 34px; margin-top: -299px; margin-left: 898px; } #kanton { position:absolute; top:5px; left: 715px; height: 10px; width: 170px; } #login { position:absolute; top:25px; right:0px; height: 95px; width: 375px; } #login_box { float: left; } #suche { position:absolute; top:50px; right:20px; } #headmenu { position: absolute; top: 95px; right: 0px; width: 360px; background: #000060; } #topmenu { padding:0px; margin: 0px; } #content_left{ background-image: url(../images/sonstige/bk_gradient1.png); margin-top: 30px; width: 360px; float:left; } #content_right{3 background-image: url(../images/sonstige/bk_gradient1.png); margin-top: 30px; width: 360px; float:left; } /* wenns nur eine Spalte in der Mitte hat */ #content_middle{ background-image: url(../images/sonstige/bk_gradient2.png); margin-top: 30px; width: 720px; float:left; margin-right: 5px; } #content_border{ margin-top: 30px; float:left; width: 225px; background-color: #DFDFD9; } #content_left .box_left{ padding-left: 25px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: dashed; border-bottom-style: none; border-left-style: none; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; background-image: url(../images/sonstige/bk_gradient1.png); background-repeat:no-repeat; } #content_middle .box_left{ padding-left: 25px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: dashed; border-bottom-style: none; border-left-style: none; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; background-image: url(../images/sonstige/bk_gradient2.png); background-repeat:no-repeat; } .box_left div.csc-default{ } #content_right .box_right{ border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: dashed; border-bottom-style: none; border-left-style: none; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; background-image: url(../images/sonstige/bk_gradient1.png); background-repeat:no-repeat; } #content_middle .box_right { padding-left: 25px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: dashed; border-bottom-style: none; border-left-style: none; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; background-image: url(../images/sonstige/bk_gradient2.png); background-repeat:no-repeat; } .box_border { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: dashed; border-bottom-style: dashed; border-left-style: none; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; padding-left: 5px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; } /* normaler Text - Grösse */ .bodytext, #content_middle li { font-size: 0.8em; } /* für frage stellen form */ #content_middle .bodytext textarea { background-image: url(../images/sonstige/bk_gradient3.png); background-repeat: no-repeat; width: 100%; border: 1px solid #898a74; font-family: Verdana, Geneva, sans-serif; background-color: #d5d5cd; } .bodytext label { float:left; width: 100px; font-weight: bold; clear: both; } .tx-iktschauquestions-pi1 .bodytext span { margin-left: 100px; display: block; } .tx-iktschauquestions-pi1 form .bodytext span { margin-left: 0px; display:inline; } #footer { float: none; height: 30px; background-color: #DDDCD5; position: absolute; bottom:0px; width:100%; color: #898A74; text-align:center; padding-top: 10px; } #footer a{ color: #898A74; font-size: 0.8em; font-weight:bold; background-color:#DDDCD5; text-decoration:none; } div.csc-textpic-left img{ margin-top:10px; } /* Extensions */ /* Themenblätter / Downloads */ .tx-abdownloads-pi1 { margin-top:15px; } /* Themenblätter / Downloads */ #content_border .tx_abdownloads_catalogView_categoryPath { display: none; } /* Links */ .tx-ablinklist-pi1 { padding-bottom:25px; } .tx_ablinklist_listView_linkAddNew { margin-top: 5px; float: right; font-size: 12px; text-decoration: none; border: #000000 thin solid; } /* Adressen */ .tx-ttaddress-pi1 { margin-top: 15px; font-size: 0.8em; } /* Adressen - Name */ .fn { font-weight: bold; width: 200px; } /* Adressen - Layout */ ul.vcard { list-style-type: none; padding: 0; margin: 0; } li.vcard_inner { float: left; width: 30px; font-weight: bold; margin: 0 20px 10px 0; } li.vcard_outer { float: left; width: 200px; padding: 0; margin: 0 0 10px 0; } li.clr { display: inline; margin: 0; padding: 0; width: 1px; } br.clr { clear: left; width: 1px; font-size:1px; margin: 0; padding: 0; overflow:hidden; } /* Spalten */ div.tx-rscontentcolumn-pi1 div.rightcol { padding:1%; width:47%; white-space:normal; float:left; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: none; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; border-top-style: none; border-bottom-style: none; border-left-style: solid; margin-bottom: 10px; } /* Login */ #login div.tx-felogin-pi1, #suche div.tx-macinasearchbox-pi1 { background: none; font-family: Verdana, Geneva, sans-serif; color: #898A74; font-size: 10px;; text-align: right; } #login div.tx-felogin-pi1 login_input { } .loginlink { text-decoration: none; color: #898A74; margin-right: 20px; } #login div.tx-felogin-pi1 div.login_button input { float: left; font-size: 12px; background-color: #FFF; color: #898a74; border: 1px solid #898a74; margin-top: 18px; margin-left: 4px; height: 20px; } #login div.tx-felogin-pi1 input, #suche div.tx-macinasearchbox-pi1 #searchform input{ font-size: 12px; background-color: #FFF; color: #898a74; border: 1px solid #898a74; } a.link-login { font-family: Verdana, Geneva, sans-serif; color: #898A74; font-size: 0.8em; } .logout-text { width: 350px; } /* Ende Extensions */ #schwarzer_balken { width: 951px; height: 24px; position: relative; float: left; margin-bottom: -24px; } CSS für IE8 CSS body { background-color: #d7d7cf; padding:0px; margin:0px; font-family: Verdana, Geneva, sans-serif; color: #898A74; } #container { background-image: url(fileadmin/images/Grafiken_Tschau/Sonstige/bk_gradient1.jpg); position:absolute; left:50%; width:951px; margin-left:-475px; background-color: #E3E3DE; padding-bottom:40px; } #head { padding:0px; margin:0px; height:394px; } #header { position:absolute; width: 951px; height: 398px; z-index: 10; } /* Bilder CSS */ #home { position:absolute; width: 33px; margin-top: 100px; margin-left: 595px; z-index: 11; } #ausbildung { position:absolute; width: 33px; margin-top: 100px; margin-left: 628.5px; z-index: 11; } #beziehung { position:absolute; width: 33.5px; margin-top: 100px; margin-left: 662px; z-index: 11; } #freizeit { position:absolute; width: 33px; margin-top: 100px; margin-left: 695.5px; z-index: 11; } #lebenswelt { position:absolute; width: 33px; margin-top: 100px; margin-left: 729px; z-index: 11; } #wohlfuehlen { position:absolute; width: 33px; margin-top: 100px; margin-left: 762.5px; z-index: 11; } #rechte { position:absolute; width: 33px; margin-top: 100px; margin-left: 796px; z-index: 11; } #umwelt { position:absolute; width: 33px; margin-top: 100px; margin-left: 828.5px; z-index: 11; } #multimedia { position:absolute; width: 33px; margin-top: 100px; margin-left: 862px; z-index: 11; } #beratung { position:absolute; width: 34px; margin-top: 117px; margin-left: 898px; z-index: 11; } #beratung_aktiv { position:absolute; width: 34px; margin-top: 102px; margin-left: 898px; z-index: 11 } #kanton { position:absolute; top:5px; left: 715px; height: 10px; width: 170px; z-index: 11; } #login { position:absolute; top:0px; right:0px; height: 95px; width: 375px; margin-top: 30px; z-index: 11; } #login_box { float: left; } #suche { position:absolute; top:50px; right:20px; } #headmenu { position: absolute; top: 95px; right: 0px; width: 360px; background: #000060; } #topmenu { padding:0px; margin: 0px; background-image: url(fileadmin/images/Grafiken_Tschau/Sonstige/schwarzer_balken.png); } #content_left{ background-image: url(fileadmin/images/Grafiken_Tschau/Sonstige/bk_gradient1.jpg); margin-top: 30px; width: 360px; float:left; } #content_right{3 background-image: url(fileadmin/images/Grafiken_Tschau/Sonstige/bk_gradient1.jpg); margin-top: 30px; width: 360px; float:left; } /* wenns nur eine Spalte in der Mitte hat */ #content_middle{ background-image: url(fileadmin/images/Grafiken_Tschau/Sonstige/bk_gradient2.jpg); margin-top: 30px; width: 720px; float:left; margin-right: 5px; } #content_border{ margin-top: 30px; float:left; width: 225px; background-color: #DFDFD9; } #content_left .box_left{ padding-left: 25px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: dashed; border-bottom-style: none; border-left-style: none; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; background-image: url(images/Grafiken_Tschau/Sonstige/bk_gradient1.jpg); background-repeat: no-repeat; } #content_middle .box_left{ padding-left: 25px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: dashed; border-bottom-style: none; border-left-style: none; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; background-image: url(images/Grafiken_Tschau/Sonstige/bk_gradient2.jpg); background-repeat: no-repeat; } .box_left div.csc-default{ } #content_right .box_right{ border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: dashed; border-bottom-style: none; border-left-style: none; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; background-image: url(images/Grafiken_Tschau/Sonstige/bk_gradient1.jpg); background-repeat: no-repeat; } #content_middle .box_right { padding-left: 25px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: dashed; border-bottom-style: none; border-left-style: none; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; background-image: url(images/Grafiken_Tschau/Sonstige/bk_gradient2.jpg); background-repeat: no-repeat; } .box_border { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: dashed; border-bottom-style: dashed; border-left-style: none; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; padding-left: 5px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; } /* normaler Text - Grösse */ .bodytext, #content_middle li { font-size: 0.8em; } /* für frage stellen form */ #content_middle .bodytext textarea { background-image: url(images/Grafiken_Tschau/Sonstige/bk_gradient3.jpg); background-repeat: no-repeat; width: 100%; border: 1px solid #898a74; font-family: Verdana, Geneva, sans-serif; background-color: #d5d5cd; } .bodytext label { float:left; width: 100px; font-weight: bold; clear: both; } .tx-iktschauquestions-pi1 .bodytext span { margin-left: 100px; display: block; } .tx-iktschauquestions-pi1 form .bodytext span { margin-left: 0px; display:inline; } #footer { float: none; height: 30px; background-color: #DDDCD5; position: absolute; bottom:0px; width:100%; color: #898A74; text-align:center; padding-top: 10px; } #footer a{ color: #898A74; font-size: 0.8em; font-weight:bold; background-color:#DDDCD5; text-decoration:none; } div.csc-textpic-left img{ margin-top:10px; } /* Extensions */ /* Themenblätter / Downloads */ .tx-abdownloads-pi1 { margin-top:15px; } /* Themenblätter / Downloads */ #content_border .tx_abdownloads_catalogView_categoryPath { display: none; } /* Links */ .tx-ablinklist-pi1 { padding-bottom:25px; } .tx_ablinklist_listView_linkAddNew { margin-top: 5px; float: right; font-size: 12px; text-decoration: none; border: #000000 thin solid; } /* Adressen */ .tx-ttaddress-pi1 { margin-top: 15px; font-size: 0.8em; } /* Adressen - Name */ .fn { font-weight: bold; width: 200px; } /* Adressen - Layout */ ul.vcard { list-style-type: none; padding: 0; margin: 0; } li.vcard_inner { float: left; width: 30px; font-weight: bold; margin: 0 20px 10px 0; } li.vcard_outer { float: left; width: 200px; padding: 0; margin: 0 0 10px 0; } li.clr { display: inline; margin: 0; padding: 0; width: 1px; } br.clr { clear: left; width: 1px; font-size:1px; margin: 0; padding: 0; overflow:hidden; } /* Spalten */ div.tx-rscontentcolumn-pi1 div.rightcol { padding:1%; width:47%; white-space:normal; float:left; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: none; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; border-top-style: none; border-bottom-style: none; border-left-style: solid; margin-bottom: 10px; } /* Login */ #login div.tx-felogin-pi1, #suche div.tx-macinasearchbox-pi1 { background: none; font-family: Verdana, Geneva, sans-serif; color: #898A74; font-size: 10px;; text-align: right; } #login div.tx-felogin-pi1 login_input { } .loginlink { text-decoration: none; color: #898A74; margin-right: 20px; } #login div.tx-felogin-pi1 div.login_button input { float: left; font-size: 12px; background-color: #FFF; color: #898a74; border: 1px solid #898a74; margin-top: 18px; margin-left: 4px; height: 20px; } #login div.tx-felogin-pi1 input, #suche div.tx-macinasearchbox-pi1 #searchform input{ font-size: 12px; background-color: #FFF; color: #898a74; border: 1px solid #898a74; } a.link-login { font-family: Verdana, Geneva, sans-serif; color: #898A74; font-size: 0.8em; } .logout-text { width: 350px; } /* Ende Extensions */ #schwarzer_balken { width: 951px; height: 24px; position: relative; float: left; margin-bottom: -24px; } Zitat Frage3: Ich habe mich mit der Option niceText befasst, und denke dass sie abhilfe schaffen kann, allerdings wird einfach kein Text mehr angezeigt, sobald ich sie aktiviere. Woran kann das liegen? Hm.. dieses Problem hatte ich auch mal.. ich habe TYPOSCRIPT niceText = 0 |



