Verschwundene CSS Deklaration im IE

Chance · 29.11.2005, 14:39

Manchmal, aber nur manchmal ruft der IE ein Erstaunen in mir hervor...
... ein erstaunen, bei dem ich gleich Mulder und Scully rufen will... <img area="576"> .
... denn was er z.T. mach passt auf keine Kuhaut.

Ich habe es geschafft, das ein Design ohne Browserweiche auf allen Browser nahezu gleich aussieht... sogar im IE.
Hab es mal hier mit angehangen, allerdings habe ich, um zu viel Traffic zu vermeiden, es auf das wesentliche reduziert. Also nicht wundern...
Das Problem bzw. Phänomen sieht man immer noch.

Und zwar mit dem Internet Explorer ! (welchen Browser auch sonst <img area="576">)
Firefox und Opera zeigen es natürlich richtig an.

Es geht darum, das der Internet Explorer es trotz gleicher Deklaration und Verwendung bei der Menüklasse MenueRide anzeigt, und bei MenueMain
nicht.

HTML-Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>Styletester</title> 
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
 <META name="title" content="{Title}">
 <META name="keywords" content="{MetaKeywords}">
 <META name="description" content="{MetaDescription}">
 <META name="generator" content="CMS - System">
 <META http-equiv="content-language" content="de">
 <META name="robots" content="{MetaRobots}">
 <link rel=stylesheet type="text/css" media="screen" href="css_test.css">
 <style type="text/css"> <!--
 {AddCSS}
 --> </style>
 </head>
 <body>
 
 <div class="FrameDesign">
     <div class="FrameMain">
         <div class="BoxMain">
             <div class="BoxMainTitle"> Testtitel Mittlere Box </div>
             <div class="BoxMainCont">Testcontent Mittlere Box</div>
         </div>
         <div class="BoxMain">
             <div class="BoxMainTitle"> Testtitel Mittlere Box </div>
             <div class="BoxMainCont">
                 <div class="MenueRide">
                 <ul>
                 <li><a href="#" title=" Test "> Test 1 </a></li>
                 <li><a href="#" title=" Test " class="MenueRide Aktiv"> Test 2 </a>
                 <ul>
                 <li><a href="#" title=" Test "> Test 2a </a></li>
                 <li><a href="#" title=" Test "> Test 2b </a>
                 </li>
                 <li><a href="#" title=" Test "> Test 2c </a></li>
                 </ul>
                 </li>
                 <li><a href="#" title=" Test "> Test 3 </a></li>
                 </ul>
                 </div>
             </div>
         </div>
         <div class="BoxMain">
             <div class="BoxMainTitle"> Testtitel Mittlere Box </div>
             <div class="BoxMainCont">
                 <div class="MenueMain">
                 <ul>
                 <li><a href="#" title=" Test "> Test 4</a></li>
                 <li><a href="#" title=" Test " class="MenueMain Aktiv"> Test 5</a>
                 <ul>
                 <li><a href="#" title=" Test ">   Test 5a</a></li>
                 <li><a href="#" title=" Test ">   Test 5b</a></li>
                 <li><a href="#" title=" Test ">   Test 5c</a></li>
                 </ul>
                 </li>
                 <li><a href="#" title=" Test "> Test 6</a></li>
                 </ul>
                 </div>
             </div>
         </div>
         <div class="BoxMain">
             <div class="BoxMainTitle"> Testtitel Mittlere Box </div>
             <div class="BoxMainCont">
                 <table class="Table" cellspacing="0">
                 <tr>
                 <td valign="top" class="TableHeader"> TestTabelle: </td>
                 <td valign="top" class="TableHeader" > TestTabelle2: </td>
                 <tr>
                 <td valign="top" class="TableCont">Test 1</td>
                 <td valign="top" class="TableCont">Test 2</td>
                 </tr>
                 <tr>
                 <td valign="top" class="TableCont">Test 3</td>
                 <td valign="top" class="TableCont">Test 4</td>
                 </tr>
                 </table>
             </div>
         </div>
     </div>
 
 </div>
     
 </body>
 </html>

HTML-Code:

 html {
 font-size:69%;
 }
 
 body {
 margin: 0px auto;
 padding: 0px auto;
 text-align: center;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 1.0em;
 color: white;
 background-image:url("../templates/images/backg1.jpg");
 }
 
 table,form {
 width: 98%;
 font-size: 1.0em;
 margin: 0;
 padding: 0;
 }
 
 div {
 text-align:left;
 margin: 0;
 padding: 0;
 }
 
 h1,h2,h3,h4 {
 font-size: 1.0em;
 }
 
 a,a:link,a:visited {
 font-weight: bold;
 text-decoration: none;
 }
 
 a {
 color: white;
 }
 
 a:hover {
 color: gray;
 }
 
 a:active {
 color: silver;
 }
 
 .FrameDesign {
 width: 99%;
 text-align: center;
 margin: 0px auto;
 padding: 0px auto;
 }
 
 .FrameLeft,.FrameRight {
 width:20%;
 float:left;
 }
 
 .FrameMain {
 width:60%;
 float:left;
 }
 
 .FrameTop,.FrameBottom {
 width: 100%;
 clear: both;
 }
 
 .Box,.BoxMain,.BoxLeft,.BoxRight,.BoxTop,.BoxBottom  {
 color: black;
 width: 100%;
 }
 
 .BoxTitle,.BoxLeftTitle,.BoxRightTitle,.BoxMainTitle,.BoxTopTitle,.BoxBottomTitle {
 Background-color: green;
 color: white;
 text-align: center;
 font-size: 1.2em;
 Border-Color: gray;
 Border-Style: solid;
 Border-Width: 1px;
 
 }
 
 .BoxCont,.BoxLeftCont,.BoxRightCont,.BoxMainCont,.BoxTopCont,.BoxBottomCont {
 Background-color: green;
 Border-Color: gray;
 Border-Style: solid;
 Border-Width: 1px;
 color: white;
 
 }
 
 .MenueMain li,.MenueMain ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 
 .MenueMain a {
 color: white;
 display: block;
 width: 100%;
 font-size: 1.0em;
 border-Color: green;
 Border-Style: outset;
 Border-Width: 1px;
 Background-color: #009900;
 }
 
 .MenueMain a:hover {
 color: lime;
 font-style:italic;
 Border-Style: inset;
 }
 
 .MenueMain.Aktiv {
 Background-color: teal;
 }
 
 .MenueMain.Header {
 color: white;
 Background-color: black;
 }
 
 .MenueRide li,.MenueRide ul {
 display: inline;
 margin: 0px;
 padding: 0px;
 list-style-type: none;
 }
 
 .MenueRide a {
 color: white;
 font-size: 1.0em;
 border-Color: green;
 Border-Style: outset;
 Border-Width: 1px;
 }
 
 .MenueRide a:hover {
 font-style:italic;
 color: lime;
 Border-Style: inset;
 }
 
 .MenueRide.Aktiv {
 Background-color: teal;
 }
 
 .Table {
 }
 
 .TableHeader {
 background-image:url("../templates/images/grau4.jpg");
 Background-color: gray;
 color: black;
 Border-Color: white;
 Border-Style: outset;
 Border-Width: 1px;
 Border-Style: outset;
 background-repeat: repeat-x;
 }
 
 .TableCont {
 color: black;
 Background-color: silver;
 Border-Color: gray;
 Border-Style: outset;
 Border-Width: 1px;
 color: black;
 Background-color: silver;
 }
 
 .TableCont2 {
 color: black;
 Background-color: silver;
 Border-Color: gray;
 Border-Style: outset;
 Border-Width: 1px;
 color: black;
 Background-color: lightgrey;
 }
 
 .Button {
 color: black;
 font-size: 1.0em;
 Background-color: silver;
 Border-Color: gray;
 Border-Style: outset;
 Border-Width: 1px;
 }
 
 .Button:hover {
 font-size: 1.0em;
 color: white;
 Background-color: silver;
 Border-Color: gray;
 Border-Style: inset;
 Border-Width: 1px;
 }

Ben · 29.11.2005, 14:48

So ganz gleich sind die Deklarationen ja dann doch nicht, ne?

Code:

 .MenueMain li,.MenueMain ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }

 .MenueRide li,.MenueRide ul {
 display: inline;
 margin: 0px;
 padding: 0px;
 list-style-type: none;
 }

Hast du vielleicht mal einen Link, damit man sich das mal in Aktion ansehen kann?

Danke, Grüße Ben.

Chance · 29.11.2005, 21:28

Stimmt eigentlich... Aber trotzdem sollte das Problem nicht auftreten...

Der hier gepostete Quellcode reicht, um das Problem sichtbar zu machen.

29.11.2005, 14:48	Nach oben #2
Ben Benjamin Klaile Registriert seit: 02.12.2004 Ort: Remagen Beiträge: 4.480	So ganz gleich sind die Deklarationen ja dann doch nicht, ne? Code: .MenueMain li,.MenueMain ul { margin: 0; padding: 0; list-style-type: none; } .MenueRide li,.MenueRide ul { display: inline; margin: 0px; padding: 0px; list-style-type: none; } Hast du vielleicht mal einen Link, damit man sich das mal in Aktion ansehen kann? Danke, Grüße Ben. __________________ Mehr TuS Koblenz geht nicht ... - TuS Koblenz Forum Aktuell ... Kaiserslautern kommt in die Festung Oberwerth U14 erreicht Sieg im Testspiel gegen SF Troisdorf Testspiel gegen SV Wehen-Wiesbaden in Nassau E-Jugend Blitzturnier auf dem Oberwerth SV Ried gegen SK Rapid Wien

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bildwechsel mit CSS Problem	jjelliss	HTML, XML und CSS	19	17.09.2007 01:36
[CSS] Div + CSS + IE6 -> Problem	Binary	HTML, XML und CSS	5	14.02.2007 16:24
"12 lessons for those afraid of CSS and standards", Ben Henick	Ben	Literatur	0	11.01.2007 10:12
[Umfrage] Hover Effekt: CSS oder Javascript	DER_Brain	Plauderecke	27	12.09.2006 13:05
CSS Layout - Problem	Chr!s	HTML, XML und CSS	11	14.09.2005 16:54

29.11.2005, 21:28	Nach oben #3
Chance Neuer Benutzer Registriert seit: 20.10.2005 Ort: O.E. Beiträge: 2	Stimmt eigentlich... Aber trotzdem sollte das Problem nicht auftreten... Der hier gepostete Quellcode reicht, um das Problem sichtbar zu machen.

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen