display:none funktioniert nicht im IE 7
Christian
- css
0 Gunnar Bittersmann0 Christian0 birdy
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
@@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
habe ich die Elementtypen nicht mit
iphone { display: none; }
computer { display: inline; }
in den CSS Dateien erstellt? oder muss ich das seperat machen?
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
Das ganze ist HIER zu finden.
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
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 ;-)