Frage stellen
Ich arbeite zur Zeit an einer Produktseite, mit dem CMS System Typor3, für meine Firma, dabei konnte man eine Extension einbinden - die RgTabs.
Diese ermöglichen eben ein Tabmenü, das verschiedene Inhalte auf einer Seite darstellen kann. Das alles funktioniert einwandfrei.
Weiterhin kann man selbst mit den Stylesheets sich das Design des Tabmenü individuell anpassen, und da fängt das Problem an.
Der Grund, weswegen ich das in CMS poste ist, dass jm. vllt schon mal mit diesen gearbeitet hat und die CSS Steifheit vllt. kennt.
Problem ist nun folgendes:
So sehen die Tabs im Internet Explorer aus
So aber in FireFox, welches die richtige darstellung ist.
Ich habe nun probiert und versucht, aber ich habe keine Ahnung wieso solch ein Platzhalter zwischen Tab und Inhalt ist?!
Zur Erklärung, der Rahmen welcher nur oben anfängt und dann in das weiße verläuft, ist in jedem Inhalt mit einer Div-Box integriert, welche mit Stylesheets immer ganz nach oben gesetzt wird. Das spielt aber an sich keine Rolle.
Der weiße „Balken“ befindet sich nicht in der Inhaltbox, aber auch nicht in der Divbox der Tabs. Ich weiß nicht woher der kommt, oder was man dagegen tun kann?
Hier mal der CSS code:
- Code: Alles auswählen
/* Tab-Menu ul */
.rgtabs-menu {
padding: 0 0 0 0;
height: 18px;
width: auto;
list-style:none;
}
Dient erstmal zu generellen Einstellung der Größe und art des Tabs
- Code: Alles auswählen
/* Tab-Menu li */
.rgtabs-menu li, #left .rgtabs-menu li {
list-style-type: none;
list-style:none;
background: url(tab-on-l.gif) top left no-repeat;
background-position: 10px 0;
float: left;
margin: 0 10px 0 0 !important;
padding: 0 0 0 18px !important;
cursor: pointer;
}
Hier wird das HG Bild rein geladen für den Tab der angewählt ist, dabei ist es ein Bild welches nicht gekachelt wird.
- Code: Alles auswählen
/* Tab-Menu li.a */
.rgtabs-menu li a, #left .rgtabs-menu li a {
background: url(tab-on-r.gif) top right no-repeat;
display: block;
float: left;
height: 24px;
margin: 0 10px 0 0;
line-height: 24px;
font-family: arial;
font-size: 10pt;
font-weight: bold;
color:#868686;
text-decoration: none;
outline:0;
}
Das ist der Eigentliche Code, in dem ich die Höhe der Divbox des Tabs bestimmen kann, Schriftart etc. aber geal welche Größe ich angebe, im FF verkleinert sich das ganze, der IE ignoriert das!
- Code: Alles auswählen
/* Selected Tab */
#left .rgtabs-menu li.rgtabs-selected, .rgtabs-menu li.rgtabs-selected {
background: url(tab-off-l.gif) top left no-repeat; background-position: 10px 0;
}
#left .rgtabs-menu li.rgtabs-selected a, .rgtabs-menu li.rgtabs-selected a {
background: url(tab-off-r.gif) top right no-repeat;
color: #FFFFFF; padding-right:10px;
}
Hier ist nur noch das Enablen und Disablen der Tabs mit Ihren Bilder, das man sieht welcher ausgewählt ist beim klicken und welcher nicht.
Ok, ich hoffe echt ihr könnt mir helfen!!
Vielen Dank!
Codexer
