Tab-Größe ändern

Ich habe eine Tabber-Box, die 3 tabs ändern jeweils die größe beim klicken und haben einen abstand also padding dazwischen. wie bekomme ich alle tabs gleich groß und ohne abstand hin?

<style type="text/css"> body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; } ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; } ul#tabs li { display: inline; } ul#tabs li a { color: #FFFFFF; background-color: #333399; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; } ul#tabs li a:hover { background-color: #330099; } ul#tabs li a.selected { color: #FFFFFF; background-color: #333399; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; } div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #fffff; } div.tabContent.hide { display: none; } </style>

Wie sieht denn der HTML-Code dazu aus? Bei display: inline; wird Whitespace zwischen Elementen nicht ignoriert.

Mach „ul#tabs li a“ zu einem Blockelement und gib ihm eine feste Breite. Dabei solltest Du gleichzeitig jedoch auf das padding verzichten da es sonst dazu addiert wird.

ist ein blockelement ein

? wie soll ich denn den code abändern?

Ich sprach vom CSS, nicht vom HTML-Code. Per CSS kannst Du jedes Element zu einem Blockelement machen.

display: block;

Hab es so angepasst, die tabs werden aber vertikal also untereinander angezeigt, sie sollten aber horizontal also nebeneinander erscheinen, hab ich da etwas vergessen??

ul#tabs li { display: inline; } ul#tabs li a { display: block; color: #FFFFFF; background-color: #333399; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.0em; text-decoration: none;}

Dann musst Du sie noch floaten. Und clearen nicht vergessen.

Die Regel wird dann zudem zumindest überflüssig, wenn du den Float-Ansatz (den ich auch empfehlen würde) wählst:

ul#tabs li { display: inline; }