|
||||
IE7 Anzeigeproblem
Hallo Forumsgemeinde,
ich habe leider ein CSS-Problem im IE7 und komme einfach nicht weiter. Die Seite wird im FF, IE8, Safari, Chrome so angezeigt, wie sie soll - nur der IE7 macht mucken. Ich habe keinen Plan woran es liegen kann. Ich habe Screenshots, den HTML-Code (aus Typo3 generiert) und die CSS angehängt. Der HTML-Code und die CSS sind bei w3c.org erfolgreich validiert (XHTML-transitional und CSS 2.1) Das Problem tritt auf allen Seiten der Website auf (Seite ist in der Testphase und noch nicht online - hier ein Vorschaulink: http://www.bleicher-otto.de/index.ph...b8d6bffc62c78d) Über einen Hinweis, der mich in die richtige Richtung führt, würde ich mich freuen. DANKE Jens HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de-DE"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- This website is powered by TYPO3 - inspiring people to share! TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL. TYPO3 is copyright 1998-2009 of Kasper Skaarhoj. Extensions are copyright of their respective owners. Information and contribution at http://typo3.com/ and http://typo3.org/ --> <base href="http://www.bleicher-otto.de/" /> <title>B|O Bleicher & Otto: Mitarbeiter Zeitmanagement</title> <meta name="generator" content="TYPO3 4.3 CMS" /> <link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_6e75bbb9ee.css" media="screen" /> <link rel="stylesheet" type="text/css" href="fileadmin/templates/bo/css/default_sub.css" media="screen" /> <script src="typo3conf/ext/hyphenator/res/Hyphenator.js" type="text/javascript"></script> <script src="typo3temp/javascript_93077bb238.js" type="text/javascript"></script> <link rel="stylesheet" href="typo3conf/ext/perfectlightbox/res/css/slightbox.css" type="text/css" media="screen,projection" /><script type="text/javascript" src="typo3conf/ext/perfectlightbox/res/js/prototype-packed.js"></script> <script type="text/javascript" src="typo3conf/ext/perfectlightbox/res/js/scriptaculousEffects-packed.js?load=effects"></script><script type="text/javascript" src="typo3conf/ext/perfectlightbox/res/js/lightbox-packed.js"></script><script type="text/javascript"> var borderSize = 10; var resizeSpeed = 400; var animate = true; var overlayOpacity = 0.8; var allowSave = false; var enableSlideshowAutoplay = true; var slideshowAutoclose = true; var slideshowInterval = 5000; var lllImage = 'Image'; var lllOf = 'of';</script> </head> <body> <div id="wrapper"><div id="impressum"><a href="http://www.bleicher-otto.de/index.php?id=93">Impressum</a></div><div id="home"><a href="http://www.bleicher-otto.de">Home</a></div><div id="menu"><ul class="navi"><li><a href="loesungen/zeitmanagement.html" onfocus="blurLink(this);" class="active">Lösungen</a></li><li><a href="leistungen/stationaerer-vertrieb.html" onfocus="blurLink(this);">Leistungen</a></li><li><a href="franchising/einleitung.html" onfocus="blurLink(this);">Franchising</a></li><li><a href="stellenangebote/uebersicht.html" onfocus="blurLink(this);">Stellenangebote</a></li><li><a href="unternehmen/vorstellung.html" onfocus="blurLink(this);">Unternehmen</a></li><li><a href="kontakt/kontakt.html" onfocus="blurLink(this);">Kontakt</a></li></ul></div><div id="header"><a href="http://www.bleicher-otto.de"><img src="uploads/tf/bo-logo.png" width="139" height="82" border="0" alt="" title="" /></a></div><div id="nav"></div><div id="sub"> <!-- CONTENT ELEMENT, uid:277/header [begin] --> <div id="c277" class="csc-default"> <!-- Header: [begin] --> <div class="csc-header csc-header-n1"><h3 class="csc-firstHeader" style="display:block; background:url(typo3temp/GB/9743c35a3a.gif) no-repeat; height:24px; width:500px; max-width:500px;"><span style="display:block; width:1px; height:1px; overflow:hidden;">Direkt für den Markt zu entwickeln,heißt beides:</span></h3></div> <!-- Header: [end] --> </div> <!-- CONTENT ELEMENT, uid:277/header [end] --> <!-- CONTENT ELEMENT, uid:276/header [begin] --> <div id="c276" class="csc-default"> <!-- Header: [begin] --> <div class="csc-header csc-header-n2"><h3 style="display:block; background:url(typo3temp/GB/14671d2d9e.gif) no-repeat; height:24px; width:500px; max-width:500px;"><span style="display:block; width:1px; height:1px; overflow:hidden;">Nah dran sein & Weitblick behalten.</span></h3></div> <!-- Header: [end] --> </div> <!-- CONTENT ELEMENT, uid:276/header [end] --> </div><div id="wrapcontent"><div id="mainpicture2"></div><div id="mainpicture1"> <!-- CONTENT ELEMENT, uid:298/image [begin] --> <div id="c298" class="csc-default"> <!-- Image block: [begin] --> <div class="csc-textpic csc-textpic-center csc-textpic-above"><div class="csc-textpic-imagewrap" style="width:470px;"><img src="uploads/pics/2.1.jpg" width="470" height="239" border="0" alt="" /></div></div><div class="csc-textpic-clear"><!-- --></div> <!-- Image block: [end] --> </div> <!-- CONTENT ELEMENT, uid:298/image [end] --> </div><div id="maintext"> <!-- CONTENT ELEMENT, uid:282/text [begin] --> <div id="c282" class="csc-default"> <!-- Text: [begin] --> <h2>Guten Morgen, Zeitmanagement!</h2> <h3 class="bodytext"> <p><span>Termine sind dazu da koordiniert zu werden. Und bitte, so unkompliziert wie möglich! Wir zeigen wie das geht.</span></p></h3> <p class="bodytext">Was flexibles Zeitmanagement angeht, kennen wir uns aus. Arbeitsstunden erfassen, Urlaubszeiten koordinieren. Mitarbeiter optimal einplanen. Damit der Informationsfluss zwischen Filialleitung und Mitarbeiter so einfach und so effizient wie möglich funktioniert, sorgt Bleicher & Otto für eine Software, die z.B. Zeitbuchungen jederzeit transparent machen. Arbeitszeiten, Urlaubsplanung und Einsatzpläne werden für alle einsehbar. Auf diese Weise machen wir Anforderungen sichtbar und optimieren Ihre Planung. </p> <p class="bodytext"> </p> <!-- Text: [end] --> </div> <!-- CONTENT ELEMENT, uid:282/text [end] --> </div><div id="leftmenu"><ul class="navi"><li><a href="loesungen/zeitmanagement.html" onfocus="blurLink(this);" class="active">Zeiterfassung</a></li><li><a href="loesungen/absatzerfassung.html" onfocus="blurLink(this);">Absatzerfassung</a></li><li><a href="loesungen/weiterbildung.html" onfocus="blurLink(this);">Weiterbildung</a></li><li><a href="loesungen/controlling.html" onfocus="blurLink(this);">Controlling</a></li></ul></div></div><div id="tip"><a href="http://www.bleicher-otto.de/index.php?id=111" target="_blank"><img src="fileadmin/templates/bo/css/pfeil_rechts.gif" alt="" /> weiterempfehlen</a></div><div id="footer"><div id="footer_nav4"><p class="menutitle2">Kontakt</p><p class="menutext">B|O Bleicher & Otto<br />Gewerbering 1<br />94161 Ruderting<br /><br />T +49 (0) 8509 9128-100<br />F +49 (0) 8509 9128-700<br />info@bleicher-otto.de</p></div><div id="footer_nav3"><p class="menutitle">Unternehmen</p><ul class="footernavi"><li><a href="unternehmen/vorstellung.html" onfocus="blurLink(this);">Vorstellung</a></li><li><a href="unternehmen/struktur.html" onfocus="blurLink(this);">Struktur</a></li><li><a href="unternehmen/geschichte.html" onfocus="blurLink(this);">Geschichte</a></li><li><a href="unternehmen/standorte.html" onfocus="blurLink(this);">Standorte</a></li></ul></div><div id="footer_nav2"><p class="menutitle">Leistungen</p><ul class="footernavi"><li><a href="leistungen/stationaerer-vertrieb.html" onfocus="blurLink(this);">Stationärer Vertrieb</a></li><li><a href="leistungen/versandhandel.html" onfocus="blurLink(this);">Versandhandel</a></li><li><a href="leistungen/marketing.html" onfocus="blurLink(this);">Marketing</a></li><li><a href="leistungen/projektleitung.html" onfocus="blurLink(this);">Projektleitung</a></li><li><a href="leistungen/beratung.html" onfocus="blurLink(this);">Beratung</a></li></ul></div><div id="footer_nav1"><p class="menutitle">Lösungen</p><ul class="footernavi"><li><a href="loesungen/zeitmanagement.html" onfocus="blurLink(this);" class="active">Zeiterfassung</a></li><li><a href="loesungen/absatzerfassung.html" onfocus="blurLink(this);">Absatzerfassung</a></li><li><a href="loesungen/weiterbildung.html" onfocus="blurLink(this);">Weiterbildung</a></li><li><a href="loesungen/controlling.html" onfocus="blurLink(this);">Controlling</a></li></ul></div></div></div> <script type="text/javascript">Hyphenator.config({classname : 'bodytext', onerrorhandler : function(e) { console.log('Hyphenator: error ocurred! '+e.message); }}); Hyphenator.run();</script> </body> </html> HTML-Code:
@charset "UTF-8";
html {font-size: 62.5%}
body {color: #3E3E3E; text-align: center; font-family: Arial, sans-serif; background: #F1F9E4;}
* {margin: 0px; padding: 0px; border:0px;}
h1,h2,h3,h4,h5,h6 {}
h1 {font-size: 2.4em; font-weight: bold; font-family: Arial, sans-serif;}
h2 {font-size: 1.2em; font-weight: bold; font-family: Arial, sans-serif; padding-bottom: 0.8em;}
h3 {font-size: 1.0em; font-weight: bold; font-family: Arial, sans-serif; padding-bottom: 0.8em;}
a {}
a:link {color: #34F334;}
a:visited {color: #34F334;}
a:hover {color: #3E3E3E;}
a:active {color: #3E3E3E;}
a:link, a:visited, a:hover, a:active {text-decoration: none}
div#wrapper {position: absolute; left: 0px; text-align: left; width: 1024px; height: 100%;}
div#header {margin-left: 30px;margin-bottom: 30px; margin-top: 25px;}
div#nav {margin-left: 0px; border-top: 3px solid #34F334; width: 530px;}
div#sub {margin-left: 30px; margin-top: 30px; color: #3E3E3E; width: 400px; font-family: Arial, sans-serif;}
div#wrapcontent {margin-left: 30px; margin-top: 70px; width: 930px; margin-bottom: 80px;}
div#leftmenu {width: 200px; color: #34F334;}
div#leftmenu ul {list-style-type: none; padding: 0px; font-size:1.3em; font-weight: bold; text-align: left;}
div#maintext {float: right; margin-left: 30px; width: 305px; margin-bottom: 20px; font-size: 1.2em;}
div#mainpicture1 {float: right; width: 440px; margin-left: 20px; margin-bottom: 60px;}
<!-- div#mainpicture2 {float: right; width: 235px;} -->
div#impressum {position:absolute; left: 840px; top: 34px; font-size:1.0em; font-weight: bold; text-align: right; width: 150px;}
div#home {position:absolute; left: 840px; top: 100px; font-size: 1.1em; font-weight: bold; text-align: right; width: 150px;}
div#menu {position:absolute; left: 840px; width: 50px; height: 100px; top: 137px;}
div#menu ul {list-style-type: none; padding: 0; font-size:1.3em; font-weight: bold; text-align: right; width: 150px;}
ul.navi li { margin-bottom: 0.1em;}
ul.navi li a {display:block; padding:0.1em 0.1em; text-decoration: none; color: #34F334;}
ul.navi li a:hover {color: #3E3E3E;}
ul.navi li a.active {color: #3E3E3E;}
div#tip {margin-left:195px;margin-bottom:60px; font-size: 1.2em;}
div#footer {background: #34F334; color: #3E3E3E; clear:both; width: 1000px; height: 180px;}
div#footer_nav1 {background: #34F334; color: #3E3E3E; float: right; margin-left: 11px; margin-top: 30px; width: 222px;}
div#footer_nav2 {background: #34F334; color: #3E3E3E; float: right; margin-left: 21px; margin-top: 30px; width: 222px;}
div#footer_nav3 {background: #34F334; color: #3E3E3E; float: right; margin-left: 21px; margin-top: 30px; width: 222px;}
div#footer_nav4 {background: #34F334; color: #3E3E3E; float: right; margin-left: 21px; margin-top: 30px; width: 222px;}
div#footer ul {margin: 0px; background: #34F334; padding: 0px; list-style-image:url(pfeil.png); font-size:1.3em; font-weight: normal;}
ul.footernavi li {margin-left: 0px; margin-bottom: 0.1em; background: #34F334;}
ul.footernavi li a {display:block; padding:0.1em 0.1em; text-decoration: none; color: #3E3E3E; background: #34F334;}
ul.footernavi li a:hover {color: #F1F9E4; list-style-image:url(pfeil_hell.png);}
ul.footernavi li a.active {color: #F1F9E4; list-style-image:url(pfeil_hell.png);}
p.white {color: #F1F9E4;}
p.dark {color: #3E3E3E;}
.menutitle {margin-left: -20px; margin-bottom: 5px; font-style: italic; background: #34F334; color: #3E3E3E; font-size: 1.3em; font-weight: bold;}
.menutitle2 {margin-left: 0px; margin-bottom: 5px; font-style: italic; background: #34F334; color: #3E3E3E; font-size: 1.3em; font-weight: bold;}
.menutext {font-size: 1.3em; background: #34F334; color: #3E3E3E;}
ul.text {margin-left: 30px;}
Geändert von jetwes (17.02.2010 um 17:41 Uhr) |
Sponsored Links |
|
|||
Nimm doch mal Firebug und schau dir an, welche Dimensionen deine Elemente haben. Da passt so einiges nicht zusammen. Z.B. liegt ein 470px breites Bild in einem 440px breiten Div und das #leftmenu hat gar keine 200px Platz.
Außerdem bleibt im IE7 das mainpicture1 an dem leeren mainpicture2 hängen.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Du solltest auch die anderen Hinweise nicht ignorieren.
#leftmenu hat nicht genug Platz. Siehe oben. Firebug zeigt dir das -- auch im FF. Auch eine Hintergrundfarbe zeigt sowas. Das durch die (zu breite) Breite ausgelöste hasLayout verhindert in IE 7, dass die Elemente nebeneinander stehen. Achte darauf, dass deine Maße passen. Dann passiert sowas nicht. Ich finde jede Menge Unstimmigkeiten.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Zitat:
Du kannst die Breite -- und damit hasLayout -- auch einfach weglassen.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Stichwörter |
css problem, ie7 |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
IE7 vs FF anzeigeproblem | urlaut | CSS | 10 | 25.01.2010 12:50 |
Anzeigeproblem bei IE7 (ausschließlich) | nataq | CSS | 6 | 21.11.2008 23:00 |
IE7 fixing - expandable menu | matsie | CSS | 6 | 10.04.2008 16:55 |
CSS-basiertes Menü fehlerhaft im IE7 | otomo | CSS | 0 | 16.10.2007 17:56 |
Problem mit Dastellung in IE7 und FF | ConiKost | CSS | 1 | 05.07.2006 13:59 |