4. Darstellungsprobleme bei IE

Darstellungsprobleme bei IE

  • L

    hi,
    ich bin derzeitig dran mir eine eigene website zu programmieren. mit firefox und anderen browsern sieht sie bisher auch so aus wie ich es will. aber leider nicht im internet explorer. habe schon ettliches ausprobiert, doch es will nichts funktionieren. vielleicht kann mir ja jemand helfen.

    seite:
    http://lordpatman.googlepages.com/index.html

    so soll es sein:
    http://img174.imageshack.us/my.php?image=solldc8.png

    so soll es nicht sein (bilder werden nicht angezeigt, farbwechsel bei over-effekten fehlen):
    http://img57.imageshack.us/my.php?image=nichtsollua4.png

    stylesheet + html-datei:

    body
{
	/*background-color: #6e6d6d;*/
	background-image: url(background.png);
	color: #eae8e8;
	font-family: "lucida grande", arial, tahoma, sans-serif;
	font-size: 62.5%;
	margin: 40px 0;
	padding: 0;
}

#container
{
	background-color: #918f8f;
	color: #eae8e8;
	margin: 0 auto;
	position: relative;
	width: 750px;
}

#header
{
	background: transparent url(header.png) /*#00cc00 top left no-repeat*/;
	font-family: "lucida grande", arial, sans-serif;
	/*height: 160px;*/
	margin: 0;
	text-align: center;
}

#header h1
{
	color: #ffd22b;
	font-family: "lucida grande", arial, sans-serif;
	font-size: 500%;
	font-weight: normal;
	margin: 0;
	padding-bottom: 55px;
	padding-top: 60px;
}

#menu
{
	background-color: transparent;
	border-bottom: 2px dashed #ffd22b;
	border-top: 2px dashed #ffd22b;
	margin: 0;
	padding: 5px 0;
	text-align: center;
}

#menu ul
{
	background: transparent url(menuoff.png) top left repeat-x;
	margin: 0;
	padding: 7px;
}

#menu ul li
{
	display: inline;
	list-style: none;
}

#menu ul li a:link, #menu ul li a:active, #menu ul li a:visited
{
	background: transparent url(menuoff.png) center left repeat-x;
	color: #eae8e8 /*#ffd22b*/;
	font-family: "lucida grande", arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding: 7px 6px 7px 6px;
	text-decoration: none;
}

#menu ul li a:hover
{
	background: transparent url(menuon.png) center left repeat-x;
	color: /*#ff8539*/ #ffd22b;
}

#content
{
	background-color: transparent;
	border-bottom: 2px dashed #ffd22b;
	border-left: 2px dashed #ffd22b;
	border-right: 2px dashed #ffd22b;
	border-top: 2px dashed #ffd22b;
	color: #eae8e8;
	float: left;
	margin: 30px 25px 30px 20px;
	width: 500px;
	height: 75px;
}

#sidebar
{
	margin-bottom: 30px;
	margin-left: 580px;
	margin-right: 30px;
	margin-top: 30px;
}

#sidebar ul li
{
	list-style-image: url(list2.gif);	
}

#sidebar ul li a:link, #sidebar ul li a:active, #sidebar ul li a:visited
{
	color: #eae8e8 /*#ffd22b*/;
	font-family: "lucida grande", arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

#sidebar ul li a:hover
{
	color: /*#ff8539*/ #ffd22b;
	text-decoration: underline;
}

.sidebar-title
{
	background: url(title.png) top left repeat-x;
	color: #6e6d6d;
	font-family: "lucida grande", arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	margin-bottom: 5px;
	margin-top: 0;
	padding: 4px;
}

#footer
{
	background-color: transparent;
	border-bottom: 2px dashed #ffd22b;
	border-top: 2px dashed #ffd22b;
	margin: 0;
	padding: 5px 0;
	text-align: center;
}

#footer ul
{
	background: url(menuoff.png) top left repeat-x;
	margin: 0;
	padding: 7px;
}

#footer ul li
{
	display: inline;
	list-style: none;
}

#footer ul li a:link, #footer ul li a:active, #footer ul li a:visited
{
	background: url(menuoff.png) center left repeat-x;
	color: #eae8e8 /*#ffd22b*/;
	font-family: "lucida grande", arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding: 7px 6px 7px 6px;
	text-decoration: none;
}

#footer ul li a:hover
{
	/*background: url(menuon.png) center left repeat-x;*/
	color: /*#ff8539*/ #ffd22b;
}

    <!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" lang="en" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="author" content="Patrick Sch&auml;fer" />
		<meta name="keywords" content="Lord Patman, Patrick Sch&auml;fer, jPad-Lite" />

		<title>..:: Lord Patman ::..</title>

		<link href="style_index.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<div id="container">
			<div id="header">
				<h1>..:: Lord Patman ::..</h1>
			</div>

			<div id="menu">
				<ul>
					<li><a href="#">Home</a></li>

					<li><a href="#">&Uuml;ber mich</a></li>
					<li><a href="#">Forum</a></li>
					<li><a href="#">G&auml;stebuch</a></li>
					<li><a href="#">Kontakt</a></li>
					<li><a href="#">Impressum</a></li>
				</ul>

			</div>

			<div id="content">
				<p>Hallo wie geht es denn so?</p>
			</div>

			<div id="sidebar">
				<h2 class="sidebar-title">Archiv</h2>
				<ul>

					<li><a href="#">August 2006</a></li>
					<li><a href="#">September 2006</a></li>
					<li><a href="#">Oktober 2006</a></li>
				</ul>
			</div>

			<div id="footer">
				<ul>

					<li><a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a></li>
					<li><a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a></li>
					<li><a href="mailto:lordpatman@gmail.com">&copy; Copyright Patrick Sch&auml;fer</a></li>
				</ul>
			</div>
		</div>

	</body>
</html>
    0
  • N

    Also im IE7 sieht es richtig aus 🙂
    Der IE7 löst den IE6 doch ohnehin in 9 Tagen ab. Solltest du den IE6 noch perfekt unterstützen wollen, wirst du wohl CSS-Hacks nutzen müssen.

    0
Anmelden zum Antworten