browser prob mit css datei

hi Forum
keine Ahnung ob ich meine Post richtig platziert habe.

Ich habe folgendes Problem

Ich würde gerne eine einfach xhtml + css seite auf den hero, algemein für die Mobiele-inet Ansicht anpassen.
dafür kann man ja einen neue css Datei machen, für welche man dann im head einen neuen Stylesheets Link macht.
Aber irgendwie schnallt der Hero das nicht. :(
So sieht mein link aus:

Code:

---

<link rel="stylesheet" type="text/css" href="css/mobil.css" media="handheld" />

---

sobald ich das media="handheld" lösche klaptzs wider. allerdings kann ich dann keine zweite css Datei für den pc machen, Weil der Hero dann soffort die css nimmt die er nicht soll.
Mir scheint als kommt der Hero Browser mit dem media="handheld" nicht klar.

Hat Jemand ne Ahnung wie ich das machen muss? Ich komme da irgendwie nicht weiter.

Danke

hi,

ich hab flott unter http://de.selfhtml.org/css/formate/e...htm#link_media nachgelesen. richtig gemacht hast es auf jeden fall.
das problem wird sein, dass unser browser das vielleicht nicht richtig blickt.

1) andere browser auf m handy probieren? (Steel und co) oder mal anderen handies? kannst ja mal die url hier posten wenns was öffentliches ist.
2) mach mal ein css mit "media=Screen" bzw "media=all"und drunter dann den link ohne media für den helden. der PC sollte screen nehmen, der held dann das andere
3) probiers mal mit dem @import
4) mal das "media=" weiter nach vorne. sollte eigentlich keinen unterschied machen... sollte ;-)
5) direkt im css unterschieden mit @media handheld{...} oder @media screen{...}
6) nen richtigen experten fragen ;-)

hi
jo genau von dem link habe ich das auch ;)

Zitat:

---

andere browser auf m handy probieren? (Steel und co) oder mal anderen handies? kannst ja mal die url hier posten wenns was öffentliches ist.

---

Ja mit Dolphin und Steel. Ergebnis das selbe. Nein leider ist es noch nichts öffentliches.

Zitat:

---

mach mal ein css mit "media=Screen" bzw "media=all"und drunter dann den link ohne media für den helden. der PC sollte screen nehmen, der held dann das andere

---

Das lustige ist, das der Hero dann zwar die Richtige css nimmt, der PC aber dann wieder die Falsche. Also nicht die mit "media=all" oder ""media=screen, sondern die gleiche wie der Hero.

Zitat:

---

probiers mal mit dem @import

---

sry muss ich mich ers mit beschäftigen (habe noch nicht so Ahnung. Learning by Doing ;)

Zitat:

---

mal das "media=" weiter nach vorne. sollte eigentlich keinen unterschied machen... sollte :wink:

---

"media=" hinder dem link , vor dem link platziert. Macht keinen Unterschied.

Zitat:

---

direkt im css unterschieden mit @media handheld{...} oder @media screen{...}

---

muss ich mich erst mit beschäftigen

Es gibt im Browser bei den Einstellungen eine Option "Mobile Ansicht", die man an und aus schalten kann. Ich kann es gerade nicht testen aber könnte es damit zusammen hängen, ob der das speziellen CSS beachtet oder nicht?

Habe die Mobile Ansicht ein und aus geschalten. macht keinen Unterschied.

Allerdings habe ich gerade bemerkt, das es egal ist ob ich ein "meida=" mache oder nicht. Er nimmt einfache den unteren der beinden Stylesheet links im head.

Werde es mal mit dem "import versuche, obwohl ich mir nich all zu viel verspreche. mal schaun.

Das muss doch klappen......:gruebel:

Ich würde bei den Tests auch zwischendurch immer alle Caches leeren. Nicht, dass er ein altes CSS verwendet. Das hilft oftmals auch beim Browser der PC wenn man mit CSS rumhantiert.

Jo alle Caches werden zwischendurch geleert.
Bringt auch nicht das Gewünschte Resultat.

bin echt am verzweifeln es will einfach nicht...
Ich hoffe ich werde da noch eine Lösung finden sonst wärs schon doof....

aber danke an für die Hielfe

Zitat:

---

Zitat von zidon

Allerdings habe ich gerade bemerkt, das es egal ist ob ich ein "meida=" mache oder nicht. Er nimmt einfache den unteren der beinden Stylesheet links im head.

---

Wenn das so ist, spricht vieles dafür, dass der Held die media-Angabe schlicht ignoriert. Es ist nämlich immer so, dass bei konkurrierenden CSS-Definitionen immer die im Quellcode letzte Definition "gewinnt".
Bedeutet: im ersten CSS steht "h1 {color: white;}" und im zweiten CSS steht "h1 {color: red;}"dann ist die Schrift rot.
Und wenn Du die CSSe in umgekehrter Reihenfolge einbindest ist der Text eben weiß.

Ach das ist ja voll Kacke!
Das heist das wird so nicht funzeln.... :(

Dann bleibt mir nur die möglichkeit die Seite 2 mal zu machen oder mich mit PHP auseinanderzusetzen und dort nach einer Möglichkeit zu suchen. Irgendwie muss das ja gehen. Ach da habe ich überhaupt kein bock zu.

vielen Dank für die Hilfe
Hoffentlich findet sich noch einen Lösung.. :D

gruss

so...ist ein bisschen ein Hack aber es funktioniert:

Deine HTML-Datei sieht so aus:

[FONT="Courier New"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Stylesheets f&uuml;r unterschiedliche Ausgabemedien</title>
<link rel="stylesheet" media="handheld" href="meinHeld.css">
<style type="text/css">
@import url(bildschirm.css);
/* evtl. seitenspezifische CSS-Definitionen */
</style>
</head>
<body>
<h1>Stylesheets f&uuml;r unterschiedliche Ausgabemedien</h1>
</body>
</html>[/FONT]

In "meinHeld.css" kommen alle CSS-Definitionen für den Helden bzw. für Mobile Endgeräte und in "bildschirm.css" alle CSS-Definitionen für die normalen Browser.

Normale Browser ignorieren die meinHeld.css und nehmen bildschirm.css

Der Held kapiert die media-Angabe nicht, nimmt das CSS aber trotzdem. Aber er kapiert das @import nicht und ignoriert es und verwendet nur die "meinHeld.css" (was er ja soll).

Nicht ganz. Ich verwende xhtml strict.
Aber ich werde das gleich mal testen
Danke

Zitat:

---

Zitat von zidon

Ich verwende xhtml strict.

---

Das ist egal, funktioniert trotzdem. (Hab den Quellcode oben entsprechend geändert)

war grade dabei es zu testen. aber habe jetzt besuch bekommen.
allerdings schnapt sicher der hero glaubs die @import css. melde mich wenn ich es testen konnte.
danke für deine mühe extra de code zu posten

ps. mus die css date bildschirm.css und meinHeld.css heisen. nicht oder? solte ja egal sein wie die heisen.

gruss

wie dei CSS heisst ist egal, du musst nur immer Groß-/Kleinschreibung beachten.
- - - - - -
Es hat mir jetzt doch keine Ruhe gelassen, also hab ich ein paar Test-Dateien gebastelt. Einfach die html-Seite öffen:
- auf dem PC ist der Hintergrund rot
- gedruckt ist der Hintergrund grün
- auf dem Hero ist der Hintergrund blau

hi
Vielen Dank das du dich so dammit beschäftigt hast. Ich denke ich weiss nun in welcher Richtung der Fehler zu suchen ist.

Wenn ich die html Datei die du mir gegeben hast auf die sdcard des Heros packe und dann im Browser aufrufe ist es ok und Blau. Wenn ich sie auf dem PC öffne ist sie Rot.
Wenn ich aber die html Date nun auf meinen Apache Server lade und sie aufrufe ist die Darstellung auf dem PC und auf dem Hero Rot. Den Drucker konnte ich nicht testen.

Wie hast du das ausprobiert? Hast du die html Datei auf die Hero sdcard gespeichert? oder via Server?

Gruss
----------------------------------------------

Hab noch a bissel rumgewerkelt und meine Start Seite umgebastelt.

Es funzelt tip top. So wie du es gemacht hast. So lange ich die Datei auf der Hero sdcard speichere.
Aber sobald ich es auf den Apache stelle macht er's wieder Falsch.

Muss wohl am Apache liegen...?

ich hatte es bisher nur von SD-Karte getestet und normal ist das auch egal, in dem Fall aber wohl so, dass der Hero sich für einen "screen" hält. Und über den Webserver funktioniert auch das @import.
Hast Du mal einen anderen Browser probiert?

-> mit dem Opera klappt es, liegt also am Helden

Ja ich habe den Standard, Steel und Dolphin Browser zum ausprobieren installiert. Leider ist das Ergebnis auf allen gleich.

Ich nehme mal an, das Rom und Kernel des Heros keine Rolle spielen? Hoffe ich jedenfalls

---------------
Der Hero scheint sich tazächlich für einen Screen zu halten. Wenn ich das @import weglasse, und dem stylesheet link media="screen" hinzufüge, nimmt der Hero die css ohne probs. Wenn ich nun aber das media="screen" durch media="handheld" ersetze zeigt der Hero die leere html ohne css an.

---------------

Da warst du wohl schneller :D

Keine Ahnung, vielleicht hilft es:

Der User Agent / Header vom Hero

<useragent

description="HTC Hero"

useragent="Mozilla/5.0 (Linux; U; Android 1.5; de-ch; HTC Hero Build/CUPCAKE) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1"

appcodename="Mozilla"
appname="Netscape"

appversion="5.0 (Linux; U; Android 1.5; de-ch; HTC Hero Build/CUPCAKE) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1"

platform=""

vendor="Apple Computer, Inc."

vendorsub=""

/>

Tarnt sich also irgenwie als iPhone.


User Agent Switcher für Firefox: https://addons.mozilla.org/en-US/firefox/addon/59
Hier meine XML mit verschiedenen Header zur Auswahl (Also eigentlich die Standard-Header des Addons plus die vom Hero): http://pubwww.hsz-t.ch/~lhitz/documents/temp/useragentswitcher.xml

Edit:
UND das iPhone hört (auch) nicht auf ' media="handheld" '

@skyzem: Ja, hab ich auch schon angeschaut. Irgendwie ist das ziemlich Kraut und Rüben was der Browser da meldet.

Unterm Strich ist es so, dass der Hero spezielle Styles für "handheld" ignoriert, vermutlich weil er (und das iPhone) ganz selbstbewusst sagt, so was brauch ich nicht weil ich ein richtiger Browser bin! ;-)

Was funktioniert ist, die "appversion" (siehe oben) per Javascript auf z.B. "Mobile Safari" oder "HTC Hero" zu untersuchen und dann das CSS entsprechend zu laden. Aber das geht auch nur MIT Javascript und ich würde es daher eher nicht machen.
Lieber das Design der Seite so machen, dass es auch mit Smartphones vernünftig bedienbar ist oder eben eine extra Mobil-Version.

hi

Also Opera funzt auf meinem Hero alles andere als gut. Resp. die Bedienung ist schon sehr mühsam.
Ich habe schon problehme eine normale I-Net Seite aufzurufen, da Opera oft den Abflug macht.
Meinen eigenen http Server findet er nicht. Error... warum auch immer.
Ich sehe nicht mal was ich in die Adressleiste schreibe, da diese verschwindet sobald die Tastatur ausklappt.
Aber ich mochte Opera e noch nie. Egal....

Ich werde es nun halt so machen das ich die Seite komplett für den Hero schreibe, und ebenfals für den PC. Wohl oder Übel.... :(

Wie machen es den eigentlich die Jungs hier im Forum? Das wird ja auf dem Mobiphon auch anders dargestellt. Ist ja die gleiche Adresse die ich eingebe wenn ich mit dem Natel auf pocketpc.ch gehe.

Gruss

@Opera: Find ich auch Schrott, habe ihn nur zum Testen installiert und schon wieder gelöscht.

@wie wird's gemacht: Du kannst auf dem Server erkennen (z.B. mit php), was für ein Browser da ankommt und baust dann einfach die Seite anders auf. Mit ein bisschen CSS-Optimierung ist das aber sicher nicht getan!

Ja das habe ich mir gedacht..... :)
Werde die Seite jetzt mal provisorisch so basteln wie ich's brauche. Wollte mich sowieso noch mit php beschäftigen. Habe mal etwas im Net gegoogelt und paar sachen gelesen die mich schon sehr interesieren.
Irgendwann werde ich's dann schon so hinbekommen wie ich's haben will... :D

Ich danke vielmals für die Hilfe.

Gruss