float & opera

[Wurzel]

hi,

ich stelle gerade ein kleine problem beim opera (7.irgendwas) fest. es geht um ein menü, das still und heimlich vor sich hin-floated ... bis auf den opera:

darstellung IE, Firefox (=richtig):


darstellung opera 7 (=falsch):


auszug aus dem quelltext:

<div class="menu">
    <img src="images/menu_l.gif" width="7" height="24" alt="" class="left">
    <a href="index.php" class="left">Home</a>
    <img src="images/menu_r.gif" width="7" height="24" alt="" class="left">
</div>
<div class="menu">
    <img src="images/menu_l.gif" width="7" height="24" alt="" class="left">
    <a href="index.php?do=info" class="left">Informationen &amp; Preise</a>
    <img src="images/menu_r.gif" width="7" height="24" alt="" class="left">
</div>
...
<div class="clear">&amp;nbsp;</div>

der schnipsel aus dem stylesheet

.menu {
	height:24px;
	background-image: url(../images/menu_m.gif);
	float:left;
}
.menu a {
	font-weight:bold;
	margin-left:3px;
	margin-right:3px;
}
.left {
	float:left;
}
.right {
	float:right;
}
.clear {
	clear: both;
	overflow:hidden;
	height:0;
	display:block;
}

ich hab schon alles mögliche versucht, die kröte zu bändigen, also floatende div/span/p tags um den <a href>, display block im a, alles mit demselben ergebnis.

hat mein/der opera einen bug oder warum versteht der mich nicht?

ps: doctype 4.01 trans ist drin ... wer jetzt meckert, fliegt
pps: die umbrüche im quelltext sind nur fürs forum

[Abraxax]

was spricht dagegen, dies so in etwa umzusetzen?

<ul id="menu">
<li>
    <a href="ziel.html">
    <img src="images/menu_l.gif" width="7" height="24" alt="" />
    Text der Verlinkung
    <img src="images/menu_r.gif" width="7" height="24" alt="" />
    </a>
</li>
<li>
    <a href="ziel.html">
    <img src="images/menu_l.gif" width="7" height="24" alt="" />
    Text der Verlinkung
    <img src="images/menu_r.gif" width="7" height="24" alt="" />
    </a>
</li>
<li>
    <a href="ziel.html">
    <img src="images/menu_l.gif" width="7" height="24" alt="" />
    Text der Verlinkung
    <img src="images/menu_r.gif" width="7" height="24" alt="" />
    </a>
</li>
</ul>

#menu {
    margin: 0;
    padding: 0;
}
#menu li {
    margin: 0 3px;
    padding: 0;
    display: inline;
    list-style-type: none;
    background-image: url(../images/menu_m.gif);
    float: left;
}
#menu a {
    font-weight: bold;
    margin: 0;
    padding: 0;
}

( wie immer ohne gewehr )

[ghostgambler]

hm ... lecker, div-soup

Ka, aber vielleicht ist das was für dich
http://www.sitepoint.com/article/accessible-menu-tabs
es sollte nicht weiter schwer sein bei Google eine browserübergreifende Lösung zu finden

[Wurzel]

@gg
für div-suppe bin ich berü(hm/rüchtig)t ... frag den allwissenden w aus d ... ausserdem ist dein link doof ... viel zuviel gezumpels ... ausserdem ist's spät und ich bin faul

@haxe
ok, auch ein ansatz.

was letztendlich noch nicht die frage klärt, warum der &%$$§§$ opera den aussetzer hat.

[Abraxax]

das muss wohl letztendlich wahsaga dir sagen...

[Wurzel]

Original geschrieben von Abraxax
das muss wohl letztendlich wahsaga dir sagen...

OffTopic:

---

wenn man sich danach nur nicht so belämmert vorkäme ...

---

[Wurzel]

@haxe

hab deinen gedanken mal eingebaut ... auch hübsch

ie, ff, opera

ich mache feierabend für heute, es gibt dinge, die sind morgen auch noch da. *grml*

EDIT:

---

so klappt jetzt, wenn man die element im <li> floaten lässt ... nicht schön, aber selten

---

[ghostgambler]

hm ... es sieht aus als würde der Opera umbrechen :/
mal probiert eine fixe Breite zuzuweisen?

[Wurzel]

siehe mein edit

es sieht aus als würde der Opera umbrechen :/

ich würde eher sagen, das ding ist zum brechen, aber was tut man nicht alles, um minderheiten zu schützen (ist quasi goths geburtstagsgeschenk von mir)

danke erstmal.