li-width skaliert nicht bei verkleinerung Browserauflösung

[forutuna]

Auf meiner Bandpage www.karaktzorn.com habe ich unter dem Hauptbild (die zwei Personen) ein ul-Tag mit jeweils drei li-Elemente die jeweils die max-Breite von 33% haben. Wird der Browser unter die eingestellte <UL>-max-Breite von 960 Pixel verkleinert, skalieren aber die <li>-Bereiche nicht sondern brechen um. Was mache ich da noch verkehrt ?

Code: Alles auswählen

margin-top:20px;
margin-bottom:20px;
padding:10px;
border:0;
}
ul#songrechte li {
display: inline-block;
max-width:33%;
list-style:none;
vertical-align:top;
text-align:justify;
font:12px/22px Verdana, Arial, sans-serif;
text-shadow: 1px 1px 1px #DDD;
} 
ul#songrechte li.cc {
padding:0 19px 0 0;
margin-right:20px;
border-right:1px dotted #999;
}
ul#songrechte li.by {
background:url(/images/cc-lizenz-by.gif) no-repeat -3px top;
margin-right:20px;
padding:0 19px 0 29px;
border-right:1px dotted #999;
}
ul#songrechte li.sa {
background:url(/images/cc-lizenz-sa.gif) no-repeat -3px top;
padding:5px 4px 5px 29px;
}
ul#songrechte li span {
font:12px/22px Verdana, Arial, sans-serif;
color:#666;
}

[nerd]

Ich habe es mir nur mal kurz angesehen, aber den problem wird wohl padding, margin und border an den 3 <li> elementen sein.
Versuche margin und padding auf 0 zu setzen, und fuege im <li> ein weiteres <div> ein an welchem du width:100% und dein padding/margin setzt um den abstand zum rand des <li> festzulegen.

zuviel ich weiss wird bei der groessenberechnung zuerst der angegebene wert fuer"width" herrangezogen, und dann noch padding, margin und border hinzuaddiert, weswegen dein element dann keine 33% mehr gross ist, sondern etwas darueber liegt.

[forutuna]

Eigentlich wollte ich zusätzliche Container vermeiden. Aber ich habe es jetzt ungefähr tatsächlich so gemacht/machen müssen. Wobei box-sizing ja auch noch eine Option wäre!?