✔ Menü soll in IE,OP,NE, und FI gleich aussehen, brauche etwas hilfe.

Status
Nicht offen für weitere Antworten.
son gohan

son gohan

Erfahrenes Mitglied
Hallo,

ich habe ein Menü von Listmatic, dass ich auf strict XHTML Seite einbauen will, überall wird es ordentlich angezeigt ausser im IE.

Leider bin ich auch mit der Technik von listmatic nicht so vertraut und konnte es nicht schaffen die Seite im IE so hinzubekommen.

Brauche daher etwas Hlilfe.

Das ganze findet ihr hier http://www.n-k-s.de/ui.html

Und der Code sieht so aus.

HTML: 
<?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>
<!DOCTYPE html
	 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	 "DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>menü</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-style-type" content="text/css" />
 
<style type="text/css">
<!--
#navcontainer
{
background: #369;
border-top: 1px solid #9CC;
font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#navlist
{
list-style: none outside none;
margin: 0;
padding: 0;
}
@media all {
#navlist {
text-align: center
}
}
#navlist li
{
bottom: 11px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}
html>body #navlist li
{
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}
#navlist a, #navlist a:link, #navlist a:visited
{
background: #900;
border: 1px solid #FFF;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}
#navlist a:hover
{
background: #C00;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}
#navlist a:active
{
background: #999;
bottom: 0px;
color: #FFF;
position: relative;
right: 0px;
}
#navlist li#active
{
background: #369;
bottom: 13px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}
html>body #navlist li#active
{
background: #000;
margin: 0 4px 0 4px;
}
#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover
{
background: #369;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 0;
color: #FFF;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}
 
-->
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<p>&nbsp;</p>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
 
</body>
</html>

Vielen Dank.
 
Also..., wenn ich deine XML-Deklaration <?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?> entferne,

oder deine komplette Doctype-Angabe durch
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
oder
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
ersetze, ist der Darstellungsfehler im aktiven Menüpunkt verschwunden ;-]

Ohne jegliche Doctype-Angabe tritt der Fehler ebenfalls auf ...

Anmerkung: das alles gilt aber auch für das Original-Demo @ css.maxdesign / listamatic :)

Einen XML-kompatiblen CSS-Lösungsansatz habe ich da leider nicht parat.


greez, maik.l
 
Hallo,

ja ich weis, ohne XHTML Doctype geht es, aber das ist ja gerade das Problem, es soll ja in meine XHTML Seite mit rein. Der IE hat irgendwie bei XHTML Probleme wenn nicht überall feste Größen stehen habe ich den Eindruck, abgesehen von seinen alt bekannten Problemen.

Da ich auch leider bei der TEchnik von listmatic absolut nicht durchblicke, kann ich den Fehler auch nicht herausfinden. Ich habe gedacht es wird nur ein Wert sein, da irgendwie nur der linke active Button vom Menü im IE ganz anders aussieht.

Ansonsten würde ich mich auch über andere Beispiele freuen, hauptsache die sind nich mit Javascript gemacht.
 
feh hat gesagt.:
Da ich auch leider bei der TEchnik von listmatic absolut nicht durchblicke, kann ich den Fehler auch nicht herausfinden
Zum Vergrößern anklicken....
Im CSS-Code gibt es keinen Fehler, denn die anderen Browsers (FF, MOZ, NN, OP) stellen das Listenmenü doch korrekt dar.

Versuch es mal mit einem Conditional Comment und den entsprechenden CSS-Angaben für den IE ;-]


greez, maik.l
 
Hallo,

das mit dem Comment ist eine gute Idee. Leider habe ich von den Sachen keine Ahnung weil ich das noch nie angewendet habe. Und ich weis auch nicht genau wo dieser Comment möglicherweis angebracht wäre, also auch was da rein sollte, und was wiederum das Problem verursacht im IE, weil das Gebilde das dieses Menü von listmatic darstellt, will irgendwie nicht so recht in meine Birne. Der Aufbau ist ziemlich ungewohnt für meine Augen, wenn du verstehts was ich meine.

Troztdem ist es wiederum ein schönes Menü und da nur dieser eine active Link, also der linke der die aktuelle Seite angibt, anscheinend nicht so recht will, habe ich mir gedacht das man das doch irgendwie hinbekommen könnte.

Im Quelltext ist an der Stelle folgendes:

HTML: 
<li id="active"><a href="#">Item one</a></li>

Im CSS Teil dsehen die active Attribute so aus:

HTML: 
#navlist li#active
{
background: #369;
bottom: 13px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}
html>body #navlist li#active
{
background: #000;
margin: 0 4px 0 4px;
}
#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover
{
background: #369;
border-bottom:none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 0;
color: #FFF;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}

Das ist eine Menge Zeug.

Vor allen diese Reihe
HTML: 
#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover

und diese

HTML: 
html>body #navlist li#active

kann ich nicht nachvollziehen.

Ich bin es gewohnt einfach nur immer einige Attribute für ein Element Tag zu definieren, was ja auch recht einfach geht. die Technik html>body zu schreiben kenne ich nicht und zwei Elemente #navlist #active aufeinmal zu formatieren kenne ich auch nicht. Ich habe das noch nie selber so aufgebaut und kann es deswegen nicht nachvollziehen.

Wenn du eine Ahnung hast wäre das echt nicht schlecht.
 
Also nochmal: an dem vorhandenen CSS-Code würde ich keine Veränderungen vornehmen, ausser natürlich grundlegende Layout-Fragen, wie Hintergrundfarben usw.

feh hat gesagt.:
Leider habe ich von den Sachen keine Ahnung weil ich das noch nie angewendet habe.
Zum Vergrößern anklicken....
Zum Thema Conditional Comments (= Browserweiche für IE) habe ich dir doch in deinem Thread 3 Kasten nebeneinander floaten schon ein Demo gepostet :mad:

In diesem speziellen StyleSheet, das nur vom IE gelesen, interpretiert und ausgeführt wird, kannst du die Fehler für die relevanten CSS-Selektoren korrigieren.


greez, maik.l
 
Zuletzt bearbeitet von einem Moderator:
Ich gehe mal davon aus, dass du das Dokument als XHTML interpretiert haben möchtest:
  • Wenn das standalone-Attribut den Wert yes besitzt, muss sich die DTD innerhalb des Dokuments befinden; in deinem Fall fehlt die DTD jedoch.
  • Die Attribute text, bgcolor, link, alink und vlink des body-Elements existieren in XHTML nicht.
  • Bei korrektem XHTML würde das CSS nicht interpretiert, da es nicht als CDATA ausgezeichnet ist. Es als HTML-Kommentar auszuzeichnen ist dann ürbigens überflüssig.
  • Schlussendlich gibt es das HTTP-Header-Feld Content-Style-Type nicht, also ist auch dies überflüssig.

Ansonsten probier mal Folgendes:
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="de" lang="de">
<head>
	<title>men&uuml;</title>
	<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	/*<![CDATA[*/
		* {
			margin:				0;
			padding:			0;
			border-style:			none;
		}
		#navcontainer {
			font:				normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
			background:			#369;
			border-top:			1px solid #9CC;
		}
		#navlist {
			list-style:			none outside none;
			line-height:				12px;
		}
		@media all {
			#navlist {
				text-align:			center;
			}
		}
		#navlist li {
			position:			relative;
			bottom:				12px;
			display:			inline;
			padding:			4px 0;
			line-height:			1.2;
		}
		html>body #navlist li {
			margin:				0 3px 0 0;
			background:			#000;
		}
		#navlist a,
		#navlist a:link,
		#navlist a:visited {
			position:			relative;
			right:				2px;
			bottom:				2px;
			display:			inline;
			padding:			3px 5px;
			height:				18px;
			color:				#FFF;
			text-decoration:		none;
			background:			#900;
			border:				1px solid #FFF;
			cursor:				pointer;
		}
		#navlist a:hover {
			position:			relative;
			right:				1px;
			bottom:				1px;
			color:				#FFF;
			background:			#C00;
		}
		#navlist a:active {
			position:			relative;
			right:				0;
			bottom:				0;
			background:			#999;
			color:				#FFF;
		}
		#navlist li#active {
			position:			relative;
			display:			inline;
			bottom:				19px;
			margin-right:			3px;
			line-height:			9px;
		}
		html>body #navlist li#active {
			bottom:				13px;
			margin:				0 4px;
			background:			#369;
		}
		#navlist #active a,
		#navlist #active a:link,
		#navlist #active a:visited,
		#navlist #active a:hover {
			position:			relative;
			right:				0;
			bottom:				0;
			padding:			3px 5px 0 5px;
			color:				#FFF;
			background:			#369;
			border:				1px solid #9CC;
			border-bottom:			none;
			cursor:				text;
		}
	/*]]>*/
	</style>
	<style type="text/css">
	/*<![CDATA[*/
		body {
			background-color:		#fff;
			color:				#000;
		}
		a:link {
			color:				#f00;
		}
		a:visited {
			color:				#f00;
		}
		a:active {
			color:				#f00;
		}
	/*]]>*/
	</style>
</head>

<body>
	<p>&nbsp;</p>
	<div id="navcontainer">
		<ul id="navlist">
			<li id="active"><a href="#">Item one</a></li>
			<li><a href="#">Item two</a></li>
			<li><a href="#">Item three</a></li>
			<li><a href="#">Item four</a></li>
			<li><a href="#">Item five</a></li>
		</ul>
	</div>
</body>
</html>
 
Hallo Gumbo,

vielen Dank, das Menü funktioniert jetzt in meiner XHTML Seite.

1. Wird die Seite mit dem Doctype jetzt so als XHTML interpretiert oder als HTML?

2. Bei korrektem XHTML würde das CSS nicht interpretiert, da es nicht als CDATA ausgezeichnet ist. Heist dass, wenn ich eine Seite mache und den Doctype
HTML: 
 <?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="de" lang="de">
benutze, dass ich alle CSS Befehle dann in einem CDATA Tag einbinden muss?
Muss das CDATA Tag dann immer in CSS Kommentar Klammern geschrieben werden?

HTML: 
Also Anfang vom Tag /*<![CDATA[*/ hier CSS Code und dann Endtag wieder in Klammern /*]]>*/

3. Wenn ich im Quelltext an einer Stelle z.B. bei einem div Tag CSS Attribute per style="" einbinde und nicht im head, muss ich dann das ganze auch in einem CDATA einbinden, wenn ja wie geht das dort?


4. In deinem Beispiel fängt die erste Zeile CSS Code nach dem CDATA Tag so an
HTML: 
* {
			margin:				0;
			padding:			0;
			border-style:			none;
		}

wozu ist da ein Sternchen als Attribut, steht es im Zusammenhang mit anderen Teilen? Im HTML Quelltext wird ja nirgends ein Sterchen Attribut zugwiesen. Ich kenne das so nicht.

5. Du hast nach Ende des Ersten Teil CSS Code im head ein neuen Teil angefangen,
HTML: 
 <style type="text/css">
/*<![CDATA[*/
body {
background-color: #fff;
color:	#000;
}
a:link {
color:	#f00;
}
a:visited {
color:	#f00;
}
a:active {
color:	#f00;
}
/*]]>*/
</style>

Wieso hast du den Teil nicht mit ins obere Teil gepackt, wegen der Übersicht oder hat es einen anderen Grund, wohl kaum, ne

6. Kann ich das standalone-Attribut guten Gewissen weck lassen in meinen zukünftigen XML-Deklarationen?

7. Wenn ich ein standalone-Attribut benutze, müsste ich also eigene DTD in die Seite einbauen, abgesehen davon das ich nicht weis wie man das genau macht, würde den dann der Quelltext nicht zu lange werden. Die DTD Dateien welche normalerweise unter der URL im Doctype aufgerufen werden vom Browser, sind doch ziemlich lange Texte.

8. Hast du am CSS Code des Menüs auch irgendwas geändert, oder ist alles bei malten geblieben?

Vielen Dank im Voraus.







 
Zuletzt bearbeitet:
  1. Die Interpretation des Inhalts durch den Browser hängt nicht von der DOCTYPE ab, es hängt vielmehr vom Media-Typen ab (siehe Wikipedia: Extensible Hypertext Markup Language – MIME-Typen und HTML-Kompatibilität). Hab ich dir das nicht schon einmal erklärt?
  2. XHTML hat als Sprachgrundlage XML und benötigt daher auch eine korrekte Syntax. In XML-Dokumenten werden CDATA-Abschnitte verwendet, um dem XML-Parser mitzuteilen, dass kein Markup sondern normaler Text folgt. Einen Blick in die Begriffserklärung zu CDATA hätte dir bereits die Antwort gegeben.
  3. Nein, dort ist kein CDATA-Abschnitt nötig, da dort einem Element durch das style-Attribut Stileigenschaften zugewiesen werden.
  4. Das Sternchen ist kein Attribut sondern der CSS-Universalselektor.
  5. Den Quellcode habe ich lediglich von dir übernommen – oder kommt das garnicht von dir? Natürlich ließe sich das auch zu einem zusammenfassen.
  6. Das standalone-Attribut mit dem Attributwert true teilt dem XML-Parser mit, dass sich die DTD innerhalb des Dokuments befindet. Du verweißt jedoch in deinem Quelltext durch die DOCTYPE auf eine DTD. Daher ist es entweder überflüssig oder besitzt den falschen Wert.
  7. Im CSS-Quellcode habe ich an diversen Stellen etwas geändert; was weiß ich selbst nicht mehr.
Ich hoffe, ich konnte deine Fragen ausreichend beantworten.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück