4. Darstellungsproblem mit CSS und dem IE

Darstellungsproblem mit CSS und dem IE

  • T

    So, nun steht schon mal die große Textbox neben der Menüleiste. Einziges Manko ist nun noch, dass das Menü ein wenig vertikal verschoben wird. Das Problem tritt wieder nur beim IE auf.

    0
  • C

    Tiffyrules schrieb:

    Einziges Manko ist nun noch, dass das Menü ein wenig vertikal verschoben wird. Das Problem tritt wieder nur beim IE auf.

    Blind geraten: Könnte das mit der Fehlinterpretation des Boxmodells durch den IE zusammenhängen?

    0
  • T

    Danke für den Link! Ich glaube du hast den berühmten Nagel auf den Kopf getroffen. Zumindest werden im Text einige Sachen aufgeführt, die mir aus meinem Quelltext sehr bekannt vorkommen. Ich meine da z.B. Zeile 13, da sie ja nicht wie im Link beschrieben in einem Div-tag liegt. Überlge nun, ob ich eine Seite für den IE und eine für FF erstelle oder ich muss nach einer anderen Lösung suchen.

    So, habe evtl eine bessere Lösung als zwei Websites gefunden. Was haltet ihr von

    <!--[if IE 5]>
 <style type="text/css"> 
  Stylesheets für den IE 5
 </style>
<![endif]-->

    Stammt von css4you.

    Nach kurzem Testen habe ich fogenden Text

    ul#Navigation {
    font-size: 0.91em;
    float: left; 
	width: 11.7em;
    margin: 0.15em; 
	padding: 0;
	margin-top: 1em;
	<!--[if IE 5]>
    margin-top: 0.5em;
    <![endif]-->

    FF ignoriert diese Angabe wunderbar wie es sein soll, aber der IE zickt rum und schließt sich FF an.

    0
  • C

    Diese Browserweiche ist wohl noch besser, als wenn du deine Datei doppelt anlegst (wenn du es für mehrere Dateien brauchst, solltest du die IE-Styles auslagern und im Conditional Comment nur noch ein <link> dorthin setzen).

    0
  • T

    Ich glaube ich steh leider auf'm Schlau, sorry. Ich habe jetzt eine CSS-Datei angelegt (ie.css), ist die angepasste IE-Version. In meiner HTML-Datei steht jetzt der "normale" Code für FF etc, sprich CSS+HTML. Muss ich jetzt

    <!--[if lt IE 5]>
 <link rel="Stylesheet" href="ie.css" type="text/css" />
<![endif]-->

    einfach irgendwo in den <style>...</style>-Teil einfügen oder gibt es noch etwas zu beachten?

    0
  • C

    Am besten setzt du es in den Head-Bereich unterhalb der "normalen" CSS-Definitionen:

    <html>
<head>
...
<link rel=Stylesheet" href="normal.css" type="text/css />

<!--[if lt IE 5]>
 <link rel="Stylesheet" href="ie.css" type="text/css" />
<![endif]--> 
...
</head>
<body>
...
    0
  • T

    Ok, danke Dir. Ich versuch es gleich mal.

    Habe jetzt alle CSS-Zeilen in zwei außenstehende Dateien kopiert (eine für den IE und eine für den "normalen" Betrieb) und so wie du es geschrieben hast eingebunden. Leider passt nun vorne und hinten gar nix mehr. Soll ich nochmal meinen HTML-Code und meine CSS-Zeilen posten?

    0
  • F

    Falls du den Code von CStoll kopiert hast: Dort ist beim ersten <link rel= das anschließende " verloren gegangen.
    Falls es das nicht ist, kannst du ja nochmal deinen Code posten...

    0
  • T

    Also die " habe ich eingefügt, hat aber leider nicht geholfen.

    So, hier nun nochmal alles aktuelle (Sind beide Varianten):

    <!--HTML-Datei mit CSS"normal"-->
<html>
<head>
<title>Meine Seite</title>

<style type="text/css">
  body{
	color: #000000;
	background-color: #F4F4F4;
	font-size: 14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0.5em; padding: 1em 0;
  }

  div#Seite {
    text-align: left;   
	margin: 0;   
    width: 950px;
    padding: 0.5em;
  }
  html>body div#Seite {
    border-color: #000000;  
  }

  ul#Navigation {
    font-size: 0.91em;
    float: left; 
	width: 11.7em;
    margin: 0.15em; 
	padding: 0;
	margin-top: 1em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.1em;   
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em 0.2em;
    font-weight: bold;
	text-decoration: none;
	text-align: center;
	border: 1px solid #D1D1D3;
  }
  ul#Navigation a:link {
    color: #D1D1D3; background-color: #405F7B;
  }
  ul#Navigation a:visited {
    color: #D1D1D3; background-color: #405F7B;
  }
  ul#Navigation a:hover {
    color: #D1D1D3; background-color: #5A80BC;
  }
  ul#Navigation a:active {
    color: #D1D1D3; background-color: #405F7B;
  }

 div#Inhalt {
	margin-top: 0.5em;
	margin-left: 12em;
    padding: 0 1em;
    border: 1px solid #D1D1D3;
	width: 54em;
	color:#000000; background-color: #FFFF93;
	margin-top: 1em;
  }
  div#Inhalt h1 {
    font-size: 1em;
    margin: 0 0 1em;
  }
  div#Inhalt p {
    font-size:1em;
    margin: 1em 0;
  }	 

</style>

</head>

<body>
<p>	 
&nbsp;
<img src="topbg01.PNG" width="212" height="104">
<img src="topbg02.PNG" width="212" height="104">
<img src="topbg03.PNG" width="212" height="104">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="logo.PNG" width="212" height="104"></p>

<div id="Seite">
  <ul id="Navigation">
    <li><a href="link1.html">Link1</a></li>
    <li><a href="link2.html">Link2</a></li>
  </ul>

  <div id="Inhalt">
    <h1 align="left">TEXT!</h1>
    <p align="left">TEXT2</p>
  </div>
</div>

</body>
</html>

    <!--HTML-Datei mit beiden eingefügten CSS-Dateien-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Meine Seite</title>

<link rel="stylesheet" href="main.css" type="text/css">

<!--[if gte IE 5]>
 <link rel="stylesheet" href="ie.css" type="text/css">
<![endif]--> 

</head>

<body>
<p>	 
&nbsp;
<img src="topbg01.PNG" width="212" height="104">
<img src="topbg02.PNG" width="212" height="104">
<img src="topbg03.PNG" width="212" height="104">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="logo.PNG" width="212" height="104"></p>

<div id="Seite">
  <ul id="Navigation">
    <li><a href="link1.html">Link1</a></li>
    <li><a href="link2.html">Link2</a></li>
  </ul>

  <div id="Inhalt">
    <h1 align="left">TEXT!</h1>
    <p align="left">TEXT2</p>
  </div>
</div>

</body>
</html>

    /*CSS normal*/
<style type="text/css">
  body{
	color: #000000;
	background-color: #F4F4F4;
	font-size: 14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0.5em; padding: 1em 0;
  }

  div#Seite {
    text-align: left;   
	margin: 0;   
    width: 760px;
    padding: 0.5em;
  }
  html>body div#Seite {
    border-color: #000000;  
  }

  ul#Navigation {
    font-size: 0.91em;
    float: left; 
	width: 11.7em;
    margin: 0.15em; 
	padding: 0;
	margin-top: 1em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.1em;   
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em 0.2em;
    font-weight: bold;
	text-decoration: none;
	text-align: center;
	border: 1px solid #D1D1D3;
  }
  ul#Navigation a:link {
    color: #D1D1D3; background-color: #405F7B;
  }
  ul#Navigation a:visited {
    color: #D1D1D3; background-color: #405F7B;
  }
  ul#Navigation a:hover {
    color: #D1D1D3; background-color: #5A80BC;
  }
  ul#Navigation a:active {
    color: #D1D1D3; background-color: #405F7B;
  }

 div#Inhalt {
	margin-top: 0.5em;
	margin-left: 12em;
    padding: 0 1em;
    border: 1px solid #D1D1D3;
	width: 54em;
	color:#000000; background-color: #FFFF93;
	margin-top: 1em;
  }
  div#Inhalt h1 {
    font-size: 1em;
    margin: 0 0 1em;
  }
  div#Inhalt h2 {
    font-size: 1em;
    margin: 0 0 1em;
	text-decoration: none;
  }
  div#Inhalt p {
    font-size:1em;
    margin: 1em 0;
  }	 	 
</style>

    /*CSS IE, poste nur den unterschiedlichen Teil*/
ul#Navigation {
    font-size: 0.91em;
    float: left; 
	width: 11.7em;
    margin: 0.15em; 
	padding: 0;
	margin-top: 1em;
	margin-top: 0.5em;     /*<------*/
    0
  • F

    In eine css-Datei gehören keine <style>-Tag mehr hinein...

    0
  • T

    Oh, gut das wusste ich nicht. Ich teste es gleich mal!

    Super, es hat geklappt. Ich bedanke mich sehr herzlich für Eure Zeit und Hilfe! 🙂

    0
Anmelden zum Antworten