zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE7 Anzeigeproblem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.02.2010, 17:20
Benutzerbild von jetwes
Coder
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2010
Ort: Soest
Beiträge: 56
jetwes wird schon bald berühmt werden
Frage 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 &amp; 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 &amp; 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 &amp; 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&nbsp; Anforderungen sichtbar und optimieren Ihre Planung.
</p>
<p class="bodytext">&nbsp;</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 &amp; 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;}
Angehängte Grafiken
Dateityp: jpg bo_ff_safari_chrome_ie8.jpg (348,3 KB, 4x aufgerufen)
Dateityp: jpg bo_ie7.jpg (283,3 KB, 4x aufgerufen)

Geändert von jetwes (17.02.2010 um 17:41 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.02.2010, 18:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.02.2010, 18:32
Benutzerbild von jetwes
Coder
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2010
Ort: Soest
Beiträge: 56
jetwes wird schon bald berühmt werden
Standard

Das mit mainpicture2 war schon einmal ein super Hinweis - jetzt sieht es schon besser aus. Allerdings noch nicht ganz korrekt - übrigens auch bei Seiten ohne Bilder... (siehe Anhang)

danke schon einmal
Angehängte Grafiken
Dateityp: jpg bo_ie7.jpg (374,4 KB, 1x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 17.02.2010, 18:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 17.02.2010, 18:47
Benutzerbild von jetwes
Coder
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2010
Ort: Soest
Beiträge: 56
jetwes wird schon bald berühmt werden
Standard

Ich ignoriere diese nicht - allerdings ist es völlig wurscht welche Breite ich #leftmenu gebe (und beispielsweise #maintext dementsprechend verkleinere) der IE7 will einfach nicht.
Ich gehe das noch mal durch - vielen Dank!

UPDATE: Sorry, die Maschine auf dem der IE7 läuft nutzt einen Proxy - dieser hat die Seite gecacht. Natürlich hat sich etwas verändert
Danke! Ich schaue mal weiter - du hast mich in die richtige Richtung geschickt!

Geändert von jetwes (17.02.2010 um 18:51 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 17.02.2010, 18:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von jetwes Beitrag anzeigen
Ich ignoriere diese nicht - allerdings ist es völlig wurscht welche Breite ich #leftmenu gebe (und beispielsweise #maintext dementsprechend verkleinere) der IE7 will einfach nicht.
Wenn ich 100px hinschreibe ist's auch im IE7 kein Problem mehr.
Du kannst die Breite -- und damit hasLayout -- auch einfach weglassen.
Mit Zitat antworten
  #7 (permalink)  
Alt 17.02.2010, 19:03
Benutzerbild von jetwes
Coder
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2010
Ort: Soest
Beiträge: 56
jetwes wird schon bald berühmt werden
Standard

Wie oben erwähnt lag es am Proxy der IE7 Maschine...

Jetzt passt es - ich schaue mir noch andere Ungereimtheiten in der CSS an.

Vielen Dank!!!
Mit Zitat antworten
Antwort

Stichwörter
css problem, ie7

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:06 Uhr.