HTML/CSS CSS-Angaben werden ignoriert

[M3Y3R]

Hallo,

ich habe folgendes Problem und hoffe dass mir jemand von euch helfen kann.

Ich habe in einer externen CSS-Datei Formatierungsangaben für das td-Element. Unter anderem wird hier auch die Schriftgröße gesetzt:

td {
    font: 10pt Arial,Helvetica,sans-serif;
}

Nun werden über Greasemonkey weitere DIV-Elemente und CSS-Angaben (hier über GM_addStyle()) in die Seite eingefügt. Jedes Div besitzt dabei eine eindeutige ID nach dem Motto "GM_Section1" wobei die Zahl eine fortlaufende Nummter ist. Innerhalb eines DIV-Elements habe ich nun ebenfalls eine Tabelle.

Meine CSS-Angabe aus dem Greasemonkey-Script sieht nun wie folgt aus:

[id^="GM_Section"] {
    font: 8pt Arial,Helvetica,sans-serif !important;
}

Das Problem ist nun, dass die Font-Angabe aus dem td der eigentlichen Stylesheet-Datei meine Angaben überschreiben. Also die Schriftgröße des TD-Elements nicht 8pt, sondern 10pt ist...


Wer hat eine Idee wie ich dies beheben kann, ohne dem td-Element des GM-Scripts Klassen zuzuweisen!?


Gruß
Daniel

 

[theHacker]

Probier doch mal aus, nur das zu überschrieben, was du eigentlich willst:

[id^="GM_Section"] {
  font-size: 8pt;
}

Auf den ersten Blick seh ich das Problem nicht. Deine Regel sollte - auch ohne important - spezifischer sein und dadurch verwendet werden.

Weil Greasemonkey im Spiel ist:
"Gehören" dir/der Seite die zu stylenden Elemente? Firefox hat gute Sicherheitsvorkehrungen, wie ich am eigenen Leib mal erfahren durfte. Ich hatte damals in einer Firefox-Erweiterung mit jQuery DOM-Elemente in den DOM der aktuelle Seite eingefügt und mich gewundert, warum die nicht gestylt wurden. Lösung damals war, die angelegten Elemente mit dem Kontext des DOM-Documents der aktuellen Seite zu versehen.

 

[M3Y3R]

Probier doch mal aus, nur das zu überschrieben, was du eigentlich willst:

Hab ich auch schon, funktionierte auch nicht...

Deine Regel sollte - auch ohne important - spezifischer sein und dadurch verwendet werden.

Dachte ich auch. Merkwürdig ist nur, dass es beim DIV-Element funktioniert, bei der Tabelle die in diesem DIV liegt, wiederum nicht...

"Gehören" dir/der Seite die zu stylenden Elemente?

Alle Elemente die ich stylen möchte kommen aus dem GM-Script...
Lediglich die CSS-Klasse td{} kommt aus der Seite. Die Angaben darin, möchte ich aber ja nur teilweise überschreiben...

Lösung damals war, die angelegten Elemente mit dem Kontext des DOM-Documents der aktuellen Seite zu versehen.

Was meinst du damit genau?

Wenn ich die td{} überschreibe funktioniert es, aber dann ändert sich auch die Schriftgröße der restlichen Tabellen, welche nicht von mir kommen...

Im übrigen habe ich auch schon folgendes probiert:

[id^="GM_Section"] > td{}

Auch ohne Erfolg...

 

[theHacker]

var $nodeToInsert = $('div', content.document);
// statt
var $nodeToInsert = $('div');

Wie gesagt, war Firefox-Extension. Damals gabs die Probleme, weil der Code im Chrome-Space läuft und entsprechend dort angelegte DOM-Knoten auch zum Chrome-Space gehören, wenn sie nicht explizit als Elemente der Seite (wo sie später eingefügt werden) definiert werden.

Is nur n Denkanstoss und sicher nicht 1:1 übertragbar.

 

[tleilax]

Im übrigen habe ich auch schon folgendes probiert:

[id^="GM_Section"] > td{}

Auch ohne Erfolg...

Nimm mal den > da raus oder hängen die IDs wirklich an dem <tr>?

 

[M3Y3R]

Nimm mal den > da raus oder hängen die IDs wirklich an dem <tr>?

Bringt auch keine Besserung.
Die IDs hängen am dem DIV, welches um dem Table liegt...

 

[Benutzer-32090]

Poste doch mal deinen Code.. So ist das schwer nachzuvollziehen. Oder besser noch direkter link zu deinem Problem.

 

[M3Y3R]

Poste doch mal deinen Code.. So ist das schwer nachzuvollziehen. Oder besser noch direkter link zu deinem Problem.

Einen direkt Link kann ich dir/euch leider nicht geben, aber ich kann meinen Quelltext posten:

var TimeTrackingTable = $('<table>').addClass('VI_TimeTrackingTable');
$.each(TimeTrackingTableData, function(index, data){
	var td1 = $('<td>').html(data['name']);
	var td2 = $('<td>').html(data['value']);
	var tr = $('<tr>').append(td1).append(td2)
	$(TimeTrackingTable).append(tr);	
});
$('#VI_Section1').html(TimeTrackingTable);

Mit dem folgenden CSS-Code funktioniert es nun:

[id^="VI_Section"], [id^="VI_Section"] td {
	font:						9pt Arial,Helvetica,sans-serif !important;
}

Lange Rede, kurzes Ergebnis Gelöst!