CCS Zeile mit JS zuweisen - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > CCS Zeile mit JS zuweisen

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > CCS Zeile mit JS zuweisen

Pages: [1]

geschrieben von sobi am 25.06.2005 - 13:46

Ich habe bei einer HP das Formatierungsproblem, dass eine Tabellen-Zeile mit 5 Links in Tabellen Zellen im NS breiter angezeigt wird als im IE. Die TABLE ist 600 breit, die fünf TABELLENZELLEN mit den Links je 117. Da CELLSPACING für die TABLE nicht auf null gesetzt ist, stimmt im IE alles. Ich hab' alles probiert und bin darauf gekommen, dass die Links im NS nur 107(px) breit sein dürfen damit die Ansicht am Monitor stimmt. Mit %-Angaben bei den Links kann ich nicht arbeiten, weil die bei Eintrag in eine STYLES.CSS Datei nicht ausgeführt werden und wenn ich WIDTH="20%" in den Tag mit der Tabelle schreibe, reagiert der Link im IE nicht über die gesamte Zellenbreite.

Ich bräuchte also, je nachdem mit welchem Browser die Seite aufgerufen wird, unterschiedliche CSS Angaben für die Links. Bei IE müsste gelten::

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9:

#menuebar a:hover {
  color: #FFFFFF;
  background-color: #007B79;
  text-decoration: none;
  font-family: 'Comic Sans MS', verdana, arial, sans serif;
  font-size: 10pt;
  width: 117px;
  padding-left: 8px;
}

und bei anderen Browsern

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9:

#menuebar a:hover {
  color: #FFFFFF;
  background-color: #007B79;
  text-decoration: none;
  font-family: 'Comic Sans MS', verdana, arial, sans serif;
  font-size: 10pt;
  width: 107px;
  padding-left: 8px;
}

Das Ganze dann natürlich auch für die übrigen Link Formatierungen a:, a:active und a:visited. Zur Vollständigkeit, die sehen so aus::

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10:

#menuebar a {
  display: block;
  color: #171717;
  background-color: #00CBA9;
  text-decoration: none;
  font-family: 'Comic Sans MS', verdana, arial, sans serif;
  font-size: 10pt;
  width: 117px;
  padding-left: 8px;
}

Bei active und visited entfällt natürlich das DISPLAY:BLOCK.

Wie man die Browserabfrage mit JS macht ist mir bekannt, bloß mit welchen Codezeilen switche ich die Styles um ??? Da bin ich nicht weiter gekommen.

thx
Uli

geschrieben von Patrick am 25.06.2005 - 15:48

Hi,

ist eigentlich ganz primitiv zu realisieren...

Wenn du ne Browserunterscheidung machen kannst, solltest du das auch hinbekommen.

Durch folgenden Code, kannste ein Stylesheet einfach per JS einbinden...

	PHP-Quelltext
`1: 2: 3: 4: 5:`	`<? <script language="javascript"> document.write("<link rel=stylesheet type=text/css href=style.css>") </script> ?>`

mfG,
Patrick

geschrieben von Micha am 25.06.2005 - 16:02

Mit JS würde ich das nicht machen, da Browserweichen hier mehr als unsicher sind. Es lohnt nur eine Weiche, wenn Du wirklich Objekte abfragst, um dann verschiedene Browser in einen anderen Zweig zu schicken.

Für Dein Problem bieten sich conditional comments an. Für den IE lädest Du einfach deinen alternativen Style. Dabei musst Du nur die Zeile ändern, die anders ist und nicht alles. Alle anderen Browser bekommen die "normale" CSS.

Micha

geschrieben von René am 25.06.2005 - 16:33

Hi Uli,

und sans-serif nicht sans serif

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13:

#menuebar a:hover {
  color: #fff;
  background-color: #007b79;
  text-decoration: none;
  font-family: 'Comic Sans MS', verdana, arial, sans-serif;
  font-size: 10pt;
  width: 117px;
  padding-left: 8px;
}
 
#menuebar[id] a:hover {
  width: 107px;
}

geschrieben von sobi am 25.06.2005 - 17:32

Mit einer Browserweiche funktioniert es. Ich werde mal die conditional comments probieren, weil ich da ganz ohne JS auskomme. Die beiden CSS Dateien hab ich ja fertig.

@Rene:: Hi. Ich find die Lösung vom Anschauen her gut, weil sie ohne eine zweite CSS auskommt. Ich versteh aber nicht wo die Umschaltung für Netscape Browser ist. Für was steht [id] ??? Das #menuebar bei mir ist ja die ID für die betr. TABLE wo in den TD Zellen die Links drin sind, die bei NS breiter dargestellt werden.

geschrieben von René am 25.06.2005 - 17:36

Hi Uli,

das #menuebar[id] oder .menuebar[class] versteht nur der Mozilla und der IE läßt es links liegen.

<td id="..." ...><a ... >...</a></td>

oder

<td class="..." ...><a ... >...</a></td>

Noch als Hinweis

<td id="menuebar" ... >
<td id="menuebar_1" ... >
<td id="menuebar_2" ... >

ist nicht richtig eine ID darf nur einmal verwendet werden class dagegen so oft du willst.

<td class="menuebar" ... >
<td class="menuebar" ... >
<td class="menuebar" ... >

geschrieben von sobi am 25.06.2005 - 19:45

Ich hab mich nach etlichen Tests jetzt für die JavaScript Variante entschieden. Die conditional comments laufen zwar prima und auch Exoten ohne JS können die Seite ansehen, allerdings nimmt OPERA die conditionl comments nicht und es kommt zu einem unschönen Erscheinungsbild. Also Schönheit vor comments ....

cu
Uli

geschrieben von Micha am 26.06.2005 - 22:26

Die conditional comments sind ja auch nur für den IE. IdR ist das ja auch der einzige Browser, der probs macht und da es keine zuverlässigen JS-Browserweichen gibt, afaik immer die beste Lösung.

Micha

geschrieben von sobi am 26.06.2005 - 23:58

Opera macht bei mir auch Probleme und nimmt die Formatierungen für NS nicht. Da hab ich dann die Wahl der Qual.

Aber Danke nochmal für die Mühe.

thx
uli

geschrieben von Micha am 27.06.2005 - 00:04

hmm, das Problem habe ich zwar auch gelegentlich, aber konnte es immer lösen. Zumal, wer garantiert Dir, das es in einem anderen Browser korrekt aussieht? Safari usw.? Die wirst Du ja kaum alle durch ein JS abdecken können...

geschrieben von sobi am 27.06.2005 - 09:38

Nö. Aber irgendwo hört's bei mir auch auf. Ich hab' jetzt die 4 gängigen Browser abgedeckt, der Rest hat eben Pech. Ist jetzt aber auch nicht so tragisch, weil's eine Anwendung ist (keine HP), die ein Nutzer für sich selbst anpassen kann.

HTML-Quelltext

HTML-Quelltext

HTML-Quelltext

PHP-Quelltext

HTML-Quelltext