Positionierung in Firefox(3) und Opera(9.5)

[mrt]

Hi ihr,

[Link:http://netvibration.com/index.php@title=hier] könnt ihr gleich mal schauen, worum's geht.

Das soll mal eine Umfrage werden, nach dem Schema:
"<<Zustimmungs-Frage>>:nö<|||||||>joa"
wobei der Gefragte auf einer Skala von 0 bis 100% seine Zustimmung kund tun kann - egal.

Ich bekomm' nicht hin, dass die Skala immer gleich aussieht: In Firefox ist es jetzt ok, in Opera schauen die "Buttons" der Skala oben über die Zeile hinaus.

Positioniert ist es jetzt mit Margin & Padding, so läufts in FF. Wenn ich relativ positioniere, bekomm ich das in Opera hin, aber dann stimmt's in FF wieder nicht :-( Wär schön, wenn jemand mir einen Tipp geben könnte, komme da nicht mehr weiter...

Danke,
T

[bleicher]

Grüße,
uU liegt es an der unterschiedlichen buttongröe der browser - das ist finde ich der fall für imagebuttons.
MFG
bleicher

[mrt]

Hi,

uU liegt es an der unterschiedlichen buttongröe der browser - das ist finde ich der fall für imagebuttons.

"Buttons" war nur eine Umschreibung, weil man da raufdrücken kann. Eigentlich ist es aber eine Liste, die mit "a"'s gefüllt ist, keine Bilder.

Hier mal das (relevante) HTML:

  
<tbody>  
    <tr class="rowWrapper">  
        <td class="anchor">  
            <a name="question1"></a>  
        </td>  
        <td class="question">1. Bin ich zu doof?:</td>  
        <td class="leftMark">totally disagree</td>  
        <td class="bar">  
            <ul class="values">  
                <li><a class="a" href="index.php?q1=1#question1"></a></li>  
                <li><a class="b" href="index.php?q1=2#question1"></a></li>  
                <li><a class="c" href="index.php?q1=3#question1"></a></li>  
                <li><a class="d" href="index.php?q1=4#question1"></a></li>  
                <li><a class="e" href="index.php?q1=5#question1"></a></li>  
                <li><a class="f" href="index.php?q1=6#question1"></a></li>  
                <li><a class="g" href="index.php?q1=7#question1"></a></li>  
                <li><a class="h" href="index.php?q1=8#question1"></a></li>  
                <li><a class="i" href="index.php?q1=9#question1"></a></li>  
                <li><a class="j" href="index.php?q1=10#question1"></a></li>  
                <li><a class="k" href="index.php?q1=11#question1"></a></li>  
            </ul>  
        </td>  
        <td class="rightMark">totally agree</td>  
    </tr>  
</tbody>  

Hier das (relevante) CSS:

  
* {  
    color:#000;  
    text-align:justify;  
    font-family:sans-serif;  
}  
table {  
    padding:0em;  
    margin:0em;  
    background-color:#EEE;  
}  
td.question, td.leftMark, td.rightMark {  
    border:0.1em #FFF;  
    padding:0em 0.5em;  
    margin:0em;  
}  
tr.even {  
    background-color:#FFF;  
    border:0em none;  
    padding:0em 0.5em;  
    margin:0em;  
}  
.bar {  
    margin:0em;  
    padding:0.1em;  
    border:0em none;  
}  
.values {  
    position:relative;  
    padding:0em;  
    margin:0.1em;  
}  
li {  
    list-style:none;  
    display:inline;  
    height:1em;  
    width:1em;  
    padding:0.1em;  
    margin:0em;  
    border:0em none;  
}  
.a {  
    background-color:#f00;  
    padding:0.1em 0.5em;  
    margin-right:0.05em;  
    border:0em none;  
}  
.b,.c,.d, ..., .k {  
 /*haben nur andre farbe als a, sonst genauso*/  
}  
.chosen {  
 background-color: #123;  
 /*border:    0em none;*/  
}  
#main {  
 border:    0.1em;  
}  

Puhh... :-) Hoffe nun ist's besser ersichtlich? Ich habe wirklich keine Idee mehr woran's liegt.

[Beat]

<tbody>
    <tr class="rowWrapper">
...
        <td class="bar">
            <ul class="values">
                <li><a class="a" href="index.php?q1=1#question1"></a></li>
...
            </ul>
    </tr>
</tbody>
[/code]
...
.a {
    background-color:#f00;
    padding:0.1em 0.5em;
    margin-right:0.05em;
    border:0em none;
}
.b,.c,.d, ..., .k {
/*haben nur andre farbe als a, sonst genauso*/
}
.chosen {
background-color: #123;
/*border:    0em none;*/

Puhh... :-) Hoffe nun ist's besser ersichtlich? Ich habe wirklich keine Idee mehr woran's liegt.

Nenn' uns doch mal den Doctype
Wenn du nämlich nicht strict gehst, kann es sein, das Browser sich da etwas unterscheiden.

Eigentlich würde ich dir empfehlen, die <a> Elemente zu floaten, weil margin ja einen float (implizit block) verlangt.
Dein CSS macht also sowieso nicht, was du erwartest.

mfg Beat

[mrt]

Hi,

Nenn' uns doch mal den Doctype
Wenn du nämlich nicht strict gehst, kann es sein, das Browser sich da etwas unterscheiden.

DocType ist loose:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

Eigentlich würde ich dir empfehlen, die <a> Elemente zu floaten, weil margin ja einen float (implizit block) verlangt.
Dein CSS macht also sowieso nicht, was du erwartest.

Du meinst also, auf die Liste zu verzichten... wäre denn "float:none" auch gültig, also "richtig"?

Gruss,
T

[Beat]

DocType ist loose:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

Ja auf die Adressangabe kam es mir an.
Sollte damit auch bei transitional in opera und FF einheitlich werden.
bei MSIE bin ich mir nicht sicher.

Eigentlich würde ich dir empfehlen, die <a> Elemente zu floaten, weil margin ja einen float (implizit block) verlangt.
Dein CSS macht also sowieso nicht, was du erwartest.

Du meinst also, auf die Liste zu verzichten... wäre denn "float:none" auch gültig, also "richtig"?

sorry nein, es sollte natürlich heissen, <li> zu floaten. (display inline wird dabei obsolet)
Du kannst dann die <li> mit den blockeigenschaft width und margin versehen.
Wenn dann noch <a> sisplay block erhält, sollte der ganze Bereich der gefloateten <li> auf die Maus ansprechen.

mfg Beat

[mrt]

DocType ist loose:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

Ja auf die Adressangabe kam es mir an.
Sollte damit auch bei transitional in opera und FF einheitlich werden.
bei MSIE bin ich mir nicht sicher.

Hmm... also entweder ich hab dich falsch verstanden, oder daran lag's nicht. Der DocType war nämlich die ganze Zeit auf "loose" - oder meintest Du, ich soll den auf "strict" ändern? Bin verwirrt.

Eigentlich würde ich dir empfehlen, die <a> Elemente zu floaten, weil margin ja einen float (implizit block) verlangt.
Dein CSS macht also sowieso nicht, was du erwartest.

Du meinst also, auf die Liste zu verzichten... wäre denn "float:none" auch gültig, also "richtig"?

sorry nein, es sollte natürlich heissen, <li> zu floaten. (display inline wird dabei obsolet)
Du kannst dann die <li> mit den blockeigenschaft width und margin versehen.
Wenn dann noch <a> sisplay block erhält, sollte der ganze Bereich der gefloateten <li> auf die Maus ansprechen.

Also die Funktionalität ist ja kein Problem, die ist da, das Positionieren klappt halt leider nicht so richtig. Ausserdem dachte ich gerade, dass "floaten" ein Element aus dem Boxmodell "heraushebt", Begrenzungen von Elternelementen also nicht mehr gelten... Oh mann, ich bin verwirrt. :-(

[Beat]

Ausserdem dachte ich gerade, dass "floaten" ein Element aus dem Boxmodell "heraushebt", Begrenzungen von Elternelementen also nicht mehr gelten... Oh mann, ich bin verwirrt. :-(

Das ist richtig.

Hast du diese Struktur:
<div><p style="float:left">Bla</p></div>
<div style="clear:both"></div>

So musst du beim nächsten Sibling des Parent mit clear dafür sorgen, dass dein befürchteter Fall nicht eintritt.

mfg Beat