CSS für Internetexplorer

esdesign · 28. April 2011

Hallo liebe Tutorialsgemeinde,

ich benötige mal Eure Hilfe. Ich stehe gerade vollkommen aufm Schlauch und brauche mal nen Denkanstoß.

Ich möchte gerne diese Seite

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
<head> 
	<title>Landschaftsbau Antoni</title> 
	<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="styles/pstumm/theme/trivium.css" />
	<![endif]--> 
  <![if !IE]> 
    <link rel="stylesheet" type="text/css" href="styles/pstumm/theme/style.css" /> 
	<![endif]> 
	<link rel="icon" href="styles/pstumm/imageset/favicon.ico" /> 
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
	<meta http-equiv="content-style-type" content="text/css" /> 
	<meta name="resource-type" content="document" /> 
	<meta name="distribution" content="global" /> 
	<meta name="copyright" content="EasyHP CMS 2007-2009 & Eike Schl?ter" /> 
	<meta name="keywords" content="{d_keywords}" /> 
	<meta name="description" content="Herzlich Willkommen auf unseren Seiten, zu deren Besuch wir Sie recht herzlich einladen m&ouml;chten!

Wir sind stets bem&uuml;ht, Sie &uuml;ber " /> 
 
<script type="text/javascript"> 
	// <![CDATA[
		
		function maxlength(id) {
			len = document.getElementById(id).value.length;
			
			if (len > 255) {
				document.getElementById(id).value = document.getElementById(id).value.substring(0, 255);
				left = 0;
			} else {
				left = 255 - len;
			}
		}
	
		function openwindow(url) {
			fenster = window.open(url, "window", "width=330, height=150, status=yes, scrollbars=yes, resizable=no");
		 	fenster.focus();
		}
 
		function smiles(form, textarea, text) { 
			opener.document.forms[form].elements[textarea].value += text; 
		}
 
		function submit() {
			document.form.submit();
		}
 
 
		// From http://de.selfhtml.org
		function insert(aTag, eTag) {
			var input = document.forms['form1'].elements['text'];
		  	input.focus();
 
		  	if (typeof document.selection != 'undefined') {
		    		var range = document.selection.createRange();
		    		var insText = range.text;
		    		range.text = aTag + insText + eTag;
		    		range = document.selection.createRange();
 
		    			if (insText.length == 0) {
		      			range.move('character', -eTag.length);
		    			} else {
		      			range.moveStart('character', aTag.length + insText.length + eTag.length);      
		    			}
		    		range.select();
 
		  	} else if (typeof input.selectionStart != 'undefined') {
		    		var start = input.selectionStart;
		    		var end = input.selectionEnd;
		    		var insText = input.value.substring(start, end);
		    		input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
		    		var pos;
 
		    			if (insText.length == 0) {
		      			pos = start + aTag.length;
		    			} else {
		      			pos = start + aTag.length + insText.length + eTag.length;
		    			}
 
		    		input.selectionStart = pos;
		   		input.selectionEnd = pos;
		  	}
		}
 
	// ]]>
</script> 
 
</head> 
 
<body> 
				<div id="header"> 
                		<img src="styles/pstumm/imageset/header.png" /> 
                </div> 
				<div id="navigation"> 
                    Ideen f&uuml;r ihren Garten <!-- Navigation --><!-- Home --> 
<a href="sites.php?id=1" target="_parent">Home</a> 
<!-- Ende Home --><!-- News --> 
<a href="sites.php?id=6" target="_parent">News</a> 
<!-- Ende News --><!-- Über uns --> 
<a href="sites.php?id=3" target="_parent">Über uns</a> 
<!-- Ende Über uns --><!-- Gästebuch --> 
<a href="guestbook.php" target="_parent">Gästebuch</a> 
<!-- Ende Gästebuch --><!-- Kontakt --> 
<a href="contact.php" target="_parent">Kontakt</a> 
<!-- Ende Kontakt --><!-- Dienstleistungen --> 
<a href="sites.php?id=4" target="_parent">Dienstleistungen</a> 
<!-- Ende Dienstleistungen --><!-- Unsere Projekte --> 
<a href="http://www.landschaftsbau-antoni.de/images/twg184/index.php" target="_blank">Unsere Projekte</a> 
<!-- Ende Unsere Projekte --><!-- Einloggen --> 
<a href="login.php" target="_parent">Einloggen</a> 
<!-- Ende Einloggen --><!-- Ende Navigation --> 
                </div> 
 
				<div id="content"> 
				        <div style="margin-top: 30px;"> 
                      <table width="718" border="0" style="border-collapse:collapse;"> 
                        <tr height="40"> 
                          <td style="background-image:url(styles/pstumm/imageset/Content_Oben.png);">&nbsp;</td> 
                        </tr> 
                        <tr height="50"> 
                          <td style="background-image:url(styles/pstumm/imageset/Content_Mitte.png);"> <!-- START HEAD --> 
<div class="head"><img src="styles/pstumm/imageset/site.png" border="0" alt="Seite" /> <strong id="head">Home</strong></div> 
<div > 
<!-- END HEAD --> 
 
<p>Herzlich Willkommen auf unseren Seiten, zu deren Besuch wir Sie recht herzlich einladen m&ouml;chten!</p>

<p>Wir sind stets bem&uuml;ht, Sie &uuml;ber aktuelle Entwicklungen hier auf  unserer Seite zu informieren. Sie interessieren sich f&uuml;r unsere  Kernkompetenzen? Dann empfehlen wir Ihnen einen Blick in unsere  Bildergalerie unter dem Men&uuml;punkt "Unsere Projekte", in der Sie uns ein  wenig &uuml;ber die Schultern schauen k&ouml;nnen.</p>

<p>Falls Sie Frage oder Anregungen haben, k&ouml;nnen Sie uns unter dem  Men&uuml;punkt "Kontakt" gerne eine Nachricht &uuml;bermitteln. Wir werden uns  schnellstm&ouml;glich mit Ihnen in Verbindung setzen.</p>

<p>Viel Spa&szlig; auf unserer Seite w&uuml;nscht Ihnen</p>

<p>&nbsp;</p>

<p>Horst Antoni &amp; Team</p> 
 
</div> 
 
<div class="foot"> 
	<div class="site_details"> 
		<dl class="empty"> 
			
		
			
		</dl> 
	</div> 
	<div class="site_comments"> 
		<dl class="empty"> 
			
		</dl> 
	</div> 
	<div class="site_options"> 
		<dl class="empty"> 
			<dt> &nbsp; &nbsp;</dt> 
		</dl> 
	</div> 
</div> 
 
 
 
 
 
 
 
 
 
 
 
<!-- START FOOT --> 
</div> 
<!-- END FOOT -->                   </td> 
                        </tr> 
                        <tr height="40"> 
                          <td style="background-image:url(styles/pstumm/imageset/Content_Unten.png);">&nbsp;</td> 
                        </tr> 
                      </table> 
                  </div> 
          
          <div class="copyright"><br><!--Powered by &copy; 2007-2009 <a href="http://www.easyhp-cms.org" class="copyright">EasyHP</a>--></div> 
          
          	</div> 
          	</div> 
          	</div> 
				</div> 
		</body> 
</html>

Code:

html {
						background:url(../imageset/background.png) repeat;
						font-family:Arial, Helvetica, sans-serif;
						font-size:17px;
						line-height:1.125em;
						color:#333;/* text-transform: uppercase; */ 
					}
					#header {
						margin-left: 250px;
						margin-right: 250px;
					}
					#navigation {
						background-color: #217347;
						margin-left: 250px;
						margin-right: 250px;
						width: 718px;
						height: 30px;
						font-family:Arial, Helvetica, sans-serif;
						font-size:14px;
						line-height:1.125em;
						color:#333;
					}
					#content {
						background-color: #99ff99;
						margin-left: 250px;
						margin-right: 250px;
						margin-top: -30px;
						height: auto;
						width: 718px;
					}
					#text {
						margin-top: 40px;
					}
					
					.copyright {
            font-size: 11px;
            text-align: right;
          }

gerne auch für den IE kompatibel machen! Ich hab dem Browser gesacht, wenn IE, dann den Code, wenn kein IE dann die CSS Datei.

Wie muss die IE CSS aussehen****? Ich mach das eigentlich schon läner, stehe aber immerwieder was IE angeht auf dem Schlauch

Eike

CPoly · 28. April 2011

Es wäre vielleicht eher angebracht aufzuzählen, was der IE (welche Versionen überhaupt?) falsch machen. Also ich persönlich habe mich irgendwann an die Macken gewöhnt und kam eigentlich immer ohne extra Browser weichen aus. Man muss eben nur manche Sachen beachten.

esdesign · 28. April 2011

Er zeigt das Menu (#navigation) nicht an. Sonst wär das kein Problem!

CPoly · 28. April 2011

Und wenn du dem IE das gleiche Stylesheet gibst wie den anderen Browsern?

Ersetz mal

HTML:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="styles/pstumm/theme/trivium.css" />
<![endif]--> 
<![if !IE]> 
<link rel="stylesheet" type="text/css" href="styles/pstumm/theme/style.css" /> 
<![endif]>

durch

HTML:

<link rel="stylesheet" type="text/css" href="styles/pstumm/theme/style.css" />

esdesign · 28. April 2011

Dann kein Menu

Ich dachte Anfangs, dass es am Doctype liegt, dass wars nicht. Ich glaube, dass ich ne 2te CSS schreiben muss. Wollte aber erst abklärn ob das nicht auch einfacher geht

CPoly · 28. April 2011

Nach dem ich jetzt zwei mal ins blaue gerate hab, musste ich mir die Datei dann doch mal im IE angucken. Das Problem ist dein komisches Konstrukt mit dem negativen oberen Rand (-30px). Dadurch wird im IE die Navigation einfach überdeckt.

Also du hast in deinem CSS das hier

CSS:

#content {
    margin-top: -30px;
}

aber in deinem HTML folgendes inline css

Code:

style="margin-top: 30px;"

WIESO?

CSS für Internetexplorer

esdesign

Grafikdesigner

CPoly

Mitglied Weizenbier

esdesign

Grafikdesigner

CPoly

Mitglied Weizenbier

esdesign

Grafikdesigner

CPoly

Mitglied Weizenbier

Neue Beiträge