nicht angemeldet
Unterschiedliche Anzeige CSS im IE/Firefox
MudGuardGuten Abend,
ich bin gerade dabei ein Layout für meine Homepage zu erstellen und habe eine HTML und eine CSS Datei erstellt.
Das Problem ist, dass das Layout beim Firefox 2 wunderbar angezeigt wird, so wie ich es haben will und beim IE7 ist alles verschoben.
HTML:
<html>
<head>
<title></title>
<meta name="author" content="Christian Böhm">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="page">
<div id="logo" >
###TOP_LOGO###
</div>
<div id="main_menu">
###MAIN_MENU###
</div>
<div id="navigation">
###NAVIGATION###
</div>
<div id="content">
###CONTENT###
</div>
<div id="sub_menu">
###SUB_MENU###
</div>
<div id="copyline">
###COPYLINE###
</div>
</div>
</body>
</html>
CSS:
div#Page{
text-align: left;
margin: 0 auto;
width: 1024px;
padding: 0em;
max-width: 1024;
background-color: rgb(300, 400, 500);
}
div#logo{
width: 1024px;
height: 100px;
background-color: rgb(100, 200, 200);
left: 10px;
}
div#main_menu{
width: 1024px;
height: 20px;
background-color: rgb(300, 324, 123);
left: 10px;
}
div#navigation{
width: 147px;
height: 60px;
background-color: rgb(109, 433, 383);
left: 10px;
float:left;
}
div#content{
width: 850px;
min-height: 480px;
background-color: rgb(200, 200, 200);
float:right;
}
div#sub_menu{
width: 147px;
height: 480px;
background-color: rgb(139, 200, 200);
left: 10px;
}
div#copyline{
width: 1023px;
height; 20px;
background-color: rgb(212, 420, 594);
left: 10px;
clear:both;
font-size: 0.9em;
margin: 0;
text-align: center;
background-color: #fed; border: 1px solid silver
}
Wie kann ich nun das Ergebnis erreichen, dass auch im IE das angezeigt wird, was im Firefox richtig angezeigt wird?
gruß
christian
P.S.: Ich habe schon gesehen dass das Thema hier öfter vorkam, aber keinen passenden Lösungsansatz gefunden...
-
Hallo Christian,
pack deine content-div´s in ein gesamt-div und verpasse diesem div
die clearfix-klasse von yaml, die du per ie-weiche einfügst:
++++
<!--[if lte IE 7]>
<link href="css/standard.css" rel="stylesheet" type="text/css" />
<![endif]-->
+++++Ich hatte erst vor kurzem genau die gleiche malaise
Grüße,
Claus-
Wie ist das Funktionsprinzip dieser Weiche? Dein Link zu Yaml ist leider fehlerhaft.
gruß
christian-
terribly sorry:
http://www.yaml.de/de/dokumentation/grundlagen/funktionsweise-von-floats.htmlDein
Du machst aus dem dort angegebenen css ein eigenes stylesheet und verlinkst es wie auf www.anja-gienger.de im Kwellcohd zu sehen.
grüße,
Claus-
Du machst aus dem dort angegebenen css ein eigenes stylesheet und verlinkst es wie auf www.anja-gienger.de im Kwellcohd zu sehen.
Ich kann es drehen und wenden,wie ich will. Es klappt einfach nicht und ich glaube das liegt eher an mir, da ich sicher irgendwas nicht richtig eingebaut hab.
Hier nochma die Codes zur Durchsicht:
HTML:
<html>
<head>
<title></title>
<meta name="author" content="Christian Böhm"><link rel="stylesheet" type="text/css" href="style.css">
<!--[if lte IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css">
<![endif]--></head>
<div id="page">
<div id="logo" >
###TOP_LOGO###
</div>
<div id="main_menu">
###MAIN_MENU###
</div>
<div id="navigation">
###NAVIGATION###
</div>
<div id="content">
###CONTENT###
</div><div id="sub_menu">
###SUB_MENU###
</div><div id="copyline">
###COPYLINE###
</div>
</div></body>
</html>CSS1:
div#page{
text-align: left;
margin: 0 auto;
width: 1024px;
padding: 0em;
max-width: 1024px;
background-color: rgb(255, 129, 123);
display:block;}
div#logo{
width: 1024px;
height: 100px;
background-color: rgb(100, 200, 200);
display:block;
}div#main_menu{
width: 1024px;
height: 20px;
background-color: rgb(100, 124, 123);
display:block;}
div#navigation{
width: 147px;
height: 60px;
background-color: rgb(109, 133, 183);
float:left;
display:block;}
div#content{
width: 850px;
min-height: 480px;
background-color: rgb(200, 200, 200);
display:block;
float:right;}
div#sub_menu{
width: 147px;
height: 480px;
background-color: rgb(139, 200, 200);
display:block;}
div#copyline{
width: 1023px;
height; 20px;
background-color: rgb(212, 120, 194);clear:both;
font-size: 0.9em;
margin: 0;
text-align: center;
background-color: #fed; border: 1px solid silver
display:block;
}CSS 2:
/*---------------------------------------------------------*/
/* Workaround: Clearfix-Anpassung für alle IE-Versionen */
/*
** IE7 - x
*/
.clearfix { display: inline-block; }
/*
** IE5.x/Win - x
** IE6 - x
*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*--------------------------------------------------------*/Viele Grüße
Christian
-
Huhu,
wenn du im HTML-Code keine class .clearfix angibst, dann kann der IE-Workaround nicht greifen. Auch ich habe in YAML staundend erfahren, dass man einem div eine id und gleichzeitig eine class geben kann.
entweder also so:<div id="page" class="clearfix">
<div id="logo" >
###TOP_LOGO###
</div>
<div id="main_menu">
###MAIN_MENU###
</div>
<div id="navigation">
###NAVIGATION###
</div>
<div id="content">
###CONTENT###
</div><div id="sub_menu">
###SUB_MENU###
</div><div id="copyline">
###COPYLINE###
</div>
</div>oder - so habe ich das gemacht - mit einem neuen "umfassungs-div", dem du (neben der ie-hack-angabe) auch margin und padding 0 spendierst:
<div id="page" >
<div id="logo" >
###TOP_LOGO###
</div>
<div id="main_menu">
###MAIN_MENU###
</div><div class="clearfix">
<div id="navigation">
###NAVIGATION###
</div>
<div id="content">
###CONTENT###
</div></div>
<div id="sub_menu">
###SUB_MENU###
</div><div id="copyline">
###COPYLINE###
</div>
</div>funz jezz? Hope so,
Claus
-
-
-
-
-
Hi,
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
Ich dachte, Du willst mit CSS arbeiten ...
<div id="page">
Soll dieses div
div#Page{
von diesem Selektor selektiert werden?
max-width: 1024;
ungültiger Wert. Der Browser kann nicht wissen, ob Du Ameisenbeindurchmesser oder Elefantenrüssellängen als Maßeinheit benutzen willst.
background-color: rgb(300, 400, 500);
Ungültiger Wert. 255 ist das Maximum.
background-color: rgb(300, 324, 123);
s.o.
div#logo{
[...]
left: 10px;Überflüssig, da das Element nicht positioniert wird.
background-color: rgb(109, 433, 383);
s.o.
left: 10px;
s.o.
left: 10px;
s.o.
left: 10px;
s.o.
Wie kann ich nun das Ergebnis erreichen, dass auch im IE das angezeigt wird, was im Firefox richtig angezeigt wird?
Erst mal die Fehler korrigieren.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi,
<div id="page">
Soll dieses div
div#Page{
von diesem Selektor selektiert werden?Da ist was verlorengegangen:
Ich trau es dem IE glatt zu, daß der das tatsächlich macht, obwohl er das nicht darf.
id="page" ist etwas komplett anderes als id="Page", und div#page etwas komplett anderes als div#Page.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Chapeau!
Ich habe im geposteten Code nur die paar divs gesehen und daran, dass ich vorgestern auch eine gute Stunde an dem FF-IE-Schei... gesessen bin.
Aber der Fachmann entdeckt sofort mal ein dutzend "das-kann-doch-nicht-css-sein". Wie gesagt: Hut ab!
Grüße,
Claus
-
-