Christian: display:none funktioniert nicht im IE 7

Hallo Zusammen,
habe folgendes Problem. Ich habe ein iPhone und möchte das eine dementsprechend kleinere Version meiner Seite geladen wird wenn man sie mit dem iPhone besucht.
Meine Idee war nun einfach zwei CSS Dateien zu erstellen, eine für Computer und eine für das iPhone. In der HTML Datei wollte ich dann durch entsprechende Tags auf dem iPhone den Computerteil und auf dem Computer den iPhoneteil ausblenden durch display:none

Hier der Code:

iphone.css:

computer { display: none; }
iphone {display: inline; }

computer.css:

iphone { display: none; }
computer { display: inline; }

test.html:

<html>
<meta name="viewport" content="width=320" />
<head>
<title></title>
<link rel="stylesheet" href="computer.css" type="text/css">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css">
</head>
</head>
<body>
<computer>
 Computer
</computer>
<iphone>
 iPhone
</iphone>
</body>
</html>

Man soll also auf dem iphone nur das Wort "iphone" sehen und auf dem computer nur das Wort "Computer".
Auf dem iPhone, mit Firefox (Windows) und Safari (Mac) funktioniert, mit dem Internet Explorer sehe ich allerdings beides?!?

MFG
Christian

  1. @@Christian:

    Auf dem iPhone, mit Firefox (Windows) und Safari (Mac) funktioniert, mit dem Internet Explorer sehe ich allerdings beides?!?

    Was daran an deinem invalide Code liegt: Elementtypen 'iphone' und 'computer' gibt es nicht in HTML.

    Live long and prosper,
    Gunnar

    --
    Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
    1. habe ich die Elementtypen nicht mit

      iphone { display: none; }
      computer { display: inline; }

      in den CSS Dateien erstellt? oder muss ich das seperat machen?

      1. Hi,

        habe ich die Elementtypen nicht mit
        iphone { display: none; }
        computer { display: inline; }
        in den CSS Dateien erstellt?

        nein.

        oder muss ich das seperat machen?

        HTML enthält keine derartigen Elemente. Du kannst Dich auf den Kopf stellen, das wird auch nichts ändern. Solange Du HTML verschickst, ist Dein Code einfach unsinnig - und wird je nach Browser entsprechend behandelt.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
  2. Das ganze ist HIER zu finden.

    1. Hi,

      Das ganze ist HIER zu finden.

      Du bist aber sehr erfinderisch mit den Pseudo-HTML-Elementen... wofür sollte u1 stehen? ;-)

      freundliche Grüße
      Ingo

  3. so würde es wohl funktionieren:

    iphone.css:

    #computer { display: none; }  
    #iphone {display: inline; }  
    
    

    computer.css:

    #iphone { display: none; }  
    #computer { display: inline; }
    

    test.html:

    <html>  
    <meta name="viewport" content="width=320"> <!-- gehört das hierher? -->  
        <head>  
            <title></title>  
            <link rel="stylesheet" href="computer.css" type="text/css">  
            <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css">  
        </head>  
      
    <body>  
        <div id="computer">  
            Computer  
        </div>  
        <div id="iphone">  
            iPhone  
        </div>  
    </body>  
    </html>
    

    viel Spass mit dem iPhone ;-)