Menü im IE :/

insanic! · #1 (**permalink**) 18.12.2005, 15:13

Hallo,

warum funzt folgender Code im IE nicht:

Code:

<?xml version="1.0" encoding="iso-8859-15"?>
<!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" xml:lang="de" lang="de">
<head>

<title>userManagement by jahlabs.de</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
<meta name="robots" content="all" />

<link rel="stylesheet" href="./tpl/style.css" type="text/css" />

</head>
<body>

<div id="left_nav">

		<ul class="cat">
		[*]Meine Einstellungen ...
			[*] ändern
			
		[*]Benutzergruppen ...
			[*] anlegen
			
			[*] editieren
			
			[*] löschen

			
		[*]Benutzer ...
			[*] anlegen
			
			[*] editieren

			
			[*] löschen
			
			[*] ...rechte editieren
			

		[*]Rechte ...
			[*] anlegen
			
			[*] editieren

			
			[*] löschen
			
		[*]Scripteinstellungen
			[*] editieren

			
		[/list]	</div><div id="content">
		<h1 class="ueberschrift">Die eigenen Daten ändern!</h1>
	
<fieldset class="admin">
					<legend>Meine Daten</legend>
	
<p class="meldung_erfolg">Die Einstellungen wurden erfolgreich übernommen!</p>


	
<form action="?cmd=edit_own_prefs" method="post">
	 <label class="left">Passwort:</label>
	 <input type="text" name="password1" value="Neu" size="20" />

	 <label class="left">Passwort (Wiederholung):</label>
	 <input type="text" name="password2" value="" size="20" />

	 <label class="left">ICQ-Nr:</label>
	 <input type="text" name="icq" value="" size="20" />


	 <label class="left">E-Mail:</label>
	 <input type="text" name="mail" value="" size="20" />

	 <input type="submit" value="Übernehmen!" name="sent" class="button" />
	</form></fieldset>
	</div>

<div id="footer">
	<h5 class="copyright">Copyright by !</h5>

</div>

</body>
</html>

Die CSS:

Code:

html, body {
	margin: 0;
	padding: 0;
}

body {
	line-height: 1.4;
	font-family: Verdana, Arial, Times-New-Roman;
	font-size: 12px;
	color: #000000;
	background-color: #aaaaaa;
}

#left_nav {
	border: 1px solid black;
	width: 200px;
	margin-left: 10px;
	margin-top: 10px;
	margin: 0;
	padding: 0;
	float: left;
	display: block;
}


/**********************
 *
 * Oberkategorieren: 
 *
 **********************/
ul.cat {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #cccccc;	
}

ul.cat p {
	display: inline;
	margin-left: 5px;
}

ul.cat li {
	display: block;
	background-color: #cccccc;	
}

ul.cat li:hover {
	display: block;
	width: 100%;
	background-color: #999999;
}


/**********************
 *
 * Unterkategorien:
 *
 **********************/
ul.cat ol.subcat {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #cccccc;	
}

ul.cat ol.subcat li {
	display: block;
	background-color: #cccccc;	
}

ul.cat ol.subcat li:hover {
	display: block;
	width: 100%;
	background-color: #999999;
}

ul.cat ol.subcat p {
	display: inline;
	margin-left: 20px;
}


/**********************
 *
 * Links:
 *
 **********************/
 
/* @menu: */ 
ul.cat ol.subcat a {
	display: block;
	margin-left: 20px;
	text-decoration: none;
	color: #006699;
}

ul.cat ol.subcat a:hover {
	display: block;
	margin-left: 20px;
	text-decoration: none;
	color: #007733;
}


/**********************
 *
 * Main Content:
 *
 **********************/
#content {
	float: right;
	margin-right: 10px;
	display: block;
	width: 76%;
	border: 1px dashed black;
	padding: 7px;
	background-color: #cccccc;
	padding-top: 0px;	
} 

.ueberschrift {
	font-size: 16px;
	margin-top: 2px;
}


/**********************
 *
 * Footer:
 *
 **********************/
#footer {
	clear: both;
	display: block;
	margin-top: 10px;
	text-align: center;
}

h5.copyright {
	font-size: 10px;
}


/**********************
 *
 * Formulare:
 *
 **********************/

/* Beschriftung der Formularfelder: */
.caption {
	display: block;
	float: left;
	clear: both;
}

label.left {
	float: left;
	text-align: left;
	width: 300px;

}

input[type=text], input[type=password], select {
	float: left;
}

input.right
{
	float: left;
	width: auto;
	clear: both;
	margin-left: 5.3em;
	margin-right: .3em;
}

.button {
	border: 1px solid black;
}

/*  Extrawurst fuer Mozilla, keine Ahnung, 
	warum das so ist. Feedback und 
	Loesungsvorschlaege willkommen */
input[type=checkbox].right,
input[type=radio].right,
input[type=submit].right
{
	margin-left: 6.3em;
}

/*  Nicht vergessen, die floats wieder aufzuheben,
	sonst floatet es munter weiter */
form br
{
	clear: both;
}

/*  fuer grafische UAs und DAUs der Hinweis, dass
	die Label anklickbar sind. Weil's so schoen ist, 
	die Kontrollelemente gleich mit. Mit einer Ausnahme: 
	fuer Textfelder macht der Pointer natuerlich keinen 
	Sinn, dort sollte nach wie vor die Text-Einfuegemarke 
	als Cursor erscheinen. Daher hier die Einschraenkung 
	auf die input-Elemente des Typs checkbox, radiobutton, 
	button und submit: */
label,
select,
input[type=checkbox],
input[type=radio],
input[type=button],
input[type=submit]
{
	cursor:	pointer;
}

/*  legt den vertikalen Abstand der 
	einzelnen Elemente zueinander fest */
form
{
	line-height: 140%;
} 

/* Formularfelder: */
.field {
	width: 150px;
	margin-right: 100px;
	display: block;
	float: right;
}


fieldset.admin {
	width: 650px;
}


/* Meldungen im Formular: */
.meldung_erfolg {
	display: inline;
	color: red;
	font-style: italic;
}

.meldung_error {
	display: inline;
	color: red;
	font-style: italic;
}

Screenshot im FF und im IE angehängt. Im FF sieht es richtig aus, im IE falsch (das Menü, und der Abstand von der Formularbegreunzung zur Input-feld-beschriftung!).

Danke im voraus!

mfg

^uncool · #2 (**permalink**) 18.12.2005, 17:19

Nabend

die Pseudoklassen :hover, :link etc funktionieen im IE nur, wenn du sie für einen Link definierst.

ul.cat li:hover

funktioniert somit nicht

Tipp:
Gib den Links im Menu ein display:block eine Breite von 100% (für den IE) und definier so den Hovereffekt für die Links

The Doc · #3 (**permalink**) 18.12.2005, 17:33

du solltest auch auf den XML-Prolog verzichten, denn sonst ist der IE im Quirksmode und somit unberechenbar

Es sei denn, das ist gewollt...

insanic! · #4 (**permalink**) 18.12.2005, 17:43

Danke erstmal.

Also ich habe es nun so gemacht:

CSS:

Code:

/**********************
 *
 * Oberkategorieren: 
 *
 **********************/
ul.cat {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #cccccc;	
	display: block;
}

ul.cat p {
	display: inline;
	margin-left: 5px;
}


/**********************
 *
 * Unterkategorien:
 *
 **********************/
ul.cat ol.subcat {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #cccccc;	
}

ul.cat ol.subcat li {
	display: block;
}


ul.cat ol.subcat p {
	display: inline;
	margin-left: 20px;
}


/**********************
 *
 * Links:
 *
 **********************/
 
/* @menu: */ 
ul.cat ol.subcat a {
	display: block;
	width: 100%;
	text-decoration: none;
	color: #006699;
}

ul.cat ol.subcat a:hover {
	display: block;
	text-decoration: none;
	color: #007733;
}

ul.cat li a {
	display: block;
	background-color: #cccccc;	
	width: 100%;
	text-decoration: none;
	color: #000000;
}

ul.cat li a:hover {
	display: block;
	width: 100%;
	background-color: #999999;
}

und die obermenüpunkte als lionks definiert.
soweit so gut, es funzt

jetzt ein anderes prob: die untermenüpunkte sind ganz links...

wenn ich diese mit paddin-left oder margin-left einrücke, dann geht der hover effekt leider nicht mehr ganz durch ... :/
der is dann halt so breit, wie die breite der box minus die breite des einrückens ...

edit: @doc: das hier: <?xml version="1.0" encoding="iso-8859-15"?> ?
edit²: wenn ich das entferne, dann macht der IE die box einfach breiter (also die content box) ...

^uncool · #5 (**permalink**) 18.12.2005, 17:59

Zitat:

Zitat von insanic!

wenn ich diese mit paddin-left oder margin-left einrücke, dann geht der hover effekt leider nicht mehr ganz durch ... :/

Versuchs mal mit etxt-indent, anstelle von padding

Zitat:

Zitat von insanic!

edit: @doc: das hier: <?xml version="1.0" encoding="iso-8859-15"?> ?

Jap

Zitat:

Zitat von insanic!

edit²: wenn ich das entferne, dann macht der IE die box einfach breiter (also die content box) ...

Klar, dann versteht er das Boxmodell auch richtig, sprich: 100%+ dein Wert für padding-left ist die endliche Breite

insanic! · #6 (**permalink**) 18.12.2005, 18:19

Zitat:

Zitat von ^uncool

Zitat:

Zitat von insanic!

edit²: wenn ich das entferne, dann macht der IE die box einfach breiter (also die content box) ...

Klar, dann versteht er das Boxmodell auch richtig, sprich: 100%+ dein Wert für padding-left ist die endliche Breite

aber FF versteht das boc modell auch richtig oder? un der zeit es trotzdem so an, wies sein soll ...

edit: 10mal F5 gedrückt, funzt

^uncool · #7 (**permalink**) 18.12.2005, 18:25

Ist dann die Content Box im IE größer als im FF? Kann ich mir kaum vorstellen

insanic! · #8 (**permalink**) 18.12.2005, 18:34

Zitat:

Zitat von ^uncool

Ist dann die Content Box im IE größer als im FF? Kann ich mir kaum vorstellen

hast du mein edit gesehn? hat nachm aktualisiern geklapopt

noch ne frage, der abstand zwischen contentende und dem submit button is beim IE größer als beim FF, wie kommt das?

Dieter · #9 (**permalink**) 18.12.2005, 20:10

@Doc:

Zitat:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Bei diesem Doctype ist der IE doch sowieso im Quirksmode, auch ohne XML-Prolog. Oder nicht!?

fricca · #10 (**permalink**) 18.12.2005, 20:19

Zitat:

Zitat von Dieter Krautkraemer

Oder nicht!?

Nö.

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
Slide Menü	Philidor	Javascript & Ajax	12	04.09.2013 23:32
Menü auf Startseite funktioniert nach FORM SUBMIT nicht mehr	Ceres82	(X)HTML	3	23.08.2013 21:00
Darstellungsproblem	flohpapa	CSS	3	16.12.2009 08:55
Vertikale Navigation: IE6 - Whitespace-Bug?	b.erry	CSS	6	12.02.2009 16:46
Umbruch in einem LI bei horizontalem Menü	M4rco	CSS	12	13.10.2006 11:26