Tabcontainer/-panels - CSS niet toegepast

[jandirks]

Eén pagina van mijn site heeft 2 functies:

1. Het toevoegen van product gegevens aan de hand van een code.
2. Het tonen van een lijst (in een datagrid) van de toegevoegde producten

Dit werkt prima, maar voor mensen die alleen producten willen bekijken is natuurlijk het toevoegen onnodig en voor mensen die willen toevoegen is de lijst met aanwezig producten minder belangrijk. Ik wil daarom deze 2 functies scheiden, ze blijven nog wel op één pagina, maar elke functie komt op een eigen ajax tabcontainer (tabpanel).

Ik heb de ajax tabcontainer en 2 tabpanels op de pagina gezet en de betreffende functies in de contenttemplate-tags gezet voor het betreffende tabpanel. So far, so good.

Echter, als ik nu de site start en de betreffende pagina ga dan word de css die ik heb ingesteld niet gebruikt. Bijv, een H2 element wordt getoond als een normaal H2 element zoals je dat ziet als je geen stylesheet gebruikt en niet zoals gedefinieerd in mijn stylesheet. In kort komt het er op neer dat alles buiten de tabcontainer er goed uit ziet (lees: overeenkomt met zoals in css gedefinieerd), maar alles binnen de tabcontainer niet.

Ter verduidelijking, hierbij 2 gedeeltelijke screenshots:
De eerste versie, zonder tabs:


De versie met tabs:


Nou is de vraag hier altijd wat je zelf gedaan hebt om het op te lossen. Ik heb een paar uur gegoogled (o.a. met keywords: tabpanel, css, ignored) en verschillende resultaten bekeken, maar alles wat ik tegenkom is hoe de style van de tabcontainer/panels aan te passen. Het tweede wat ik geprobeerd heb is een nieuw project gemaakt met wat testjes en een hele simpele css, maar dat leverde hetzelfde resultaat op. Ook Firebug helpt niet bij het oplossen van dit probleem, de gegenereerde pagina code ziet er in beide gevallen bijna uniek uit.

Wat ik in de google pagina resultaten steeds terug zie is hoe de style van de tabcontainer en de panels van de tabcontainer aan te passen met css, maar hier ben ik dus niet naar op zoek.

Is hetgeen ik in de afbeeldingen toon iets wat ik zou mogen verwachten?

[Verwijderd]

Ja, als die zooi zelf CSS rules definieert, wat hier duidelijk het geval is. Hoe kun je nou zeggen dat je er met Firebug niet uit komt? Klik die h2 aan en kijk waar die lettergrootte vandaan komt. En fix dat.

[MueR]

Dit is client-side spul: schopje naar Webdesign, Markup & Clientside Scripting

[Acid_Burn]

Zijn je css styles misschien te deterministisch? M.a.w. staat je stijl op de h2 in een tabpanel. Dan wordt ie niet toegepast op een input buiten het tabpanel. Wordt de juiste stylesheet wel geladen?
Wat is de exacte definitie van die H2 in je stylesheet?

[Dark Blue]

Bijzonder om te lezen dat dit je overkomt. In één van mijn projecten gebruiken we deze tabpanels ook.
Ik heb je probleem niet. Ik kan je geen voorbeeld laten zien want onze sites draaien alleen bij de klant intern. Maar ik heb binnen die tabpanels H4's staan als ik me niet vergis, en dat gaat uitstekend.

Ik weet dat in de tabpanels zelf geen H-stijlen worden gebruikt en ook niet overschreven worden. Sterker nog, de tabpanels (divs of ul's) hebben specifieke klasses met hele lange namen. Ik had de optie om ze zelf te stylen, maar heb dat even als extraatje beschouwd, de werken van zichzelf al prima.

Overrule't hij alleen H-stijlen, of ook klasses die je zelf set?
En wat gebeurt er als je in Firebug wat definities ter plekke aanpast? Overrule't hij die dan?

[jandirks]

Opgelost!

Ik moest inderdaad de css van de Ajax tabcontainer definieren in mijn eigen css file en daarbij de .ajax__tab_body dezelfde eigenschappen geven als mijn 'content' rule in css.