css und firefox darstellungsproblem...

[myc]

Hallo,

ich arbeite gerade an einer Navigation mit einem Rollover-Effekt. Im IE funktioniert es wunderwar, nur leider  macht mir Freund Firefox ordentlich Stress. Er will mir die klar definierte Buttonbreite von 155 x 55 Pixel nicht ordentlich darstellen.
Der Code lautet:

a.but1
{ color: #0c3307;
font-size: 13px;
font-family: Arial, Verdana, Arial, Helvetica, sans-serif;
line-height: 15px;
text-decoration: none;
background-image: url(uni_img/b-normal.gif);
text-align: center;
padding-top: 24px;
right: 155px;
width: 155px;
height: 55px }

a:hover.but1
{ color: #0c3307;
font-size: 13px;
text-decoration: none;
background-image: url(uni_img/b-hover.gif);
width: 155px;
height: 55px }

Beispiel: http://myc.info/css/

Was mach ich da falsch???

[mabuhay]

Hi

Soviel ich weiss macht der IE einiges falsch. Denke es ist besser auf dem Firefox zu entwickeln und dann zu schauen was man alles für den IE anpassen muss.

Oder wie seht ihr das?

mfg
mabuhay

[myc]

hm. wenn ich den definierten "a"-tag eine feste Größe zuweise die mir der IE richtig anzeigt und Firefox nicht liegt das prob doch sicher net am IE, oder? ;)
Hast du dir den link mal angesehen?

Hi

Soviel ich weiss macht der IE einiges falsch. Denke es ist besser auf dem Firefox zu entwickeln und dann zu schauen was man alles für den IE anpassen muss.

Oder wie seht ihr das?

mfg
mabuhay

[Auge]

Hallo

hm. wenn ich den definierten "a"-tag eine feste Größe zuweise die mir der IE richtig anzeigt und Firefox nicht liegt das prob doch sicher net am IE, oder? ;)

Doch.

Tschö, Auge

[myc]

schaut euch das problem doch malvergleichsweise mit IE und FF an. www.myc.info/css/

Hab ins Hauptthema auch mal die source reingepackt.

[Auge]

Hallo

schaut euch das problem doch malvergleichsweise mit IE und FF an. www.myc.info/css/

Habe ich bereits getan (HTML von deiner Seite, CSS-Definitionen aus deinem Eröffnungsposting) und dir auch einen Lösungsansatz gepostet.

Tschö, Auge

[myc]

1000 Dank für den Link. Werd das gleich testen.
Hab auch schon eine Beschreibung für eine CSS-Navi hier im Board gefunden, damit aber nicht das gesuchte Resultet erreicht. Na mal kucken...

[myc]

auch im <ul>-tag kann ich keine fixe button breite definieren. :/

[Auge]

Hallo

auch im <ul>-tag kann ich keine fixe button breite definieren. :/

Logisch. Was hat die Liste als Ganzes mit der Breite eines der beinhalteten Links zu tun? Nochmal: Schau dir die Beispiele auf der von mir verlinkten Seite an.

Tschö, Auge

[Engin]

Hi,

auch im <ul>-tag kann ich keine fixe button breite definieren. :/

also ich bin mal Auge seinem Link gefolgt, gesucht, und diese schöne Navi gefunden.
Hab mal zu Testzwecken, wie schwer es denn sein kann, angefangen daran rumzuexperimentieren, 10 Minuen, das ist das Ergebnis.

Grüße,
Engin
 GYRO

[Auge]

Hallo

also ich bin mal Auge seinem Link gefolgt ...

Jaja, der Dativ ist dem Genitiv sein Tod.
*scnr*

Übrigens: Schlicht und schön, dein Beispiel, außer der Farbwahl und dem mMn etwas unauffälligen Hovereffekt.

Tschö, Auge

[Patrick Andrieu]

Hallo Auge!

außer der Farbwahl

Das ist sicher Gernot sein Einfluß[1] ;)

[1] mit deaktiviertem JavaScript

Viele Grüße aus Frankfurt/Main,
Patrick

[Auge]

Hallo Patrick

außer der Farbwahl

Das ist sicher Gernot sein Einfluß[1] ;)

Das knallige[1], schreckliche[1], wasauchimmer[1] blau war, wenn ich nicht irre, schon auf der "Problemseite" von myc vorgegeben.

[1] Dies ist eine zwangsläufig subjektive Meinungsäußerung. ;-)

Viele Grüße aus Frankfurt/Main,
Patrick

Grüße zurück, aus Berlin, wo es viieeeell zu warm ist, jawollja. :-)

Tschö, Auge

[Engin]

Hi Auge,

Übrigens: Schlicht und schön, dein Beispiel, außer der Farbwahl

Das knallige[1], schreckliche[1], wasauchimmer[1] blau war, wenn ich nicht irre, schon auf der "Problemseite" von myc vorgegeben.

;-)

und dem mMn etwas unauffälligen Hovereffekt.

Auch eine vorgabe des Auftraggebers, sozusagen. ;-) (ist allerdings IE nichtnutzern vorenthalten;-)

Grüße,
Engin
 GYRO

[Engin]

Hi,

IE ohne :hover

IE mit :hover

Mein beispiel im FF ohne :hover

Mein beispiel im FF mit :hover

Pixelungenauigkeiten könnte ich jetzt grade bügeln, mach ich aber nicht. ;-)

Grüße,
Engin
 GYRO

[Cheatah]

Hi,

hm. wenn ich den definierten "a"-tag eine feste Größe zuweise die mir der IE richtig anzeigt und Firefox nicht liegt das prob doch sicher net am IE, oder? ;)

wenn der IE es _richtig_ anzeigt, dann nicht, nein. Dummerweise zeigt er es aber falsch an: Er weist dem Element die Dimension zu, obwohl es sich um ein Inline-Element handelt. Verwechsle nicht "richtig" mit "wie gewünscht".

Nebenbei bemerkt ist dies ein Forum, kein Board.

Cheatah

[Steel]

Heyho!

Oder wie seht ihr das?

erstmal genauso.

Was mich interessieren wuerde: Was macht denn der FF 'falsch'?

[Auge]

Hallo

Was macht denn der FF 'falsch'?

Eigentlich war ich versucht, nur ein "Nichts" zu hinterlassen. ;-)

Er ignoriert für die Inlineelemente (<a>) die Höhen- und Breitenangaben. So, wie es sein sollte.

Tschö, Auge

[myc]

gibts ne alternative wenn ich ne fixe höhe und breite anlegen will?

Er ignoriert für die Inlineelemente (<a>) die Höhen- und Breitenangaben. So, wie es sein sollte.

Tschö, Auge

[Steel]

Hat Auge schon gesagt. z.B. floatende Blockelemente, wenn Du sie nebeneinenader haben willst.

[Auge]

Hallo

ich arbeite gerade an einer Navigation mit einem Rollover-Effekt. Im IE funktioniert es wunderwar, nur leider  macht mir Freund Firefox ordentlich Stress. Er will mir die klar definierte Buttonbreite von 155 x 55 Pixel nicht ordentlich darstellen.

Der Fehler liegt, wie so oft, beim MSIE. Der stellt es zwar so dar, wie du es dir wünschst, aber nicht, wie es laut CSS-Standard vorgegeben ist.

a.but1
{

...

right: 155px;
width: 155px;
height: 55px }

...

Was mach ich da falsch???

Zuerst: right hat ohne eine von 'static' abweichende Angabe zu position keine Auswirkung. Allerdings ist eine solche Angabe, die du aber offensichtlich garnicht brauchst, nur bei Blockelementen wirkungsvoll. Dies trifft übrigens auch auf width und height zu.

Ein Link (<a>) ist ein Inlineelement. Solchen kann man keine Breiten- und Höhenangaben zuweisen (sie sind demnach so hoch und breit, wie es der Inhalt erfordert), _außer_ man macht sie z.B. mit display:block; CSS-seitig zu einem Blockelement. Dann verhalten sie sich aber auch wie solche, will sagen, sie bilden einen Block, stehen also untereinander. Um das zu vermeiden, kann man sie auch floaten lassen, womit sie ebenfalls zu Blockelementen werden und Breiten- und Höhenangaben akzeptieren.

Um sie nebeneinander darzustellen, solltest du diese Liste von Links HTML-seitig auch zu einer solchen machen (<ul<li><a href="#">linktext</a></li>...</ul>) und dir bei Listamatic Anregungen zur CSS-Formatierung holen. Da sind eine Menge Möglichkeiten, von schlicht und simpel bis optisch aufwendig, beschrieben.

Tschö, Auge

[myc]

Hab die <ul>-tag-Beschreibung hier im self-html board schon mal getestet gehabt. hab damit aber nicht auf das gesuchte resultat erreicht. 1000 Dank für den Link. Ich schau das mal durch...

[Auge]

Hallo

Hab die <ul>-tag-Beschreibung hier im self-html board schon mal getestet gehabt. hab damit aber nicht auf das gesuchte resultat erreicht. 1000 Dank für den Link. Ich schau das mal durch...

Glaub' mir, "da werden Sie geholfen"[tm]. Schau dich, in deinem Fall, bei "Horizontal Lists" um. Eventuell hilft dir auch eines der Listutorials weiter.

Tschö, Auge

[Gunnar Bittersmann]

Hello out there!

Zuerst: right hat ohne eine von 'static' abweichende Angabe zu position keine Auswirkung. Allerdings ist eine solche Angabe […] nur bei Blockelementen wirkungsvoll.

Wobei alle Elemente bei absoluter/fixer Positionierung automatisch (ohne explizite 'display'-Angabe) zu Blockelementen werden. [CSS2 §9.7]

See ya up the road,
Gunnar

[Auge]

Hallo

... Allerdings ist eine solche Angabe […] nur bei Blockelementen wirkungsvoll.

Wobei alle Elemente bei absoluter/fixer Positionierung automatisch (ohne explizite 'display'-Angabe) zu Blockelementen werden. [CSS2 §9.7]

Danke für den Link. Warum ist das bei relativer Positionierung nicht so?

Tschö, Au*gerade 'Monarchie und Alltag' hörend*ge

[Cheatah]

Hi,

Im IE funktioniert es wunderwar,

Du solltest die Seite unbedingt aus dem Quirks-Mode nehmen. Oder arbeitest Du mit dem IE 5.x?

Cheatah