Anfänger -> CSS wird bei Firefox 100% angezeigt aber beim IE nicht

mscheller · #1 (**permalink**) 06.01.2008, 13:26

Hallo habe folgendes Problem ich habe eine Webseite mit div tag und css erstellt, ich hoffe ich drücke ich richtig aus.
Also alles wird im Firefox richtig angezeigt aber beim IE leider nicht.

Schauts euch doch bitte mal an im IE 7 und Firefox
Test

Code:




body, div, h1, h2, h3, h4, p, a {
    margin:0;
    padding:0;
    border:none;
}

body {
	background-color: #f1f1ef;
	font-family: 'Lucida Sans', 'Trebuchet MS', Helvetica, Arial, Sans-Serif;
	font-size: 85%;
	color: #666;
}

/* Typography */

h1 {
   font-size:1.8em;
   font-weight:bold;
   margin:0.8em 0;
   color:#000000;
   font-variant:small-caps;
}
    
h2 {
   font-size:1.5em;
   font-weight:bold;
   margin:0.8em 0;
   color:#000000;
   font-variant: small-caps;
}

h3 {
   font-size:1.2em;
   font-weight:bold;
   margin:0.8em 0;
   color: #000000;
   font-variant:small-caps;
}

p {
   line-height:1.6em;
   margin:0.8em 0 1.5em 0;
}

a {
	color:#00000;
}

a:hover {
	color:#FFF;
	background-color:#FFCC22;
	text-decoration:none;
}

    
/* Layout */

#wrapper {
	background-color:#ffffff;
	width: 850px;
	margin: 20px auto;
	
}

#head {
	width: 850px;
	height: 169px;
	background-image: url('images/header4.jpg');
	left: 0px;
	top: 0px;";
	}

#navhead {
	text-align: right;
	background-image: url('images/headerbottom.jpg');
	width: 850px; 
	height: 25px; 
	left: 0px; 
	top: 0px; 
}

#leftcol {
	background-color: #FFFFFF;
	width: 100px;
	height: 100px;
	float: left;
}


#rightcol {
	width: 550px; 
	height: 100px; 
	float: right;
	}

    

#main {
	background-color: #FFFFFF;
	width: 850px;
	height: 100px;
	float: left;
}

#footer {
	width: 850px;
	height: 40px;
	float: left;
	background-image: url('images/footer.jpg');
}


#bottom {
	width: 850px; 
	height: 20px; 
	float: left;
	background-color: #f1f1ef;
	font-size: xx-small;
	text-align: right;




	
}


/* Formatvorlagen für die Navigation */
#navhead ul {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
#navihead li {
	float: left;
}
#navihead a {
	color: #fff;
	text-decoration: none;
	margin: 0 1px;
	padding: 5px;
	display: block;
	border: 1px solid #ffffff;
}
#navhead a:hover {
	border: 1px solid #b4b4b4;
	background-color: #b4b4b4;
}

Crizzo · #2 (**permalink**) 06.01.2008, 18:54

Was willst du mit position:relative und z-index bei dir erreichen?

mscheller · #3 (**permalink**) 06.01.2008, 19:01

Habe alles schon rausgenommen, aber leider das gleiche Ergebnis

Crizzo · #4 (**permalink**) 06.01.2008, 19:46

Dein #wrapper wächst schon einmal nicht mit --> FAQ Punkt 2.
Deine Navigation geht in eine Liste.

Ich sehe immer noch "position:relative" und "z-index" wovon du nichts hast.

Wieso hat ein Element "class="style1", wenn es diese Klasse nicht gibt?

EvT · #5 (**permalink**) 06.01.2008, 19:51

Zitat:

Code:

#head {
...    
top: 0px;" 
...  
}

Lösch doch mal das Anführungszeichen nach top: 0px.
Besser ?

Crizzo · #6 (**permalink**) 06.01.2008, 19:57

Und danach diese Fehler: W3C CSS Validator results for http://bilder.ctscheller.de/

mscheller · #7 (**permalink**) 07.01.2008, 11:45

Danke für eure Antwort jetzt läufts... Aber ich habe noch ein Frage zu BlachHack. Du hast geschrieben

Zitat:

Dein #wrapper wächst schon einmal nicht mit --> FAQ Punkt 2.
Deine Navigation geht in eine Liste.

Ich werde mit dem FAQ nicht schlau .. was muss ich den im Wrapper einstellen das er mitwächst. Und wie meinst du das meine Navigation geht in eine Liste.

Crizzo · #8 (**permalink**) 07.01.2008, 13:49

Die Navigation gehört in eine Liste (<ul>) statt einfach so nebeneinander!

@FAQ Punkt 2: http://xhtmlforum.de/49703-zerhackte...tml#post365441

mscheller · #9 (**permalink**) 07.01.2008, 18:14

ok Navi habe ich .. Danke.. aber mit dem Clear das haut einfach nicht so hin..habe es schon aus Verzweifung schon überall probiert...

Hier mein Code....
default.htm

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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" title="CSS" type="text/css" href="style.css" media="screen" />


	




	

</head>

<body>

<div id="wrapper">	
	<div id="head">
	</div>
	<div id="navhead">
	<ul>
				<li><a href="default.htm">Home</a></li>  
				<li><a href="leistung/leistung.htm">Leistung</a></li>  
				<li><a href="service/service.htm">Service</a></li>
				<li><a href="impressum.htm">Impressum</a></li>
	</ul>		
	</div>
	<div id="main">
	<div id="leftcol">
		</div>
	<div id="rightcol">
	</div>
	</div>
	<div id="footer">
	</div>
		<div id="bottom">
		© 2007 HTC Systemhaus GmbH | Letzte Aktualisierung am 06.02.2008</div>
	
</div>

</body>

</html>

style.css

Code:


body, div, h1, h2, h3, h4, p, a {
    margin:0;
    padding:0;
    border:none;
}

body {
	background-color: #f1f1ef;
	font-family: 'Lucida Sans', 'Trebuchet MS', Helvetica, Arial, Sans-Serif;
	font-size: 85%;
	color: #666;
}

/* Typography */

h1 {
   font-size:1.8em;
   font-weight:bold;
   margin:0.8em 0;
   color:#000000;
   font-variant:small-caps;
}
    
h2 {
   font-size:1.5em;
   font-weight:bold;
   margin:0.8em 0;
   color:#000000;
   font-variant: small-caps;
}

h3 {
   font-size:1.2em;
   font-weight:bold;
   margin:0.8em 0;
   color: #000000;
   font-variant:small-caps;
}

p {
   line-height:1.6em;
   margin:0.8em 0 1.5em 0;
}

a {
	color:#FFF;
}

a:hover {
	color:#FFF;
	background-color:#FFCC22;
	text-decoration:none;
}

    
/* Layout */

#wrapper {
	background-color:#ffffff;
	width: 850px;
	margin: 20px auto;
	clear: both;

	
}

#head {
	width: 850px;
	height: 169px;
	background-image: url('images/header4.jpg');
	left: 0px;
	top: 0px;
	}

#navhead {
	background-image: url('images/headerbottom.jpg');
	width: 850px; 
	height: 25px; 
	left: 0px; 
	top: 0px; 
	text-align: right;
	}
html>body #navhead {
	overflow: hidden;
}



#leftcol {
	background-color: #FFFFFF;
	width: 100px;
	height: 100px;
	float: left;
	border-width: 1px;
	border-style: solid;
	


}


#rightcol {
	width: 550px; 
	height: 100px; 
	float: right;
	border-width: 1px;
	border-style: solid;



	}

    

#main {
	padding: 10px 10px 10px 10px;
	background-color: #FFFFFF;
	width: 830px;
	height: 100px;
	float: left;
	

}

#footer {
	clear: both;
	width: 850px;
	height: 40px;
	float: left;
	background-image: url('images/footer.jpg');
	clear: both;

}


#bottom {
	width: 850px; 
	height: 20px; 
	float: left;
	background-color: #f1f1ef;
	font-size: xx-small;
	text-align: right;
	





	
}


/* Formatvorlagen für die Navigation */
#navhead ul {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
#navhead li {
	float: right;
}
#navhead a {
	color: #fff;
	text-decoration: none;
	margin: 0 1px;
	padding: 5px;
	display: block;
	border: 1px solid #ffffff;
}
#navhead a:hover {
	border: 1px solid #b4b4b4;
	background-color: #b4b4b4;
}

EvT · #10 (**permalink**) 07.01.2008, 18:38

Wahrscheinlich hat es mit deinem Problem nichts zu tun, aber lösch den Microsoft-Office-Teil.

Zitat:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

besser:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de-DE">

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS für Firefox, IE, Opera Probleme - Browserweiche	talkuvit	CSS	4	31.10.2009 19:07
HTML-TextAd mit externe CSS wird unterschiedlich angezeigt!	RedPoint	CSS	4	27.05.2009 13:49
Seite wird im Internet Explorer nicht angezeigt - Firefox ohne Probleme	Alex-2.5	CSS	2	01.03.2007 04:32
CSS unterschiede zwischen Firefox und Explorer	Gimli1972	CSS	6	28.07.2006 15:55
CSS anfänger will nen paar Tips / Antworten :>	koDiacc	CSS	23	20.09.2004 13:33