Versch. Probleme mit HTML

Ich bin gerade dabei, das Design meiner Seite abzuändern. Doch kommt das ganze irgendwie nie ganz so raus, wie ich das möchte. Und zwar möchte ich erstens die Schrift ein wenig höher oben in der Navigation und zweitens nicht, dass der rote Hover-Effekt unten drüber geht - was ich mir auch nicht erklären kann. Kann mir jemand helfen?

Der Code des Tests:

[code]

Head-Test

	<style type="text/css">
		div.container{
			width:800px;
			border:1px solid black;
			background-image:url(http://homepage-sk.bplaced.net/bgdata/background.png);
		}
		
		div.head{
			background-image:url(http://www.homepage-sk.bplaced.net/V0/bgdata/banner_pic.png);
			height:90px;
		}
		
		a.header{
			display:block;
			width:100%;
			height:60px;
		}
		
		div.navi{
		display:block;
		background-image:url(http://www.homepage-sk.bplaced.net/V0/bgdata/bg_menue_n.png);
		width:100%;
		height:30px;
		}
		
		div. navipunkte{
			display:table;
		}
		
		div.slash{
			display:table-cell;
			background-image:url(http://www.homepage-sk.bplaced.net/V0/bgdata/bg_menue_n_slash.png);
			width:3px;
			height:30px;
		}
		
		a.navi_p{
			display:table-cell;
			color:white;
			width:20px;
			font-size:14px;
			text-decoration:none;
			padding:5px;
			height:18px;
			font-size:18px;
		}
		
		a.navi_p:hover{
			background-image:url(http://www.homepage-sk.bplaced.net/V0/bgdata/bg_menue_n_hover.png);
			padding:4px;
			border:1px solid #7F0000;
		}
	</style>
</head>
<body>
	<center><div class="container">
		<div class="head">

			<a href="http://www.homepage-sk.bplaced.net/V0/home/startseite/" class="header">Homepage-SK</a>
			<div class="navi">
				<center>
					<div class="navipunkte">
						<a href="http://www.homepage-sk.bplaced.net" class="navi_p">Home</a>
						<div class="slash"></div>
						<a href="http://www.homepage-sk.bplaced.net" class="navi_p">Start</a>

					</div>
				</center>
			</div>
		</div>
	</div></center>
</body>
[/code]

Vielen Dank

MFG

// Hab gerade bemeerkt, dass der Code mit Chrome, Safari und Opera korrekt dargestellt werden. Firefox verzieht ihn leicht und IE wird gar nicht schlau aus dem Code. Hat hier jemand eine Ahnung, was ich falsch gemacht habe für IE und Firefox?

Mögliche Antworten für letztere Frage:

  • Quirksmodus, weil kein doctype angegeben ist?
  • Alte Versionen der browser verwendet?

[quote=“hoffmann”]Mögliche Antworten für letztere Frage:

  • Quirksmodus, weil kein doctype angegeben ist?
  • Alte Versionen der browser verwendet?[/quote]

Nein, bei Firefox hab ich Firefox 3.6 Beta 1. Ich werds mal mit Doctype versuchen.

MFG

// Nein, zumindest mit dem HTML5 Doctype funkionierts auch nicht. Gibt es denn eine andere Möglichkeit, das gleiche Resultat zu bekommen, wie es beispielsweis in Chrome ist? Nur eben auch in Firefox und IE?

Hallo homepage-sk,

tausche doch mal folgenden Code aus, dann bist Du schon mal einen Schritt weiter: div.slash{ display:table-cell; background-image:url(http://www.homepage-sk.bplaced.net/V0/bgdata/bg_menue_n_slash.png); width:3px; height:18px; } a.navi_p{ display:table-cell; color:white; width:20px; text-decoration:none; padding: 9px; font-size:18px; } a.navi_p:hover{ background-image:url(http://www.homepage-sk.bplaced.net/V0/bgdata/bg_menue_n_hover.png); padding:8px; border:1px solid #7F0000; }

Beim Hovern wird immer noch weit über den Text gehighlightet, was ggf. an der Höhe der bg_menue_n_hover.png liegt. Eine hight-Vorschrift hatte hier keine Wirkung.

(getestet auf FF 3.05, mit & ohne Doctype gleiche Ergebnisse)

ich hoffe das hilft Dir weiter :slight_smile:

Gruß ~ Vera

Nun, die ‘HTML5’-Arbeitsgruppe des W3C und die WHAT-WG
glauben zumindest fest daran, daß der HTML5-doctype reicht,
um nicht in den Quirksmodus zu gelangen.

Allerdings gehört zumindest ‘center’ nicht zu dem, was in HTML5
so empfohlen wird, solltest du dann also streichen, wenn du
experimentelle Seiten in der Version ausprobieren willst - ist ja
noch ein Arbeitsentwurf, wo sich alles ändern kann ;o)
Ist das nicht dein Anliegen, solltest du vielleicht eher HTML4
oder XHTML1.x verwenden, weil da ja auch nichts drinsteht,
wofür man HTML5 brauchen täte ;o)

Da du keine URI zu einer Testseite angegeben hast und man
nicht gerne ein Dokument mit Hintergrundbildern von einem
anderen server lokal auf dem eigenen Rechner ausprobieren
möchte, ist da eine gewisse Hürde gegeben, die sich jedem stellt,
der sich um dein Problem kümmern möchte ;o)

Kannst du nicht einfach eine URI zu einer minimalen Testseite
ohne Hintergrundbilder und Schnickschnack angeben, wo man
den Effekt deutlich sehen kann?

Die Änderung von padding zusammen mit dem neuen border
sieht ja erstmal plausibel aus. Änder vielleicht text-decoration
was, wenn das :hover-Ereignis eintritt?

Ich weiß jetzt auch nicht, ob die aktuelle Version vom MSIE
CSS-Tabelleneigenschaften bereits ordentlich interpretiert -
aber fehlen da nicht ohnehin Elemente für eine komplette
Tabelle? Mag ja auch eine mögliche Quelle für einen Unterschied
sein…

v~pure: Das Hintergrundbild bestimmt ja nicht die Größe des
Elementes …

Okay, vielen dank für eure Hilfe - leider hat der liebe IE immer noch sein Mühe damit, ich habs jetzt aber trotzdem mal ins endgültige Design eingebaut und online gestellt:

Homepage-SK

Kann man das noch technisch besser gestalten?

Vielen Dank

MFG

// das einzige was noch nicht gut ist, ist das unter IE alle left ist und nicht center. Wie macht man das per CSS?

[quote=“hoffmann”]Nun, die ‘HTML5’-Arbeitsgruppe des W3C und die WHAT-WG
glauben zumindest fest daran, daß der HTML5-doctype reicht,
um nicht in den Quirksmodus zu gelangen.[/quote]
Soweit ich weiss, hat man diesen “minimalen” Doctype-Bezeichner doch gerade deshalb gewählt, weil er in den vorhandenen Browsern nicht den Quirksmode auslöst - obwohl es durchaus Argumente gibt, die gegen die Kürze des Bezeichners sprechen …

[quote=“chrisb”][quote=“hoffmann”]Nun, die ‘HTML5’-Arbeitsgruppe des W3C und die WHAT-WG
glauben zumindest fest daran, daß der HTML5-doctype reicht,
um nicht in den Quirksmodus zu gelangen.[/quote]
Soweit ich weiss, hat man diesen “minimalen” Doctype-Bezeichner doch gerade deshalb gewählt, weil er in den vorhandenen Browsern nicht den Quirksmode auslöst - obwohl es durchaus Argumente gibt, die gegen die Kürze des Bezeichners sprechen …[/quote]

Ja, das ist so. Nur sind damit noch lange nicht alle Probleme aus der Welt.

Kann das behoben werden, dass im IE die Navi links und nicht zentriert ist?

Hallo,

ich hab noch einen Typo gefunden “Leerzeichen” vor navipunkte
div. navipunkte{
display:table;
}

(das könnte schon das IE-problem lösen ? hab IE nur off-line, kann’s nicht ad hoc testen :wink: )

Und das mit den Umlauten, würde ich auf ‘Befehlsebene’ immer vermeiden, da es schnell ein unauffindbarer Fehler werden kann :

Gruß ~ Vera

oops - ja, das leerzeichen vor navipunkte war das problem. Jetzt gehts auch mit IE.

Das einzige, was bei IE jetzt noch falsch ist, ist dass der Border auch unten sichtbar ist :neutral_face:

MFG

Vielen Dank

Ich denke, das ist soweit erledigt - wenn jemand ein Lösung für IE, bzw. allgemein eine bessere Lösung kennt wäre ich ihm natürlich dankbar. Aber ich kann momentan damit leben.

Vielen Dank für eure schnelle Hilfe.

MFG