PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr (https://www.php-resource.de/forum/)
-   HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/)
-   -   Problem mit Menü beim firefox (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/79076-problem-mit-menue-beim-firefox.html)

joextra 10-12-2006 20:00

Problem mit Menü beim firefox
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hi,

ich sitze nun schon seit stunden an diesen misst und komme nicht weiter. Ich bastle grad ein Menü. Beim ie siehts aus wie es aussehen sollte, nur macht jetzt der blöde firefox probleme (siehe Bild)

Hier der Code:
[CODE]
.leftMenu {
background-image: url(imagesOld/menuArrowBG1.gif);
background-position: right;
vertical-align:top;
width:257px;
height:19px;
margin:0px;
}

.leftMenu a {
font-family:Verdana, Arial;
font-size:11px;
color:#000000;
text-decoration:none;
vertical-align:middle;
width:257px;
height:19px;
line-height:19px;
padding-left:27px;
margin:0px;
}

.leftMenu a:hover {
font-family:Verdana, Arial;
font-size:11px;
color:#000000;
text-decoration:none;
background-image: url(imagesOld/menuArrowBG2.gif);
width:257px;
height:19px;
}[CODE]

Und hier wird das ganze aufgerufen:
Code:

<div class="leftMenu"><a href="">Top News</a></div>
Wie kriege ich es hin, das das ganze Menü beim hover mit den anderen Bild ganz ausgetauscht wird, und nicht nur zum teil wie auf dem Bild zu sehen?

jmc 10-12-2006 20:13

schreib mal background-image: url(imagesOld/menuArrowBG1.gif); unter .leftMenu a statt unter .leftMenu

joextra 10-12-2006 20:29

wenn ich das so mache, wird das hintergrundbild nach unten verschoben und ist nicht mehr mittig (wie man auf den bild bei hover erkennen kann)

wahsaga 10-12-2006 23:54

Re: Problem mit Menü beim firefox
 
Da a von Haus aus ein inline-Element ist, müssen width und height natürlich wirkungslos bleiben - deine Links sind also nur so groß, wie es ihr Inhalt erfordert.
display:block oder floating schafft Abhilfe.


Außerdem brauchst du die allgemeinen Angaben für a bei a:hover nicht noch mal alle extra zu wiederholen.

joextra 11-12-2006 10:03

tatsächlich, damit klappt es fast. durch das padding-left:27px; wird jetzt aber 27 pixel nach rechts zu viel angezeigt. gibt es eine andere möglichkeit als mit padding den text um 27 pixel zu verschieben?

wahsaga 11-12-2006 10:15

Zitat:

Original geschrieben von joextra
durch das padding-left:27px; wird jetzt aber 27 pixel nach rechts zu viel angezeigt.
Du meinst, die Berechung nach dem Boxmodell ist jetzt korrekt?
Zitat:

gibt es eine andere möglichkeit als mit padding den text um 27 pixel zu verschieben?
Du kannst das padding ruhig beibehalten, wenn du width entsprechend veringerst.

Kropff 11-12-2006 10:15

laut box-modell werden die 27 pixel zur gesamtbreite hinzugezählt. also muss die breitenangabe um diesen wert verkleinert werden. und bevor du fragst: im ie siieht das aber sauber aus, der hat eine bug. siehe meinen link.

gruß
peter

joextra 11-12-2006 10:28

Liste der Anhänge anzeigen (Anzahl: 1)
ne, so klappt es auch nicht. wenn ich die 27pixel von der width wegnehme, fehlen die im ie. im ff siehts dann gut aus, im ie aber so (siehe bild)

wahsaga 11-12-2006 10:32

Zitat:

Original geschrieben von joextra
ne, so klappt es auch nicht.
Doch, tut es - wenn du es richtig machst.
Zitat:

wenn ich die 27pixel von der width wegnehme, fehlen die im ie.
Warum die "fehlen", und was du dagegen tun kannst, ist auf der von mir verlinkten Seite ausführlich erklärt - also beschäftige dich bitte damit, anstatt jedes mal sofort "funzt nich" zu plärren.

Kropff 11-12-2006 10:33

falsche doctype. nimm html strict oder xhtml.

gruß
peter

joextra 11-12-2006 10:51

@Kropff
ja, jetzt klappt es. danke, wieder etwas dazu gelernt.


@wahsaga
du hast schon recht, aber wenn man stunden lang an so einen blöden problem hängt ohne auf eine lösung zu kommen, ist man irgend wann so genervt das man einfach keinen bock mehr hat.


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:28 Uhr.

Powered by vBulletin® Version 3.8.2 (Deutsch)
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0
[c] ebiz-consult GmbH & Co. KG