CSS an IE anpassen

Flipmoe · 27.06.2006, 15:07

Hallo, ich habe eine Seite erstellt. Sie wird auch im FF wie gewünscht dargestellt. Jedoch leider (natürlich) nicht im IE.
Ich habe schon nach möglichen Lösungen gesucht bzgl. der falschen Darstellung des Box-Modells durch den IE. Bin aber leider auf keinen grünen Zweig gekommen.
Vielleicht kann sich ja jemand den Code anschauen und mir nützliche Hinweise geben. Eventuell auch wegen der konformen Einbindung von Flash (Seite ist bis jetzt deswegen leider noch nicht validiert) und ob ich die css noch aufräumen kann.
Vielen Dank

Corsachriz · 27.06.2006, 15:16

soviel zum flash: http://dciwam.de/faq/html/flash-einbinden

danach validieren, Fehler ausbügeln und dann schauma weiter.

Desweiteren haben wir eine eigene Forumskategorie für CSS.

Gr33tz Chriz

Flipmoe · 27.06.2006, 15:49

Vielen Dank für Deine zügige Antwort.
Flash ist jetzt konform eingebunden und die Seite validiert. Jetzt noch vielleicht ein Hinweis wegen dem IE und CSS.
Sorry, dass ich das Thema in der falschen Rubrik gepostet habe.
Viele Grüsse
Bist Du auch über Mail oder Skype zu erreichen? Dann könnte ich Dir den Link schicken.

satre · 27.06.2006, 15:52

Es wäre praktischer, wenn du den Quelltext posten oder die Seite hochladen würdest.

Flipmoe · 27.06.2006, 16:08

Quelltext ist in Seite.zip eingefügt

Rinaldo · 27.06.2006, 16:43

Satre meint damit warscheinlich, dass nicht jeder Lust u Zeit hat, sich die ZIP zu laden, zu entpacken und dann zu betrachten...

Mit einem Link zur Site wär das alles viel einfacher und bequemer

.

Corsachriz · 27.06.2006, 16:46

ich habe eben mal drüber geschaut und war der Meinung, dass es daran liegt, dass er nur classes verwendet aber keine ids. Den Fall hatten wir doch schonmal oder?!?

Flipmoe · 27.06.2006, 17:01

Also ich habe die "classes" durch "id's" ersetzt. Hat aber leider nichts eingebracht.
Hier ist der Quellcode:

HTML-Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>x</title>
<link
	rel="stylesheet"
	type="text/css"
	href="screenstyle.css" />
</head>
<body>
<div id="container">
<div id="menu"><object
	width="800"
	height="20"
	data="menu.swf"
	type="application/x-shockwave-flash">
	<param
		name="movie"
		value="menu.swf" />
</object></div>
<div id="mainBox">
<div id="innerBox">
<div id="leftBox">
<div id="topleftbox"><a href="x"><img
	src="home.gif"
	alt=""></img></a>&nbsp;<a href="x"><img
	src="contact.gif"
	alt=""></img></a></div>
<div id="bild"><object
	width="280"
	height="187"
	data="slideshow_as2.swf"
	type="application/x-shockwave-flash">
	<param
		name="movie"
		value="slideshow_as2.swf" />
</object></div>
</div>
<div id="rightBox">
<div id="toprightbox"></div>
<p>submenu</p>
<p>submenu</p>
<p>submenu</p>
</div>
<div id="centerBox">
<div id="topcenterbox">
<h2>>> graphik &amp; design</h2>
</div>
<h1>Was wir bieten</h1>
<p>Von der digitalen Aufnahme &uuml;ber die Bildbearbeitung bis hin zum
fertigen Printmedium und dessen Druck k&ouml;nnen Sie beruhigt alles in
unsere Hand legen. Full-Service ist unser Motto - ein Ansprechpartner -
keine Probleme.</p>
<h1>&Uuml;ber Uns</h1>
<p>Innovativ und individuell stimmen wir die Werbung auf unsere Kunden,
deren Umfeld und die Bed&uuml;rfnisse ab. Flexibel und kreativ gehen wir
auf Ihre W&uuml;nsche ein. Kundenzufriedenheit ist unser oberstes Gebot.
Kontaktieren Sie uns, wir sind neugierig auf Sie.</p>
</div>
</div>
</div>
<div class="bottom">
<div id="bottomrightbox1"></div>
</div>
<div class="bottom">
<div id="bottomrightbox2"></div>
<p>Email <a href="x">x</a></p>
</div>
<div id="footer">
<div id="right">
<p><a href="http://validator.w3.org/check/referer">Validate XHTML 1.0
Strict</a></p>
</div>
<p>&copy; 2006 x</p>
</div>
<div id="clear"></div>
</div>
</body>
</html>

Code:

body {
	margin: 0;
	padding: 0;
	font-family: verdana, arial, sans-serif;
	font-size: 80%;
	color: #fff;
	text-align: left;
}

p {
	margin: 5px 0 15px 0;
	padding: 3px;
}

h1 {
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	margin: 10px 0 5px 3px;
	font-family: Arial, Helvetica, sans-serif;
}

h2 {
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	margin: 10px 0 5px 3px;
	font-family: Arial, Helvetica, sans-serif;
}

#topcenterbox h2 {
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	margin: 0 5px;
	position: relative;
	top: 15px;
	font-family: Arial, Helvetica, sans-serif;
}

a:link,a:visited {
	color: #7288DF;
	text-decoration: underline;
}

a:hover {
	color: #3B4471;
	text-decoration: none;
}

a:active {
	color: #ffcc00;
	text-decoration: underline;
}

#clear {
	clear: both;
}

#container {
	width: 800px;
	margin: 50px auto;
	position: relative;
	display: block;
}

#mainBox {
	position: relative;
	display: block;
	background: #88a936;
	border-left: 320px solid #a4c753;
	border-right: 80px solid #a4c753;
	width: 400px;
	min-height: 300px;
}

#innerBox {
	display: block;
	margin-left: -320px;
	margin-right: -80px;
	padding: 5px;
}

#leftBox {
	float: left;
	position: relative;
	width: 320px;
	left: 0px;
}

#rightBox {
	float: right;
	position: relative;
	width: 70px;
	right: 0px;
}

#centerBox {
	margin-left: 320px;
	margin-right: 80px;
	position: relative;
	display: block;
	height: 1%;
}

#topleftbox {
	width: 320px;
	height: 40px;
	margin: -5px;
	background: #fff;
}

#toprightbox {
	width: 80px;
	height: 40px;
	margin: -5px;
	background: #fff;
}

#topcenterbox {
	width: 400px;
	height: 40px;
	margin: -5px;
	background: #bfdf74;
}

.bottom {
	float: left;
	clear: both;
	width: 800px;
	background: #bfdf74;
}

#bottomrightbox1 {
	width: 80px;
	height: 15px;
	background: #fff;
	float: right;
	clear: both;
}

#bottomrightbox2 {
	width: 350px;
	height: 15px;
	background: #fff;
	float: right;
	clear: both;
}

.bottom p {
	font-size: 75%;
	margin: -5px 0 0 5px;
}

#footer {
	float: left;
	clear: both;
	width: 800px;
	margin-top: 30px;
	border-top: 1px solid #666;
}

#footer p {
	font-size: 75%;
	color: #666;
	margin: 5px 0;
}

#footer #right {
	float: right;
	clear: right;
	text-align: right;
}

#menu {
	margin-bottom: 30px;
	border-bottom: 1px solid #666;
}

#bild {
	border: 10px solid #fff;
	width: 280px;
	height: 187px;
	margin: 20px 0 0 5px;
}

#topleftbox a:link,a:visited {
	color: #fff;
	text-decoration: none;
}

madstick · 27.06.2006, 17:06

nun ... ich habe mir das ganze noch nicht angeschaut aber frag doch mal google nach dem sternchen-hack. danach definierst du die class und id's unterschiedlich für ie und ff und schon funzt dat.

Corsachriz · 27.06.2006, 17:08

kleiner Tipp am Rande: Beim erstellen der Seite jeden Schritt überprüfen, dann klappts auch mit den Browsern ;-)