Internet Explorer stellt CSS falsch dar

dorky · 17.08.2009, 16:20

Hallo Leute,

habe ein kleines Problem und zwar habe ich eine Webseite fertig gestellt. Alles läuft gut nur stellt der Internet Explorer als Einziger Broswer die Seite nicht richtig dar. Ich denke es wird wohl am CSS liegen. Habe mal ein wenig geschaut und bin darauf gestoßen, dass der IE die Ereignisse "width" und "height" anders bewertet als andere Browser... Des weiteren ist die Seite nicht wie gewünscht mehr zentriert dargestellt.

Hat jemand schon mal mit diesem Problem zu tun und einen Tipp für mich?

Hier der CSS- Code:

Code:

body {
	background: url(images/bg.jpg) repeat-x fixed 0 5px;
	margin: 0;
}

/* Schriften */

#menue a {
	color: #7c1b16;
	text-decoration: none;
	font: 13px/20px Georgia, "Times New Roman", Times, serif;
}

#menue a:hover {
	color: #7c1b16;
	text-decoration: none;
	font: 13px/20px Georgia, "Times New Roman", Times, serif;
}


h1 {
	color: #7c1b16;
	text-decoration: none;
	font: 19px/15px Georgia, "Times New Roman", Times, serif;
}

h2 {
	color: #7c1b16;
	text-decoration: none;
	font: 15px/19px Georgia, "Times New Roman", Times, serif;
}

h3 {
	color: #7c1b16;
	text-decoration: none;
	font: 14px/11px Georgia, "Times New Roman", Times, serif;
}

h4 {
	color: #222;
	text-decoration: none;
	font: 11px/15px Georgia, "Times New Roman", Times, serif;
}

h5 {
	color: #222;
	text-decoration: none;
	font: 14px/11px Georgia, "Times New Roman", Times, serif;
}


p {
	color: #222;
	text-decoration: none;
	font: 13px/19px Georgia, "Times New Roman", Times, serif;
}

a {
	color: #7c1b16;
	text-decoration: none;
	font: 11px/15px Georgia, "Times New Roman", Times, serif;
}

#textfeld a:hover {
	color: #7c1b16;
	border-bottom: dotted thin #7c1b16;
	font-size: 1px;
	font: 11px/15px Georgia, "Times New Roman", Times, serif;
}


#werbung a:hover {
	color: #7c1b16;
	border-bottom: dotted thin #7c1b16;
	font-size: 1px;
	font: 11px/15px Georgia, "Times New Roman", Times, serif;
}

#menue a:hover {
	color: #7c1b16;
	border-bottom: dotted thin #7c1b16;
}


/* Aufbau */

#all {
	height: 100%;
	width: 100%;
	background: url(images/frau2.png) no-repeat fixed right bottom;
	position: fixed;
	overflow: scroll;
}

#header {
	margin: 0 auto;
	width: 900px;
	height: 130px;
	background: url(images/logo.png) no-repeat left center;
}

#mc {
	margin: 0 auto;
	width: 1250px;
}

#menue {
	float: left;
	width: 150px;
	height: 300px;
	text-align: right;
}

#content_index {
	margin: 0 auto;
	width: 900px;
	height: 750px;
	background-color: rgba(255,255,255,0.6);
}

#content_angebot {
	margin: 0 auto;
	width: 900px;
	height: 1200px;
	background-color: rgba(255,255,255,0.6);
}

#content_fotogalerie {
	margin: 0 auto;
	width: 900px;
	height: 1500px;
	background-color: rgba(255,255,255,0.6);
}

#textfeld {
	float: left;
	width: 500px;
	padding-top: 25px;
	padding-left: 35px;
	padding-right: 45px;
}

#textfeld2 {
	float: left;
	width: 350px;
	height: 100%;
	padding-top: 25px;
	padding-left: 35px;
	padding-right: 45px;
}

.preisfeld {
	padding-top: 52px;
	height: 100%;
	width: 50px;
	float: left;
	text-align: center;
}

#werbung_border {
	float: left;
	margin-top: 25px;
	margin-bottom: 25px;
	width: 1px;
	height: 350px;
	border-left: thin dotted #222;
}

#werbung {
	float: right;
	width: 270px;
	height: 250px;
	margin-top: 25px;
	margin-right: 25px;
}

#partner2 {
	width: 250px;
	height: 80px;
}

.partner {
	float: left;
	width: 110px;
	height: 80px;
	padding-right: 15px;
	overflow: hidden;
	text-align: center;
}

.partner a img {
	text-decoration: none;
	border: none;
}

.partner a img:hover {
	margin-top: -80px;
}


#streifen {
	height: 60px;
	width: 100%;
	background: url(images/streifen.jpg) repeat-x;
	bottom: 0;
	position: fixed;
	z-index: -2;
}

#image_sub {
	height: 250px;
	width: 25px;
	background-color:#7c1b16;
}

#image {
	height: 250px;
	background-color: #000;
	background-image: url(images/uebersicht.jpg);
}

#image2 {
	height: 250px;

}

#image_start {
	height: 600px;
	background-color: #000;
	background-image: url(images/uebersicht.jpg);
}


.fg_pic {
	height: 150px;
	width: 150px;
	margin-left: 0px;
	margin-bottom: 15px;
	float: left;
	margin-right: 15px;
	text-align: center;
}

.fg_pic a img {
	border: none;
	border-bottom: none;
}

.fg_pic a img:hover {
	border: 2px solid #7c1b16;
	border-bottom: none;
}

Danke euch für eure Hilfe

mepeisen · 17.08.2009, 16:30

Also. Ohne eine Beispielseite und die Angabe, was genau der IE falsch darstellt, wird dir wohl keiner helfen können. Am besten einmal zwei Screenshots...

Zudem. Ich lerne ja nie aus aber ich fürchte, dass folgende Angabe einfach nur blödsinnig ist:

Zitat:

font: 13px/20px

Was willst du damit ausdrücken, dass der Text kleiner als ein Pixel groß sein soll (13 durch 20)?

Folgendes halte ich ebenfalls für blödsinnig:

Zitat:

#textfeld a:hover {
font-size: 1px;
font: 11px/15px Georgia, "Times New Roman", Times, serif;
}

Das doppelte Definieren von Schriftgrößen, also einmal über font-size, einmal per Font, ist so unsinnig.

Die Aussage, dass der IE width und height anders interpretiert als andere Browser, wo hast du das her? So pauschal stimmt das nicht. Zumindest aktuelle Versionen des IE verhalten sich durchaus richtig. Ohne jedoch genau zu wissen, welche Divs da wie verschachtelt sind und einen Hinweis, welches Div er falsch darstellt, kann dir wie gesagt keiner helfen.

Dein CSS weist durchaus inhaltliche Mängel auf. Und vielleicht ist es eher so, dass der Firefox dort drüber hinwegsieht, ihn also die Fehler nicht weiter stören, und dass der IE dort irgendwo vor lauter komischen Definitionen völlig daneben läuft und das CSS gar nicht korrekt interpretiert kriegt. Wäre nicht das erste mal, dass mir sowas unterkommt, dass sich der IE also vor lauter Fehlern weigert, das CSS in Teilen zu berücksichtigen und dass der Firefox einige Fehler toleranter sieht um wenigstens den Rest noch sinnvoll zu berücksichtigen.

dorky · 17.08.2009, 16:38

Danke für deine Antwort. Gucke mir die Sachen gleich genau an. Nur soviel vorweg.

Zitat:

#textfeld a:hover {
font-size: 1px;
font: 11px/15px Georgia, "Times New Roman", Times, serif;
}

Die unterschiedliche Definitionsweise der font kommt daher. Das font-size auch Linienelemente oder "Dotted" wie einen Unterstrich beeinflusst. Da ich diese Linienstärke gerne definieren wollte... entspringt dem hier der

Zitat:

font-size: 1px;

Die Angabe:

Zitat:

font: 11px/15px

Stellt keinen Bruch oder Sonstiges dar, sondern 1. die Textgröße und 2. die Zeilenhöhe.

Werde mich mal eben daran machen die Elemente so aufzuschlüsseln, dass jeder sieht was gemeint ist.

Danke noch mal

dorky · 17.08.2009, 16:49

So hier die verschiedenen Darstellung, dargestellt als Screenshot

mepeisen · 17.08.2009, 16:49

OK, ich habe wieder was dazugelernt (das mit der Zeilenhöhe). Ist wohl auch tatsächlich Standard. Da ich das aber gewohnt bin line-height auszuschreiben, da es logisch auch nichts mit der Font-Definition, kannte ich das so nicht. Aber CSS ist ja voll mit so komischen Sachen

Dann bleibt wohl nur der Verweis darauf, dass irgendein verschachteltes Div so nicht passt. Wie gesagt wäre nun die Frage, welches Div du meinst. Die Beispielseite bzw. ein Screenshot wären gut.

Welche Version vom IE?
Seitenquelltext der relevanten Divs?

dorky · 17.08.2009, 16:52

So und hier die Grund HTML Struktur. Reine DIV Sachen ohne HEAD etc.

HTML-Code:

<div id="all">

	<div id="header">
	</div>
	
	<div id ="mc">
	
		<div id="menue">
			
			
		</div>
	
		<div id="content_index">
	
			<div id="sub_image">
			</div>
		
			<div id="image">
			</div>
			
			<div id="textfeld">
			
			</div>
			
			<div id="werbung_border">
			</div>
			
			<div id="werbung">
			
			
				<div id="partner2">
					<div class="partner">
						
					</div>
				
					<div class="partner">
						
					</div>
				</div>
				
			</div>

		</div>
	
	</div>
	
</div>
	
<div id="streifen">
</div>

nikosch · 17.08.2009, 16:58

Es gibt imho genaug Webquellen, die browserübergreifende Lösungen für Transparenzeffekte bzw. div-Zentrierung beschreiben.

dorky · 17.08.2009, 16:59

Da ich ja auch nie auslerne, würde ich mich noch über eine Vertiefung deiner Aussage

Zitat:

Dein CSS weist durchaus inhaltliche Mängel auf.

sehr freuen =)

dorky · 17.08.2009, 17:05

Zitat:

Es gibt imho genaug Webquellen, die browserübergreifende Lösungen für Transparenzeffekte bzw. div-Zentrierung beschreiben.

Ganz bestimmt sogar. Da ich aber bis eben nicht wusste wonach ich genau suchen sollte, war der Schock über die massive Fehldarstellung prägender als meine Fehlereinschätzung. Hättest du vielleicht noch ein Beispiel wonach ich suchen sollte bzw. vielleicht sogar einen Link.

Natürlich ist vieles im WWW irgendwo zu finden nur der Sinn eines Forum ist doch Fehler gemeinsam auszumerzen und ich denke, da wird dieser Thread sicher nicht verkehrt sein wird, sollte man ein gutes Ergebnis erzielen =) Ich werde wohl nicht der Einzige sein, der mit diesem Problem zu kämpfen, denke ich!

Bei mir resultiert dieses Problem, da ich auf MAC arbeite und leider keine Möglichkeit habe auf meinem System den IE zu installieren und mehr oder weniger auf Nebengeräten erst einen Blick auf die Vorschau der Seite bekommen kann.

Danke für eure Hilfe.

nikosch · 17.08.2009, 17:58

Hallo? Ändern-Button! Schon gesehen? Und gedrängelt wird nicht.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hilfe, Seite im Internet Explorer Buggy	trowman	HTML, Usability und Barrierefreiheit	4	15.09.2008 08:32
probleme bei internet explorer und firefox	igron	PHP Tipps 2008	0	12.05.2008 17:27
Box Modell Problem zwischen Internet Explorer 6 und FireFox	DonTermi	HTML, Usability und Barrierefreiheit	5	07.12.2006 16:30
PNG Grafik im Internet Explorer nicht Transparent	DonTermi	HTML, Usability und Barrierefreiheit	15	01.11.2006 11:28
IFrame im Internet Explorer verstecken	duerov	HTML, Usability und Barrierefreiheit	1	13.09.2006 17:21
LLink funktioniert im Internet Explorer nicht.		HTML, Usability und Barrierefreiheit	17	28.12.2005 16:47
[Erledigt] Internet Explorer neu installieren / reparieren		Off-Topic Diskussionen	12	11.12.2005 18:51
submitbutton als image. firefox ok, internet explorer nicht?	Promaetheus	HTML, Usability und Barrierefreiheit	8	28.11.2005 10:47
Internet Explorer stellt meine Tabellen falsch dar.		HTML, Usability und Barrierefreiheit	2	02.10.2005 00:51
Internet Explorer Bildverkleinerung abschalten	Cyber Soldier	HTML, Usability und Barrierefreiheit	0	05.08.2005 13:03
[Erledigt] Internet Explorer und CSS..	Chr!s	HTML, Usability und Barrierefreiheit	4	25.05.2005 18:17
internet explorer kann nichts rechts ausrichten	janni	HTML, Usability und Barrierefreiheit	6	24.05.2005 17:27
pop up öffnet sich nicht im Internet Explorer	felicitas	HTML, Usability und Barrierefreiheit	1	18.03.2005 16:30
Kommt der neue Internet Explorer?	imported_Ben	Off-Topic Diskussionen	51	18.03.2005 11:03
[Erledigt] Mozilla / Internet Explorer	Juuro	HTML, Usability und Barrierefreiheit	7	22.06.2004 07:29


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

17.08.2009, 16:49
dorky Benutzer Registriert seit: 05.01.2009 Beiträge: 49	So hier die verschiedenen Darstellung, dargestellt als Screenshot Miniaturansicht angehängter Grafiken

17.08.2009, 16:49
mepeisen Erfahrener Benutzer Registriert seit: 21.12.2004 Beiträge: 5.234 PHP-Kenntnisse: Fortgeschritten	OK, ich habe wieder was dazugelernt (das mit der Zeilenhöhe). Ist wohl auch tatsächlich Standard. Da ich das aber gewohnt bin line-height auszuschreiben, da es logisch auch nichts mit der Font-Definition, kannte ich das so nicht. Aber CSS ist ja voll mit so komischen Sachen Dann bleibt wohl nur der Verweis darauf, dass irgendein verschachteltes Div so nicht passt. Wie gesagt wäre nun die Frage, welches Div du meinst. Die Beispielseite bzw. ein Screenshot wären gut. Welche Version vom IE? Seitenquelltext der relevanten Divs? __________________ www.php-maven.org PHP und Maven vereint: Build/Deploy/Produktion/Konfiguration, Projekt Management, CI, PHPUnit, zahlreiche Frameworks Twitter @ https://twitter.com/#!/mepeisen und Facebook @ http://t.co/DZnKSUih

17.08.2009, 16:58
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Es gibt imho genaug Webquellen, die browserübergreifende Lösungen für Transparenzeffekte bzw. div-Zentrierung beschreiben. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

17.08.2009, 17:58
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Hallo? Ändern-Button! Schon gesehen? Und gedrängelt wird nicht. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --