Höhe eines Span einstellen

[devnetik]

Hey Leute,
ich hab folgendes Problem: die Seite an der ich grade arbeite, http://green-arrow-f1.de/ sieht im Firefox ok aus. So wie es sein soll. Im IE aber sind die Span elemente links in der Navi zu dünn.
Kann mir da jemand ein Tipp geben? Divs kann ich anstelle der Spans nicht nutzen da ich ja diesen hover effekt über den kompletten Button haben will. Und ich möchte das man nicht auf den text klicken MUSS sondern man kann den link auch über den "Button" anklicken.

gruß michi

 

[asdfman]

Lass sie auf The W3C Markup Validation Service testen.
Wenn sie standardkonform ist: Gut. Dann ist der ie schuld und man sollte sich icht darum kümmern (das ist die Aufgabe von Microsoft)
Wenn nicht: Standardkonform machen. Dann ist es auch wahrscheinlicher, dass sie überall geht.

 

[devnetik]

also laut dem validator hab ich andere fehler. das hat aber alles nichts mit dem span zu tun. das problem ist einfach das im firefox alles super aussieht. im IE aber wird mein Span was etwa, 20px hoch ist, auf 5 bis 10 gedrückt und dabei verschwindet der halbe text.

 

[asdfman]

Wenn dein Kram ungültig ist, kann der Browser machen, was er will. So lange du kein
ordentliches Markup in der Seite hast, würde ich nicht erwarten, dass sie so aussieht,
wie du willst.

€: Außerdem spuckt mir der Validator (neben haufenweise Anderen Fehlern) auch falsche
SPAN Geschichten an. Also lüg nicht. Korrigier die ganzen Fehler und ich würd mal sagen
mit 80% Wahrscheinlichkeit geht dann auch alles.

Wundere mich, wie du behaupten kannst, dass das gehen soll, wenn der Validator sagt,
dass die Seite nur Mist ist.

 

[devnetik]

oh da ist aber jemand ganz schön angepisst beruhig dich mal. ich schau das die fehler raus sind und dann meld ich mich nochmal. wenns dann nicht geht darfst du dir gern nochmal was überlegen mein freund

 

[Kasn]

der IE kann halt einfach kein min-height... und bei "IE" ist es immer sehr wichtig zu wissen von welchem wir reden. Da sind doch Welten zwischen den Versionen.

(nebenbei ist das markup irgendwie planlos... die ganzen spans solltest du durch eine OL ersetzen)

 

[devnetik]

meinste ich soll ne liste aus der navi machen?

 

[JimmyP]

bei mir ist das auch so

 

[sabermaul]

Ich empfehle dir HTML Validator (Plugin für Firefox). Dann siehst du sofort die Fehler im Quellcode der Website.

 

[little_skunk]

also laut dem validator hab ich andere fehler. das hat aber alles nichts mit dem span zu tun.

Dafür sind "die anderen Fehler" aber auch recht gravierend. Besonders fehlende Tags sind problematisch. Es kann sein, dass ein fehlendes schließendes Tag erst viel später Auswirkungen zeigt. Da wird dann schnell mal eine Tabelle falsch angezeigt obwohl die Tabelle an sich komplett in Ordnung ist. Das alles nur wegen einem scheinbar unwichtigen Fehler an ganz anderer Stelle.

In diesem Sinne kann ich mir asdfman nur anschließen.

Korrigier die ganzen Fehler und ich würd mal sagen
mit 80% Wahrscheinlichkeit geht dann auch alles.

Ich würde eher 99% sagen.

wenns dann nicht geht darfst du dir gern nochmal was überlegen mein freund

Wenn es dann geht, dann hab aber bitte auch die Eier in der Hose um dich hier nochmal zu melden. Oftmals werden solche Fehler hier leider zu allen anderen Leichen in den Keller geschoben. Blos nicht eigene Fehler zugeben...

 

[devnetik]

wow regt euch doch mal ab XD es geht einfach darum ob man die höhe eines spans einstellen kann. wenn ich ein div erstelle kann ich dieses ganz einfach mit height machen. mit spans scheint das aber nicht zu funktionieren.

das problem ist dabei einfach das ich kein div benutzen kann, glaube ich. ich hätte das nämlich gerne so das man den kompletten container anklicken kann und man nicht nur auf den text klicken kann.

habt ihr kein firebug drauf? dann könnt ihr euch den quellcode doch auch anschauen.

desweiteren würde ich gerne wissen welchen doctype ich verwenden soll. ob es da irgendwelche vorgaben gibt.

€: mir spuckt der Validator auch mist aus. er meint "Line 13, Column 7: end tag for element "HEAD" which is not open" wobei das eigentlich schwachsinn ist. wenn ich damit falsch liege, dann korrigiert mich bitte.

 

[TStar]

grossflaechig dummes geschwaetz.
kein ernsthaftes projekt kann sich die ignoranz leisten, streng nach standards zu skripten, wenn jeder depp weiss, dass etliche wichtige browser die standards ganz einfach nicht fehlerfrei umsetzen.
schickmal grosse deutsche seiten wie amazon oder ebay durch den validator, dann erkennst du, wieviel wert das teil wirklich hat: nil and none.

@devnetik:
du bist in einen der MSIE8 flaws reingelaufen.
als kurzfristige loesung wuerd ich dir empfehlen, im kopfbereich der seite den MSIE zu zwingen, in den legacy/kompatibilitaetsmodus zurueckzuschalten, sobald er die seite aufruft, mit

<META HTTP-EQUIV="X-UA-Compatible" CONTENT="IE=EmulateIE7">

langfristig wuerd ich aber ein umdenken planen, das wie folgt aussieht:
als grundgeruest fuer die seite wuerde div tags nutzen, die die seitenbereiche glasklar voneinander abgrenzen/begrenzen. wirklich wichtig wird das grundgeruest, wenn es um pixelgenaues grenzenziehen geht oder anordnung von grafischen elementen.
innerhalb der divs kannst du dich dann relativ frei bewegen, meinetwegen auch mit span tags (sofern es dann wirklich noch eine abweichende formattierung von textstuecken benoetigt).

 

[cnrhkiyf]

schickmal grosse deutsche seiten wie amazon oder ebay durch den validator, dann erkennst du, wieviel wert das teil wirklich hat: nil and none.

stimme dir grundsätzlich zu, aber nur weil es andere nicht hinbekommen, muss ich es ja nicht auch falsch machen, oder? solange ich mich innerhalb des standards bewegen kann, sollte ich das auch tun.

und schick mal apple.de (als kontrast zu amazon.de) durch den validator, also an der größe allein kann man die qualität nicht festmachen, finde ich.

 

[TStar]

es muss etwas grundsaetzliches verstanden werden:
ein standard ist gut und schoen. wenn verschiedene browser diesen standard aber fehlerhaft umsetzen (und so ist es seit vielen jahren), dann kann man ENTWEDER

(a) auf stur stellen und sagen: PECH, wenn dein browser fehler macht, mich interessiert es nicht
oder
(b) man entfernt sich hier und da bewusst vom standard, damit moeglichst viele nutzer in den genuss der seite kommen.

als kunden/nutzer-orientierte dienstleister kann man sich eine von den zwei attitueden erlauben.. die andere nicht.
in sachen webstandards gilt seit jeher folgende grundregel: das ergebnis rechtfertigt die mittel.

was apple oder bildzeitung angeht: die kommen deswegen relativ gut weg, weil sie 95% ihrer navigation in javascript vergraben haben, spielt aber auch keine wirkliche rolle:
"fehlerfreiheit nach w3c-standard" ist kein qualitaetskriterium fuer eine website. von dieser fehlidee muessen auch die engagierten laien irgendwann runterkommen.

 

[Jean Pernod]

TStarGermany, ich glaube du hast zu viel in irgendwelchen Firmen unter Zeit- und Gelddruck Software entwickelt. Da läuft es mit Sicherheit so ab, aber ich glaube nicht, dass die Seiten in irgendeiner Hinsicht qualitativ besser sind als Seiten die sich an den Standard halten.

Ich würde jedem empfehlen die Seiten nach W3C zu entwickeln und falls es Elemente gibt, die sich im IE grob anders verhalten, für ihn ein paar Ausnahmeregeln einzubauen. Unter FF, Opera und Chrome laufen die W3C-Seiten ja in der Regel.

 

[little_skunk]

wow regt euch doch mal ab XD es geht einfach darum ob man die höhe eines spans einstellen kann. wenn ich ein div erstelle kann ich dieses ganz einfach mit height machen. mit spans scheint das aber nicht zu funktionieren.

Soweit ich weiß, ist das Absicht. Es gibt einen kleinen aber feinen Unterschied zwischen DIV und SPAN.

das problem ist dabei einfach das ich kein div benutzen kann, glaube ich. ich hätte das nämlich gerne so das man den kompletten container anklicken kann und man nicht nur auf den text klicken kann.

<html>
<a href=www.google.de><div>test</div></a>
</html>

Probier es einfach mal aus. Ich kann bei mir den kompletten DIV Container anklicken.

habt ihr kein firebug drauf? dann könnt ihr euch den quellcode doch auch anschauen.

Was ist Firebug? Ich verwende den IE. Den Quelltext sehe ich über Rechte Maustaste -> Quelltext anzeigen oder im Menü über Ansicht -> Quelltext.

desweiteren würde ich gerne wissen welchen doctype ich verwenden soll. ob es da irgendwelche vorgaben gibt.

Dein Doctype sollte bereits passen.

stimme dir grundsätzlich zu, aber nur weil es andere nicht hinbekommen, muss ich es ja nicht auch falsch machen, oder? solange ich mich innerhalb des standards bewegen kann, sollte ich das auch tun.

Dieser Aussage kann ich nur 100% zustimmen.

Den Rest von TStarGermany überließt du bitte da es schlichtweg falsch ist was er da schreibt.

 

[TStar]

TStarGermany, ich glaube du hast zu viel in irgendwelchen Firmen unter Zeit- und Gelddruck Software entwickelt.

beinahe richtig. ich hab knapp 7 jahre mit meiner firma fuer andere firmen entwickelt und selbstverstaendlich ist es da so. es zaehlt das, was hinten rauskommt.

weder interessieren den zahlenden kunden irgendwelche technischen fallstricke (denn er geht zurecht davon aus, dass er mich dafuer bezahlt, diese zu umgehen), noch wuerde sich irgendein endnutzer vorschriften bzgl. seiner browserwahl machen lassen (denn der zurecht davon aus, dass eine website auf einem standardbrowser zu funktionieren hat).

Da läuft es mit Sicherheit so ab, aber ich glaube nicht, dass die Seiten in irgendeiner Hinsicht qualitativ besser sind als Seiten die sich an den Standard halten.

das hab ich nie behauptet.
qualitativ gut ist die seite, die die gewuenschten inhalte in gewuenschter form ueber den tresen schiebt. WIE sie dahinkommt, das bleibt ihr selbst ueberlassen.

Ich würde jedem empfehlen die Seiten nach W3C zu entwickeln

ich sagte es bereits: standard ist schoen und gut und ja na klar sollte man so nahe wie moeglich dranbleiben, versteht sich doch von selbst....
und ja, in 99 von 100 faellen ist es der MSIE, der so boese aus der reihe tanzt, dass man die haende ueber dem kopf zusammenschlagen moechte (1, 2 und das sind nur eisbergspitzen)... aber man kommt leider nicht an ihm vorbei...

<html>
<a href=www.google.de><div>test</div></a>
</html>

aeh was zum... aus der erinnerung raus: gruppierende blockelemente innerhalb eines inline-elementes ? das riecht gewaltig nach schmier-hack... kann das mal kurz jemand durch den validator schicken und das ergebnis hier posten ?

Den Rest von TStarGermany überließt du bitte da es schlichtweg falsch ist was er da schreibt.

ich schaeme mich fremd fuer dich.

 

[little_skunk]

ich sagte es bereits: standard ist schoen und gut und ja na klar sollte man so nahe wie moeglich dranbleiben, versteht sich doch von selbst....

Das klang oben aber noch ganz anders...

aeh was zum... aus der erinnerung raus: gruppierende blockelemente innerhalb eines inline-elementes ? das riecht gewaltig nach schmier-hack... kann das mal kurz jemand durch den validator schicken und das ergebnis hier posten ?

Dann eben so:

<div><a href...><span>bla</span></div><a>

Laut Validator ist das in Ordnung. Wie das am Ende aussieht ist aber fraglich.

ich schaeme mich fremd fuer dich.

Das Kompliment kann ich nur zurückgeben.

---------- Beitrag hinzugefügt um 17:06 ---------- Vorheriger Beitrag war um 17:03 ----------

€: mir spuckt der Validator auch mist aus. er meint "Line 13, Column 7: end tag for element "HEAD" which is not open" wobei das eigentlich schwachsinn ist. wenn ich damit falsch liege, dann korrigiert mich bitte.

Ich hab das gerade mal nachgestellt. Vor dem von dir genannten Fehler gibt es noch eine Warnung. Wenn man diese beseitigt, ist auch der von dir genannte Fehler und auch noch gleich der nächste Fehler weg. Sieht am Ende so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>

<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="content-type" 
		content="text/html;charset=windows-1252">

</head>
<body>

 

[TStar]

jetzt bleibts doch wieder an mir haengen, also mal schauen...

Line x, Column x: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

ohne drauf rumzureiten: das ist kein standard-konformer code.

Dann eben so:
<div><a href...><span>bla</span></div><a>

jo, nur funktioniert das natuerlich gaenzlich anders als das, was du da vorher hingezaubert hast... den hack oben fuehren die browser eben nur deswegen aus, weil sie sich NICHT auf die interpretation standardkonformen codes reduzieren. taeten sie das, waere der <a> tag bei auftauchen es <div> tags sofort als geschlossen betrachtet worden und nicht mehr aktiv gewesen = kein click moeglich.

Das Kompliment kann ich nur zurückgeben.

unproblematisch, unsere sachkundenachweise haben wir erbracht.

wenn man wie devnetik vor konkreten problemen steht, braucht man kein bashing irgendwelcher puristen und prinzipienreiter, sondern konkrete hilfe. die hat er bekommen. was er damit anfaengt , is seine sache.
ich betrachte das ganze als geloest und bestell den thread jetzt ab. ~CLICK~

 

[little_skunk]

Ich hab noch mal ein wenig rumgespielt. Bei mir sieht die Sache jetzt folgendermaßen aus. Kannst du ja mal bei dir testen ob das so aussieht wie es aussehen sollte.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="content-type"
		content="text/html;charset=windows-1252">

</head>
<body>

<table border="0" cellspacing="5px" cellpadding="0" width="960px" align="center">
<tr>
	<td colspan="2" class="HeaderCell">
		 
	</td>
</tr>
<tr>
	<td class="NaviCell">
		<span class="link"><a href="?section=home">Home</a></span>
<span class="link"><a href="?section=news">News</a></span>
<span class="link"><a href="?section=team">Team</a></span>
<span class="link"><a href="?section=derwettbewerb">Der Wettbewerb</a></span>
<span class="link"><a href="?section=dasauto">Das Auto</a></span>
<span class="link"><a href="?section=sponsoren">Sponsoren</a></span>
<span class="link"><a href="?section=impressum">Impressum</a></span>
</tr>
</table>
</body>
</html>

body {
	color:#000;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	background-image:url(gfx/bg3.png);
	/*background-color:#000000;*/
}
span.link {
	display:block;
	width:200px;
	min-height:13px;
	padding:1px;
}
span a {
	margin-bottom:-1px;
	padding:5px;
	display:block;
}
a {
	background-color:#DCDCDC;
	text-decoration:none; color:#000;
}
a:hover {
	color:white;
	text-decoration:none;
	background-color:#ABABAB;
}


.NewsDatum {
	margin-top:-42px;
}
h4.NewsHeader {
	font-weight:bold;
	text-align:right;
	border-bottom:2px dashed #cfcfcf;
}
h2.SeitenHeader {
	text-align:center;
	padding-bottom:10px;
	border-bottom:2px solid #ededed;
}

h2.Warnung {
	color:#FF0000;
}
.HeaderCell {
	vertical-align:top;
	height:200px;
	background-image:url(gfx/header4.png);
}
.ContentCell {
	vertical-align:top;
	background-color:#FFF;
	padding:10px;
}
.NaviCell {
	vertical-align:top;
	background-color:#FFF;
	width:200px;
	height:300px;
}
.FooterCell {
	text-align:center;
	background-color:#FFF;
	height:10px;
	padding:5px;
}
.AdminHeader {
	text-align:center;
	padding-bottom:10px;
	border-bottom:3px solid #000;
}

Edit: Kann man auch irgendwie HTML + CSS durch den Validator jagen? Der HTML Quellcode für sich ist erstmal valide.

 

[asdfman]

The W3C CSS Validation Service

 

[little_skunk]

The W3C CSS Validation Service

Danke dir erstmal. Die CSS Datei ist auch valide.
Meine Frage war aber ob ich auch meine lokal gespeicherte CSS und HTML Datei zusammen prüfen kann oder reicht es wirklich aus wenn ich beide Datei einzeln prüfen lassen?

 

[CyLord]

Die musst Du einzeln prüfen lassen & vergiss beim Test auch andere Browser nicht, als nur IE oder Firefox.

 

[little_skunk]

Die musst Du einzeln prüfen lassen

Du hast die Frage falsch gelesen. Ich will nicht wissen ob ich es muss sondern ob eine valide HTML Datei kombiniert mit einer validen CSS Datei trotzdem Fehlerhaft sein kann. Ich vermute mal die Antwort ist Ja. In diesem Fall hätte ich gern die Funktionalität des HTML online Validators nur eben mit 2 lokalen Datein statt einer URL.

So wie es aussieht gibt es das aber nicht. Also muss er wohl meine Vorschläge einarbeiten und dann den Validator nochmal drüber jagen. Ich hab hier zwar auch einen Webserver mit dem ich das schnell ausprobieren kann aber nur fürs validieren ist mir der Aufwand dann doch zu groß.

& vergiss beim Test auch andere Browser nicht, als nur IE oder Firefox.

Testen kann ich das sowieso nicht weil ich garnicht weiß wie es aussehen sollte.

 

[Patric_]

Hab jetzt nur das Problem im ersten Post gelesen.
Im Grunde brauchst du keine Spans oder Divs außen rum.
Einfach dem a in der Navi display: block; mitgeben und gut ist.
Kannst du Höhe, Hintergrundfarbe und auch Ränder einstellen - hover geht dann auch in "jeden" Browser