HTML, CSS und die Sache mit den versch. Browsern

C

CusHi0n

0
Also ich komm gleich zum punkt^^

10yg.jpg

So sieht das ganze im IE aus. (so solls auch aussehn)


27zr.jpg

So sieht das ganze jedoch in Opera und Firefox aus.

Anm.: Der grüne hintergrund ist nur zur Demonstration.

Also hier handelt es sich, wie man unschwer erkennen kann, um ein simples menü.
Der Aufbau im Code ist wie folgt:

Code: 
<div id="menu">
    <a id="mennews" href="#"></a>
    <a id="menabout" href="#"></a>
    <a id="menproj" href="#"></a>
    <a id="menmisc" href="#"></a>
    <a id="menbook" href="#"></a>
</div>

Und die Links sehen folgendermaßen aus:

Code: 
a#mennews:link
{
    background-image:url(mnews.jpg);
    background-repeat:no-repeat;
    height:40px;
    width:90px;
}
...
a#mennews:hover
{
    background-image:url(mnewsh.jpg);
    background-repeat:no-repeat;
    height:40px;
    width:90px;
}
usw...



Die div-Box mit der ID Menu hat auch fixe Ausmaße zugewiesen bekommen (mit height und width) und in diesem Beispiel eben eine grüne background-color.
Wie am zweiten pic zu erkennen ist reagieren FF und Opera sehr wohl auf die größenangaben heigth und width da die div-Box Menu die angegebenen Maße hat.
Bei den Links wird das jedoch ignoriert. (und das ist ja mein Problem^^)

Wenn jedoch die Links Inhalt haben werden die Menüpunkte auch in den beiden "Problemkindern" angezeigt. Nur das ist erstens eben nicht erwünscht und sieht zweitens etwa so aus:

38ey.jpg



Also und jetzt als kleine Zusammenfassung die passende Frage dazu:
Wie kann ich das am besten reglen, dass die Anzeige in diesen Browsern auch dem ersten pic gleich?



P.S.: Ich habe bewusst ohne Frames und Tables oder dergleichen gearbeitet und die Lösung sollte nicht viel bis garnicht vom STIL der hier angegeben ist abweichen, wenn das möglich ist^^


Danke schonmal,
mfg
CusHi
 
Gib mal bitte n Link zu dem html und css File.

Tendenziell würde ich sagen, dass der Firefox die Dinge richtiger als der IE darstellt.

Hendrik
 
Versuchs mal so:

Code: 
<div id="menu">
    <a id="mennews" href="#"> </a>
    <a id="menabout" href="#"> </a>
    <a id="menproj" href="#"> </a>
    <a id="menmisc" href="#"> </a>
    <a id="menbook" href="#"> </a>
</div>

Code: 
a#mennews:link
{
    background-image:url(mnews.jpg);
    background-repeat:no-repeat;
    text-decoration:none;
    height:40px;
    width:90px;
}
...
a#mennews:hover
{
    background-image:url(mnewsh.jpg);
    background-repeat:no-repeat;
    text-decoration:none;
    height:40px;
    width:90px;
}
 
@sunrize:
die files sind nirgendwo online und die bilder hatte ich am usb stick... sprich: ich bin nicht an meinem rechner ^^ sobald ich die möglichkeit dazu habe werd ich die dinger mal on stellen. und dass es so richtig ist hab ich nie gesagt :D

@xsheep:
ein erzwungenes leerzeichen is auch nur ein leerzeichen^^ da tritt lediglich der effekt wie in bild 3 auf nur halt in der größenordnung eines zeichens^^ das hab ich auch schon versucht^^

mfg
 
Versuch doch mal, ein Blind-GIF mit der Grösse der Links (40x60px) zwischen <a> und </a> zu legen.

cya xsheep
 
mh zum einen gefällt mir diese trickserei (weshalb ich sowas auch nicht umsetzen möchte) nicht und zum andern hab ich das schon versucht^^

ergebnis:
in ff is das layout danach komischerweise horizontal ein bisschen ineinandergeschoben
in opera wird das hintergrund bild von a komischerweise weiter runter geschoben...


ich hab in nem anderen forum auch diese frage gestellt bzw eher da hin kopiert^^

mir wurde gesagt bei inline elementen (wie eben a) werden größenangaben standartgemäß ignoriert und der ie is nur zu gutmütig...
leider wurde nicht wirklich was zur lösung gesagt^^"
 
Original von CusHi0n
mh zum einen gefällt mir diese trickserei (weshalb ich sowas auch nicht umsetzen möchte) nicht und zum andern hab ich das schon versucht^^
Zum Vergrößern anklicken....

Trickserei? Ich finde das garnicht so abwegig, und bei mir funtzts im FF und IE problemlos.
 
ah hab die lösung gefunden^^

hab ein display:block; einfügen müssen^^ so wird a durch zb größenangaben beeinflussbar^^

danke für die rege beteiligung.
kann von mir aus closed werden.

mfg
 
Das _ist_ Trickserei.
Zwar kommt man stellenweise um ein paar andre Tricks nicht rum, damits überall gleich aussieht, aber ich würd sagen hier sollte sich das lösen lassen.
Ich versteh nicht so ganz, was genau dein Problem ist.
Die Links werden mangels Inhalt nicht dargestellt (bzw. die Hintergrundbilder von ihnen), stattdessen sieht man nur die grüne Div-Box?
Ich würde es anders lösen, indem du einfach den <img>-Tag verwendest.
Soll heißen
Code: 
<a id="bla" href="#"><img src="bild.png" /></ a>
Edit:
Warum denn closen? Das passiert hier nur wenn die Diskussion ausartet ;)
Ich würd dir aber raten, lieber img-Tags zu verwenden.
Ist IMO sauberer als das Background-Attribut für sowas zu zweckentfremden, da FF und Opera das Element richtigerweise nicht darstellen, wenn es keinen Inhalt aufweist.
Außerdem solltest du noch einen Alternativtext bereitstellen, falls die Bilder nicht angezeigt werden können, sonst kann mit dem Menu ja nicht mehr viel anfangen.
 
wah so viele schaafe hier :D

wenn ich nen img tag verwende hab ich 1. keine ahnung wie ich das mit dem hover effekt anstellen soll dass dann das bild wechselt... naja das is der hauptgrund^^
und weiters finde ich es schöner da es nicht "offen liegt" dasses nen bild ist (naja grundlegend wirds ja wohl jedem klar sein aber der unterschied kommt zb bei nem rechtsklick -> bild speichern gibts nich und ziel speichern unter speichert dann die dahinterliegende seite.) also kommt schon auf den geschmack an^^

desweiteren wird die adresse nicht angezeigt wenn man mit der maus länger drauf bleibt :D (wobei frag da nicht nach dem sinn :rolleyes:)


wobei mit dem alternativen text hast du recht^^

mfg
 
Das mit dem "offen liegen" ist Quatsch, das machen nur Leute die schlechten Stil verbergen wollen ;)
Das mit dem Bild wechseln ist nicht schwer, du musst halt einfach sowas basteln:
Code: 
<head>
<script type="text/javascript">
function onMouseIn(obj) {
  obj.src = "2.png"; 
}
function onMouseOut(obj) {
  obj.src = "1.png";
}
</script>
</head>
... code code code...

<a href="#"><img id="img1" src="1.png" onmouseover="onMouseIn(this)" onmouseout="onMouseOut(this)"></a>
Das wars schon.
Ist natürlich nur ein Beispiel, aber sollte sich sehr leicht an deine Bedürfnisse anpassen lassen.
 
naja kommt drauf an inwieweit du einen stil erkennen kannst, wenn du den pfad einer datei lesen kannst oder was weis ich ^^ wirklich was verborgen ist da nicht.

naja und zu der lösung mit js. ich hab da so ne schlechte angewohnheit^^ bevor ich mich nicht ernsthaft mit etwas beschäftigt hab verwend ichs auch nicht und das ist hier der fall^^

naja... ich persönlich finde meine methode nicht schlecht gelöst besonders wenn man kein js verwendet/verwenden will/kann oder was weis ich^^

ich lasses in dem fall mal so da es jetzt ja, wie bereits erwähnt, wunderbar funzt.

mfg^^

ps. mh ich glaub ich verwend zu viele emoticons :D
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben