Ergebnis 1 bis 10 von 10

Thema: IE-Darstellungsprobleme

  1. #1
    Akyaneos
    Gast

    Standard IE-Darstellungsprobleme

    Hallo wieder mal!
    Mit sehr viel Mühe habe ich die homepage unten zusammengestellt, um Sie, wenn Sie fertig ist in ein CMS einzubinden. Da kamen viele Sachen die für mich noch schwierig waren, zB. dass die Boxen in denen der Text steht verhältnismäßig gleich größer wird, wie auch der Text, wenn man die Seite mit dem Mausrad und STRG skaliert. Der Rand oben ist immer gleich, der untere Rand verhält sich relativ zur Seitengröße.
    Mit ENTSETZEN musste ich feststellen, dass der IE die Seite total anders anzeigt. Kann mir jemand bei der einen oder anderen Stelle helfen, die Darstellung vom IE an die vom FF anzupassen? Das wäre total nett! Danke im Vorraus! Hier noch der Quellcode:

    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="de">
    <head>
    	<title>FF und IE</title>
    	<link rel="stylesheet" type="text/css" href="./basis.css" />
    </head>
    <body>
    	
    	<div id="seite">
    	  <div id="vertik"></div>
    		<div id="menuspalte">
    		
    			<ul id="menu">
    				[*]Menupunkt1
    	[*]Menupunkt2	
    		[*]Menupunkt3, geoeffnet
    							[*]<ul id="menu2">
    							[*]Untermenu1-Menupunkt1
    							[*]Untermenu1-Menupunkt2, geoeffnet
    							 				[*]<ul id="menu3">
    							 				[*]Untermenu2-Menupunkt1
    							 				[*]Untermenu2-Menupunkt2
    							 				[*]Untermenu2-Menupunkt3[/list]
    											[*]Untermenu1-Menupunkt3[/list]
    		[*]Menupunkt4
    		[/list]
    	 </div>
    			<div id="mitte">	
    			[img]./images/titel.jpg[/img]
    			<h1>Dies ist die Überschrift für die Suchmaschinen</h1>
    			<p class="intro">Dieser Text steht hier als class p.intro und ich sage nur&#58;hier!</p>
    			
    
    Dies ist der normale p-text</p>
    			<hr />
    		</div>
    		<div id="logospalte"><div id="logo">[img]./images/logo.gif[/img]
    		</div><div id="nav">
    
    Navi-Testtext</p></div></div>
    	</div>
    	<div id="footer">
    
    footer-testtext</p></div>
    	
    </body>
    </html>
    und hier CSS:

    Code:
    body  &#123;
    	margin&#58; 0;
    	border&#58; 0;
    	padding&#58; 0;
    	font-weight&#58; lighter;
    	font-size&#58; smaller;
    	font-family&#58; Verdana, Geneva, Arial, Helvetica, sans-serif;
    	background-color&#58; black;
    &#125;
    
    #seite &#123;
    	position&#58; fixed;
    	top&#58; 55px;
    	width&#58; 100%;
    	height&#58; 85%;
    	background-color&#58; white;
    &#125;
    
    #menuspalte &#123;
    	float&#58; left;
    	position&#58; relative;
    	margin-right&#58; 30px;
    	top&#58; 246px;
    	left&#58; 1em;
    	width&#58; 14em;
    	height&#58; inherit;
    &#125;
    
    #mitte &#123;
    	position&#58; absolute;
    	left&#58; 19em;
    	top&#58; 195px;
    	width&#58; 37em;
    &#125;
    
    #logospalte &#123;
    	left&#58; 0;
    	position&#58; relative;
    	padding-top&#58; 20px;
    	width&#58; 57em;
    &#125;
    
    #logo &#123;
    	float&#58; right;
    	right&#58; 0;
    	position&#58; absolute;
    	color&#58; Highlight;
    &#125;
    
    h1 &#123;
    	color&#58; Gray;
    	font-weight&#58; bolder;
    	font-weight&#58; 900;
    	font-size&#58; large;
    &#125;
    
    #vertik &#123;
    position&#58; absolute;
     left&#58;16em; 
     width&#58; 1px; 
     height&#58; 100%; 
     background-color&#58; gray;&#125;
    
    #nav &#123;
    	color&#58; Silver;
    	font-weight&#58; lighter;
    	font-size&#58; x-small;
    	position&#58; absolute;
    	left&#58; 46ex;
    	top&#58; 85px;
    &#125;
    html > body #footer &#123;
    
    	position&#58; absolute;
    	bottom&#58; 0;
    &#125;
    #footer	&#123;
    	padding-left&#58; 30px;
    	font-size&#58; xx-small;
    	font-style&#58; normal;
    	font-weight&#58; lighter;
    	color&#58; Silver;
    	float&#58; left;
    	position&#58; relative;
    &#125;
    
    .intro &#123;
    	
    font-weight&#58; 600; &#125;
    
    ul#menu &#123;
    	padding&#58; 0;
    &#125;	
    
    ul#menu2 &#123;
    	padding-left&#58;1ex;
    &#125;
    
    ul#menu3 &#123;
    	padding-left&#58;1ex;
    &#125;
    
    ul#menu li &#123;
    	list-style&#58; none;
    &#125;
    
    
    
    ul#menu a &#123;
    	display&#58; block;
    	padding&#58; 0.2em;
    	text-decoration&#58; none;
    &#125;
    ul#menu a&#58;link &#123;
    	font-size&#58; larger;
    &#125;
    ul#menu a&#58;visited &#123;
      color&#58; #666; 
    &#125;
    ul#menu a&#58;hover &#123;
      color&#58; #F7A218; 
    &#125;
    ul#menu a&#58;active &#123;
    	color&#58; #F7A218;
    &#125;	
    	
    img.headline &#123;
    	position&#58; relative;
    	left&#58; -50px;
    &#125;
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in) Avatar von chris90night
    Registriert seit
    09.09.2006
    Ort
    <?php echo $_SERVER['PHP_SELF']; ?>
    Beiträge
    1.096
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    hoi!

    Der IE6 hält sich nicht an die Vorgaben und berechnet das padding anders ...
    er rechnet es zur breite bzw. höhe dazu und sieht es nicht als teil des objekts, so wie es eig sein sollte.
    EIne Lösung das zu umgehen wäre, ein weiteres <div> und mit margin das gleiche resultat wie mit padding erzielen. nachteil: zu viele verschatelungen ...

    Gruß


    Denk immer daran: auch am anderen Ende der Leitung sitzt ein Mensch!

  3. #3
    Gast

    Standard

    Wie meinst du das ?
    Das Menü ist je nach Menuebene verschieden weit eingerückt, so wie ich das verstehe was du sagst müsste ich dann ein <div> vor jedem Menupunkt einfügen! Ist das die Lösung die du meinst ?

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ich hab mir deine Datei noch nicht näher angesehen. In der CSS verwendest du aber z.T. sehr unterschiedliche Größeneinheiten innerhalb eines Elementes, z.B. px, em, ex. Kann sein, dass auch damit der IE nicht klar kommt.
    Versuche mal hier, eine einheitliche Maßeinheit reinzubringen.
    An der Berechnungsart des IE dürfte es eigentlich nicht liegen, da dieser Bug idR durch Angabe eines Doctypes behoben wird.

  5. #5
    Akyaneos
    Gast

    Standard

    So, ich glaube die Problematik hiermit näher auf den Punkt bringen zu können;
    bitte vergleicht die Darstellung dieses Menus im IE und FF. Der FF zeigt die Seite so an, wie ich es gemeint habe. Der IE bringt einen Abstand immer VOR dem Beginn eines neuen Untermenus!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="de">
    <head>
    	<title>richtige Syntax</title>
    	<style type="text/css">
    
    body  &#123;
    	margin&#58; 0;
    	border&#58; 0;
    	padding&#58; 0;
    	font-weight&#58; 400;
    	font-size&#58; 12px;
    	font-family&#58; Verdana, Geneva, Arial, Helvetica, sans-serif;
    	background-color&#58; black;
    &#125;
    
    #seite &#123;
    	position&#58; fixed;
    	top&#58; 55px;
    	width&#58; 100%;
    	height&#58; 85%;
    	background-color&#58; white;
    &#125;
    
    #menuspalte &#123;
    	float&#58; left;
    	position&#58; relative;
    	margin&#58; 0 30px 0 0;
    	top&#58; 246px;
    	left&#58; 1em;
    	width&#58; 14em;
    	height&#58; inherit;
    &#125;
    
    ul &#123;
    	margin&#58; 0;
    &#125;
    
    ul#menu, ul#menu2, ul#menu3  &#123;
    	border&#58; solid thin red;
    	padding&#58; 0 0 0 0.7em;
    &#125;	
    
    ul#menu li &#123;
    	list-style&#58; none;
    &#125;
    
    ul#menu a &#123;
    	display&#58; block;
    	text-decoration&#58; none;
    &#125;
    
    ul#menu a&#58;link &#123;
      color&#58; #666; 
    &#125;
    
    ul#menu a&#58;visited &#123;
      color&#58; #666; 
    &#125;
    ul#menu a&#58;hover &#123;
      color&#58; #F7A218; 
    &#125;
    ul#menu a&#58;active &#123;
    	color&#58; #F7A218;
    &#125;
    
    </style>
    </head>
    <body>
    	
    	<div id="seite">
    		<div id="menuspalte">		
    			<ul id="menu">
    				[*]Menupunkt1
    				[*]Menupunkt2
    				[*]Menupunkt3, geoeffnet
    				[*]
    					<ul id="menu2">
    						[*]Untermenu1-Menupunkt1
    						[*]Untermenu1-Menupunkt2, geoeffnet
    						[*]
    							<ul id="menu3">
    								[*]Untermenu2-Menupunkt1
    								[*]Untermenu2-Menupunkt2
    								[*]Untermenu2-Menupunkt3
    							[/list]
    							
    						[*]Untermenu1-Menupunkt3
    					[/list]
    				
    				[*]Menupunkt4
    			[/list]
    		</div>
    </body>
    </html>
    Auf meiner Suche nach einer Lösung habe ich dann einfach bei einem neuem <ul>-Element, das[*]-Element davor weggelassen. Dies bringt den IE jetzt zwar endlich dazu, die Seite richtig darzustellen, aber ein Problem hab ich jetzt noch: W3C ! Die Seite ist so nicht valide wenn ich das[*]-Element weglasse. Aber schaut euch das doch auch mal an:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="de">
    <head>
    	<title>Agentur Lindner</title>
    	<style type="text/css">
    
    body  &#123;
    	margin&#58; 0;
    	border&#58; 0;
    	padding&#58; 0;
    	font-weight&#58; 400;
    	font-size&#58; 12px;
    	font-family&#58; Verdana, Geneva, Arial, Helvetica, sans-serif;
    	background-color&#58; black;
    &#125;
    
    #seite &#123;
    	position&#58; fixed;
    	top&#58; 55px;
    	width&#58; 100%;
    	height&#58; 85%;
    	background-color&#58; white;
    &#125;
    
    #menuspalte &#123;
    	float&#58; left;
    	position&#58; relative;
    	margin&#58; 0 30px 0 0;
    	top&#58; 246px;
    	left&#58; 1em;
    	width&#58; 14em;
    	height&#58; inherit;
    &#125;
    
    ul &#123;
    	margin&#58; 0;
    &#125;
    
    ul#menu, ul#menu2, ul#menu3  &#123;
    	border&#58; solid thin red;
    	padding&#58; 0 0 0 0.7em;
    &#125;	
    
    ul#menu li &#123;
    	list-style&#58; none;
    &#125;
    
    ul#menu a &#123;
    	display&#58; block;
    	text-decoration&#58; none;
    &#125;
    
    ul#menu a&#58;link &#123;
      color&#58; #666; 
    &#125;
    
    ul#menu a&#58;visited &#123;
      color&#58; #666; 
    &#125;
    ul#menu a&#58;hover &#123;
      color&#58; #F7A218; 
    &#125;
    ul#menu a&#58;active &#123;
    	color&#58; #F7A218;
    &#125;
    
    </style>
    </head>
    <body>
    	
    	<div id="seite">
    		<div id="menuspalte">		
    			<ul id="menu">
    				[*]Menupunkt1
    				[*]Menupunkt2
    				[*]Menupunkt3, geoeffnet
    						<ul id="menu2">
    								[*]Untermenu1-Menupunkt1
    								[*]Untermenu1-Menupunkt2, geoeffnet
    											 <ul id="menu3">
    													[*]Untermenu2-Menupunkt1
    													[*]Untermenu2-Menupunkt2
    													[*]Untermenu2-Menupunkt3
    							[/list]
    					[*]Untermenu1-Menupunkt3
    					[/list]
    				[*]Menupunkt4
    			[/list]
    		</div>
    </body>
    </html>
    Was kann ich jetzt tun um es sowohl der Validierung als auch dem Auge recht zu machen ? Und was ist mit IE6 ?
    Vielen Dank für die Hilfe!
    Euer Aky

  6. #6
    Akyaneos
    Gast

    Standard


  7. #7
    Großmeister(in)
    Registriert seit
    18.01.2007
    Ort
    Hamburg
    Alter
    26
    Beiträge
    710
    Danke
    2
    Bekam 2 mal "Danke" in 2 Postings

    Standard

    ich würd erstmal die css-dateien in eine externe datei auslagern.

  8. #8
    Aky
    Gast

    Standard

    ich habe sie extra eingebunden, damit man sich ein Forumuser die Seite schneller anschauen kann . Es ist doch egal ob ich die Stylesheets hier oder da sind - wichtig ist was drin steht.

  9. #9
    Großmeister(in)
    Registriert seit
    18.01.2007
    Ort
    Hamburg
    Alter
    26
    Beiträge
    710
    Danke
    2
    Bekam 2 mal "Danke" in 2 Postings

    Standard

    jo klar. is bloß später für dich übersichtlicher und einfacher.

  10. #10
    Aky
    Gast

    Standard

    Ok mir ist es jetzt klar. Hab falsch verschachtelt.
    Ein <ul> in einem <ul> ist so wie ein[*] in einem <ul>, ich hatte also im Beispiel oben ein[*] zuviel.


    richtig:
    Code:
    <ul>
    	[*]text
    	[*]text
    	[*]text
    			<ul>
    					[*]text
    					[*]text
    			[/list]
    	
    	[*]text[/list]
    falsch:
    Code:
    <ul>
    	[*]text
    	[*]text
    	[*]<ul>
    			[*]text
    			[*]text
    			[/list]
    	
    	[*]text[/list]

Ähnliche Themen

  1. Darstellungsprobleme?!?!
    Von Walerik im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 01.02.2008, 03:21
  2. IE7 Darstellungsprobleme
    Von BendOr im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 22.11.2007, 19:14
  3. Darstellungsprobleme im Firefox
    Von murhuber im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 20.05.2007, 15:41
  4. Dokumentendeklaration und Darstellungsprobleme
    Von riddlechest im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 23.03.2007, 12:21
  5. OPERA-Darstellungsprobleme
    Von Marlon im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 29.06.2005, 15:42

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •