# Gestrichelte CSS Linie im IE nicht vorhanden/durchgängig



## Dranoel (23. Oktober 2006)

Hallo zusammen! Ich hab da ein kleines Problem, bei dem ich allein leider nicht weiterkomme. Ich hab ne Seite bei der "dashed lines" angewendet werden. Im Mozilla laufen die wunderbar, nur im IE wollen sie einfach nicht "dashed" sein. Sie sehen aus wie durchgezogen bzw nicht vorhanden.

Ich häng euch mal ein Bilder dran, damit ihr seht was gemeint ist:
http://chaos-gate.is-a-geek.net/pics/index.php?b=17&c=unsortiert
Dort wo die Pfeile hinzeigen sollen die gestrichelten Lines sein.
Danke für alle Tipps die ihr mir geben könnt.


----------



## Maik (23. Oktober 2006)

Wie sieht denn der dazugehörige Quellcode (HTML + CSS) aus?


----------



## Dranoel (23. Oktober 2006)

Hab mir denken können dass jemand das fragt. Der Quellcode is ziemlich viel.
Es ist für Typo3 geschrieben. Also bitte nicht wundern wenn da einige "Gebilde" drin sind. Ich kann den Fehler leider nicht finden.
Das ganze durch nen Validator zu schicken hilft mir denk ich auch nicht sonderlich weiter. Diesen Denkansatz hatte ich schon.
Die Klasse für die obere Linie heisst #headergrey2, die für die untere heisst #header.
Hier das CSS:


```
BODY {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-color: #333333; 
background-color: #5A5A5A;
}

Dient dazu den Fliesstext und die Quotation zu formatieren */ 
p, em { 
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
}

table{
margin-left:auto;
margin-right:auto;
}

/* die Farbe der Quotation wird auf grün und fett angepasst */
em {    
        font-family: Verdana, Arial, Helvetica, sans-serif;
	color: ##2E6F9E;
	font-weight: bold;
}
/* hier werden die Textheader 1-6 formatiert; in diesem Fall alle gleich */
h1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 25px;
	font-style: italic;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #BBBBBB;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	letter-spacing: 1px;
	vertical-align: bottom;
	padding-top: 5px;
	padding-bottom: 3px;
}

h2, csc-header csc-header-n1, h2 a,h2 a:visited,h2 a:link {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	font-style: italic;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #BBBBBB;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	letter-spacing: 1px;
	vertical-align: bottom;
	padding-top: 5px;
	padding-bottom: 3px;
}
h3, h4, h5, h6, csc-header csc-header-n1, h3 a,h3 a:visited,h3 a:link, h4 a,h4 a:visited,h4 a:link, h5 a,h5 a:visited,h5 a:link {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #BBBBBB;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	letter-spacing: 1px;
	vertical-align: bottom;
	padding-top: 5px;
	padding-bottom: 3px;
}
h1 a,h1 a:visited,h1 a:link {
font-family: "Times New Roman", Times, serif;
	font-size: 25px;
	font-style: italic;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #BBBBBB;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	letter-spacing: 1px;
	vertical-align: bottom;
	padding-top: 5px;
	padding-bottom: 3px;
}

h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover {
color: #2E6F9E;
}
/* Browserweiche IE 5/6 für Überschriften */
* html h1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 25px;
	font-style: italic;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #BBBBBB;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	letter-spacing: 1px;
	vertical-align: bottom;
	padding-top: 10px;
	padding-bottom: 3px;
}
* html h2, csc-header, csc-header-n1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	font-style: italic;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #BBBBBB;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	letter-spacing: 1px;
	vertical-align: bottom;
	padding-top: 10px;
	padding-bottom: 3px;
}
* html h3, h4, h5, h6, csc-header csc-header-n1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #BBBBBB;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	letter-spacing: 1px;
	vertical-align: bottom;
	padding-top: 10px;
	padding-bottom: 3px;
	}
/* Browserweiche Überschriften Ende */

/* Klasse zum formatieren der Seite */
.header {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	background-color: #2E6F9E;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	border-bottom-color: #FFFFFF;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}
.footer{ 
        font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	background-color: #2E6F9E;
	color: #FFFFFF;
	padding-top: 5px;
}
/* die Linkeigenschaften für die Klasse Footer werden definiert */
.footer a, .footer a:visited,.footer a:link { 
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #AAAAAA;
text-decoration: none;
}

.footer a:hover { 
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff; text-decoration: none;
}

/* Klasse zum formatieren der Seite */
.headergrey {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	background-color: #999999;
	color: #FFFFFF;
}
.headergrey2 {
        font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
        color: #ffffff;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	background-color: #999999;
       border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #FFFFFF;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
      

}
/* Klasse zum formatieren der Seite */
.unten {
        font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	border-top-style: solid;
	text-align: right;
	background-color: #99CC00;
}

/* die Linkeigenschaften für die Klasse unten werden definiert */
.unten a, .unten a:visited,.unten a:link { 
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
}
.unten a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif; 
color: #666666; text-decoration: none;
}
/* Klasse zum formatieren der Seite */
.login {
font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 128px;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
}

/* Klasse zum formatieren der Seite */
.textrechts {
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
	text-align: right;
}
/* Klasse zum formatieren der News */
.news {
        font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
	text-align: left;
	vertical-align: top;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}
/* Klasse zum formatieren des Menu-Active Zustandes */
.menueact {
        font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #646464;
	background-color: #D2D2D2;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-right-color: #2E6F9E;
	border-bottom-color: #999999;
	padding-right: 10px;
	border-bottom-style: dashed;
}
/* Klasse zum formatieren des Menu-Normal Zustandes */
.menueno {
        font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #999999;
	background-color: #E6E6E6;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	padding-right: 10px;
	border-bottom-style: dashed;
}
/* Klasse zum formatieren der Subnavigation */
/* Browserweiche für den IE 5 & 6 */
* html #subnavi {
	width:170px; /* IE5 */
        w/idth: 170px; /* IE6 */
}
* html #subnavi a {       
        font-family: Verdana, Arial, Helvetica, sans-serif;
        display: block;
        list-style-type: none;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #999999;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
	background-color: #F5F5F5;
	text-decoration: none;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 45px;
        padding-right:-30px;
}
/* Browserweiche ende */
/* Standarddarstellung für FF & Opera */
#subnavi {
	width: 168px;
}
/* Klasse zum formatieren der Submenu Linkeigenschaften */
#subnavi a {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        display: block;
        list-style-type: none;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	border-top-color: #999999;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
	background-color: #F5F5F5;
	text-decoration: none;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 45px;
        padding-right:-30px;
}

#subnavi a:link, #subnavi a:visited
{
	color: #666666;
	text-decoration: none;
}

#subnavi a:hover
{
	background-color: #ffffff;
	color: #2E6F9E;
        text-decoration: none;
}

#subnavi a#current{
        font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: dashed;
	color: #2E6F9E;
	border-top-color: #2E6F9E;
	border-right-color: #2E6F9E;
	border-bottom-color: #2E6F9E;
	border-left-color: #2E6F9E;
	background-color: #FFFFFF;
	text-decoration: none;
}

/* Klasse zum formatieren der Seite. Unnötig und sinnlos aber was nimmt man seinem Designer so alles ab. *lol* */
.aktiv {
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	text-align: right;
	vertical-align: top;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-top-color: #2E6F9E;
	border-right-color: #2E6F9E0;
	border-bottom-color: #2E6F9E;
	border-left-color: #2E6F9E;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	padding-right: 10px;
}
/* genau das gleiche wie bei aktiv */
.inaktiv {
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	text-align: right;
	vertical-align: top;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	padding-right: 10px;
}

/* Klassen zum formatieren der Seite. In diesem Fall folgen hier Typo-spezifische Klassen */
.tx-indexedsearch, tx-indexedsearch-descr, tx-indexedsearch-searchbox-sword {
font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 100%;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
	background-color: #FFFFFF;
}

/* Farbe und Formatierung des Suchwortes auf der Ergebnisseite von tx indexed search */
.csc-sword, tx-indexedsearch-redMarkup {
font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #99cc00;
}
/* die Register Formular Tabelle wird formatiert */
.register_form_table {
font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 8pt;
}
/* Formatierung der Reg Form */
.register_form {
font-family: Verdana, Arial, Helvetica, sans-serif;
	border: 1px solid #d4d4d4;
	background: #f0f0f0;
}

/* Formatierung der Login Form */
.csc-login-labelcell, .csc-login-fieldcell, .csc-login-commentcell, .csc-language-fieldcell, csc-loginform {
font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 128px;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
}
/* Formatierung der Login Form */
.csc-login-label-req {
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #333333;
	text-align: left;
	valign: left;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
}
/* Formatierung der Login Form */
.csc-login-fieldcell submit {
font-family: Verdana, Arial, Helvetica, sans-serif;
       	width: 20px;
        height: 15px;;
}
/* Formatierung des Formular Labels */
.csc-form-label {
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
	align: right;
	}
	/* Formatierung der Mail Form */
.csc-mailform {
font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color:#ffffff;
	border: 1px solid #999999;
	font-size: 9px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
}
/* Formatierung der Mail Form */
.csc-mailform-field {
font-family: Verdana, Arial, Helvetica, sans-serif;
	display: block;
	margin: 10px;
	padding: 10px;
}
/* Formatierung der Mail Form */
.csc-mailform-name {
font-family: Verdana, Arial, Helvetica, sans-serif;
	display: block;
	margin: 10px;
	padding: 10px;
}
/* Formatierung des Mail Form & Forum Labels */
.csc-mailform label, .csc-mailform-forum label{
font-family: Verdana, Arial, Helvetica, sans-serif;
	display: block;
	width: 120px;
	float: left;
	text-align: right;
	margin: 2px 5px;
	padding:0;
}

/* Formatierung der Mail Form */
.csc-mailform input, .csc-mailform textarea, .csc-mailform-forum input, .csc-mailform-forum textarea, #mailformTech-Support, #mailformAnfragenbetreff {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
	background-color:white;
	border: 1px solid #666666;
	width: 200px;
	padding: 2px 6px;
	font-size: 8pt;
}
/* Formatierung der Mail Form */
.csc-mailform input.csc-mailform-submit{
font-family: Verdana, Arial, Helvetica, sans-serif;
	float: right;
	width: 80px;
	cursor:hand;
}
/* Formatierung der Mail Form */
.csc-mailform form input.csc-mailform-submit:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color:#ff9900;
	border: 1px solid white;
	color: white;
}

/* Formatierung der Upload Funktion */
table.csc-uploads {
font-family: Verdana, Arial, Helvetica, sans-serif;
	border-spacing: 0;
	font-size: 10px;
	border: 1px solid #333333;
}
/* Formatierung der Upload Funktion */
table.csc-uploads td {
font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 3px 10px 3px 10px;
}
/* Formatierung der Upload Funktion */
table.csc-uploads p {
font-family: Verdana, Arial, Helvetica, sans-serif;
	margin:0;
	padding-left:50px;
        padding-right:50px;
}
/* Formatierung der Upload Funktion */
table .csc-uploads tr.tr-even {
font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #ffffff;
}
/* Formatierung der Punktliste, sowie von unordered List und List */
ul, li, .csc-bulletlist{
font-family: Verdana, Arial, Helvetica, sans-serif;
/* 	list-style-image: url(./listen_punkt.gif); */
        font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
}
/* Formatierung der Contenttable */
table .contenttable {
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	border: 1px solid #FF9900;
}
/* Formatierung der Contenttable 
table .contenttable td{
font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 5px;}*/
  
/* Formatierung der Contenttable */
table .contenttable .tr-0 {
font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #FF9900;
}
/* Formatierung der Bildunteschrift */
DIV.csc-textpic-imagewrap,.csc-textpic-caption,.csc-textpic-image{
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666666;
    background-color: #ffffff;
	}
/* Formatierung der Bildborder */
DIV.csc-textpic-border { 
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #333333;
}

.tr-even tr-0, .td-0, .td-1, .td-2, .td-last  {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #666666;
text-align: center;
padding: 0 10 0 10;
border: 0;
}

.tr-odd tr-0, .td-0, .td-1, .td-2, .td-last {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #666666;
background-color: #cccccc;
text-align: center;
border: 0;
}

.contenttable contenttable-1 lizenz1 {
border: 0;
}
```

Hier das HTML:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Navimatix</title>
<!-- ###DOKUMENT### -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a, a:link, a:active, a:visited { font-size: 10px; color: #999999; text-decoration: none }
a:hover  { color: #2E6F9E; text-decoration: none }
</style>
</head>
<body leftmargin="0" topmargin="0" alink="#333333" bgcolor="#5a5a5a" link="#333333" marginheight="0" marginwidth="0" text="#333333" vlink="#333333">
<!-- ###SUCHE### start -->
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" height="100%" width="873">
  <tbody>
    <tr> 
      <td bgcolor="#5a5a5a" height="38" width="1">&nbsp;</td>
      <td height="38" width="681"><img src="fileadmin/templates/img/more1.gif" height="30" width="200"></td>
      <td height="38" colspan="2" bgcolor="#cccccc" class="headergrey">
        <div align="right"><span class="textrechts"><font color="#ffffff"><strong>Quicksearch</strong></font></span><strong><font color="#ffffff"><span class="textrechts"> 
          </span></font></strong><font color="#99cc00"><span class="textrechts"> 
          <input name="user2" class="login" id="user26" value="zoomatra" type="text">
          </span></font><strong>GO</strong></div>
	  </td>
   
      <td class="headergrey" bgcolor="#cccccc" height="38" width="20">&nbsp;</td>
    </tr>
          <!-- ###SUCHE### stop -->
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" height="100%" width="873">
  <tbody>
    <tr> 
      <td bgcolor="#5a5a5a" height="100" width="4">&nbsp;</td>
      <td height="100" colspan="2" class="header"><img src="fileadmin/templates/touchkeyboard/img/back.gif" alt="Banner" width="600" height="100"></td>
      <td height="100" colspan="2" valign="bottom" class="header"><div align="right"><a href="index.php?id=1" target="_self"><img src="fileadmin/templates/touchkeyboard/img/weblogo.gif" alt="home" border="0" height="65" width="160"></a></div></td>
      <td class="header" height="100" width="21">&nbsp;</td>
    </tr>
    <tr valign="top"> 
      <td bgcolor="#5a5a5a" width="4">&nbsp;</td>
      <td colspan="4"> <table border="0" cellpadding="0" cellspacing="0" height="170" width="850">
          <tr> 
            <td height="120"> <div align="right"><img src="fileadmin/templates/touchkeyboard/img/01.jpg" alt="Start" width="150" height="81"></div>
              <div align="right">###menu1###</div></td>
            <td height="120"> <div align="right"><img src="fileadmin/templates/touchkeyboard/img/02.jpg" alt="Produktausf&uuml;hrungen" width="150" height="81"></div>
              <div align="right">###menu2###</div></td>
            <td height="120"> <div align="right"><img src="fileadmin/templates/touchkeyboard/img/03.jpg" alt="Installation" width="150" height="81"></div>
              <div align="right">###menu3###</div></td>
            <td height="120"> <div align="right"><img src="fileadmin/templates/touchkeyboard/img/04.jpg" alt="Download" width="150" height="81"></div>
              <div align="right">###menu4###</div></td>
            <td height="120"> <div align="right"><img src="fileadmin/templates/touchkeyboard/img/05.jpg" alt="Referenzen" width="150" height="81"></div>
              <div align="right">###menu5###</div></td>
          </tr>
          <tbody>
            <tr> 
              <td width="170" height="50" align="right" class="menueact">###subtitle1###</td>
              <td width="170" height="50" align="right" class="menueno">###subtitle2###</td>
              <td width="170" height="50" align="right" class="menueno">###subtitle3###</td>
              <td width="170" height="50" align="right" class="menueno">###subtitle4###</td>
              <td width="170" height="50" align="right" class="menueno">###subtitle5###</td>
            </tr>
          </tbody>
        </table>
        <table border="0" cellpadding="0" cellspacing="0" height="400" width="851">
          <tbody>
            <tr align="right"> 
              <td height="400" valign="top" width="170"> <table border="0" cellpadding="0" cellspacing="0" width="170">
                  <tbody>
                    <tr> 
                      <td width="140" colspan="2"> 
                        <!-- ###SUBMENU### start -->
                        <div id="subnavi"> 
                          <ul>
                            <li class="submenueact"><a href="#">+Link</a></li>
                            <li class="submenueact"><a href="#">+Link</a></li>
                            <li class="submenueact"><a href="#">+Link</a></li>
                            <li class="submenueact"><a href="#">+Link</a></li>
                          </ul>
                        </div>
                        <!-- ###SUBMENU### stop -->                      </td>
                    </tr>
                  </tbody>
                </table></td>
              <td align="left" height="400" valign="top" width="510"> <table border="0" cellpadding="0" cellspacing="0" width="510">
                  <tbody>
                    <tr> 
                      <td width="20">&nbsp;</td>
                      <td width="480" class="text">###content###</td>
                      <td width="20">&nbsp;</td>
                    </tr>
                  </tbody>
                </table></td>
              <td height="400" valign="top" width="100"> <table bgcolor="#c3c3c3" border="0" cellpadding="0" cellspacing="0" height="50" width="150">
                  <tbody>
                    <tr> 
                      <td class="header" height="25" width="15">&nbsp; </td>
                      <td class="header" height="25" width="120">User Login:</td>
                      <td class="header" height="25" width="15">&nbsp; </td>
                    </tr>
                    <tr> 
                      <td height="0" colspan="2" valign="bottom"><span class="text"> 
                        <!-- ###LOGIN### start -->
                        <table border="0" align="right" cellpadding="1" cellspacing="1" class="csc-loginform">
                          <tbody>
                            <tr> 
                              <td valign="right" class="login"> <input name="user" size="20" value="Username" type="text" />                              </td>
                            </tr>
                            <tr> 
                              <td>&nbsp;</td>
                            </tr>
                            <tr> 
                              <td align="right"><input name="pass" size="20" value="password" type="password" /></td>
                            </tr>
                            <tr> 
                              <td align="right" class="login" valign="right"><p class="csc-form-label"></p></td>
                            </tr>
                            <tr> 
                              <td align="right"><input name="submit2" value="Login" type="submit" /></td>
                            </tr>
                          </tbody>
                        </table>
                        <!-- ###LOGIN### stop -->                      </td>
                      <td height="25" width="15">&nbsp; </td>
                    </tr>
                  </tbody>
                </table>
                <table bgcolor="#ebebeb" border="0" cellpadding="0" cellspacing="0" height="69" width="150">
                  <tbody>
                    <tr> 
                      <td class="headergrey" height="25" width="15">&nbsp; </td>
                      <td class="headergrey" height="25" width="120">###KONTAKT_HEADER###</td>
                      <td class="headergrey" height="25" width="15">&nbsp; </td>
                    </tr>
                    <tr> 
                      <!-- ###NEWS### stop -->
                      <td height="19" class="news">&nbsp;</td>
                      <td height="19" class="news">###KONTAKT###</td>
                      <!-- ###NEWS### stop -->					  
                    </tr>
			<tr> 
                      <td height="25" width="15">&nbsp; </td>
                      <td height="25" width="120"> <p align="right"><strong><a href="index.php?id=52">Form 
                      &gt;</a><a href="index.php?id=37"></a></strong></p></td>
                      <td height="25" width="15">&nbsp; </td>
                    </tr>
                  </tbody>
              </table>                </td>
            </tr>
            <tr align="right"> 
              <td height="30">&nbsp;</td>
              <td align="left" height="30">&nbsp;</td>
              <td height="30">&nbsp;</td>
            </tr>
          </tbody>
        </table></td>
      <td width="21"> <table border="0" cellpadding="0" cellspacing="0" height="170" width="20">
          <tbody>
            <tr> 
              <td height="120">&nbsp;</td>
            </tr>
            <tr> 
              <td class="inaktiv" bgcolor="#e6e6e6" height="50">&nbsp;</td>
            </tr>
          </tbody>
      </table></td>
    </tr>
    <tr> 
      <td width="4" height="30" rowspan="2" bgcolor="#5a5a5a">&nbsp;</td>
      <td height="15" width="173" class="footer"><div align="right">###SPRACHE###</div></td>
      <td width="535" rowspan="2" class="header">&nbsp;</td>
      <td width="55" height="30" rowspan="2" valign="bottom" class="header">&nbsp;</td>
      <td width="118" class="footer">###MININAV###</td>
      <td width="21" height="30" rowspan="2" class="header">&nbsp;</td>
    </tr>
    <tr>
      <td width="173" height="15" class="header">&nbsp;</td> 
      <td class="header" valign="bottom">&nbsp;</td>
    </tr>
  </tbody>
</table>
<!-- ###DOKUMENT### -->
</body>
</html>
```


----------



## Maik (23. Oktober 2006)

Wenn ich die weiße Rahmenfarbe zu Testzwecken auf schwarz umstelle, ist der Rahmen im IE deutlich zu erkennen.

Naja, und im Selektor *.headergrey2* hast du einen durchgezogenen Rahmen gewählt, im HTML-Code kann ich aber kein Element mit dem Klassennamen entdecken.

Desweiteren ist mir beim Überfliegen des CSS-Codes aufgefallen, daß da bei vielen Klassen der Punkt fehlt, wie z.B. hier:


```
h2, .csc-header .csc-header-n1, h2 a,h2 a:visited,h2 a:link { }
```

Und wie bindest du die CSS-Datei eigentlich in das Dokument ein? Im HTML-Code kann ich diesbezüglich nichts entdecken.

Und noch etwas: entferne mal die rotmarkierte >-Klammer in der Doctype-Deklaration:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
"http://www.w3.org/TR/html4/loose.dtd">
```


----------



## Dranoel (23. Oktober 2006)

Ok danke für die Ansätze. Wie schon beschrieben ist der Code für Typo3 gedacht. Und da kann man das CSS mitteils Script einbinden lassen. Ich habe in dem CSS Beispiel was hier gepostet ist, die dashed durch solid ersetzt weil es mir einfach auf den Nerv ging, dass es nicht funktioniert hat. Ich ändere mal noch die angesprochenen Klassenfehler.
Der Inhalt mit .headergrey2 wird über eine andere Datei in dieses Template integriert.
Was mich auch wundert ist das was du festgestellt hast: Mit schwarzen Linien gehts bei mir auch...


----------



## Maik (23. Oktober 2006)

Dranoel hat gesagt.:
			
		

> Was mich auch wundert ist das was du festgestellt hast: Mit schwarzen Linien gehts bei mir auch...


Das hängt dann wohl mit der weißen Hintergrundfarbe für die Tabelle zusammen


----------



## Dranoel (23. Oktober 2006)

Aber warum geht das dann im Mozi? Das is ein Mysterium, dass ich gerad nicht verstehe!


----------



## Maik (23. Oktober 2006)

Wie es scheint, verschiebt der IE den Rahmen um einen Pixel nach unten, wo er dann auf die weiße Hintergrundfarbe trifft.

Gibt es denn eine Online-Version, um die Seite mal "live" im IE betrachten zu können?


----------



## Dranoel (23. Oktober 2006)

Zu finden ist das ganze unter http://www.navimatix.de


----------



## Maik (23. Oktober 2006)

Der gestrichelte Rahmen ist doch im IE zu sehen


----------



## Dranoel (23. Oktober 2006)

Unten die Boxen sind gestrichelt zu sehen aber ich versteh halt das oben nicht.


----------



## Maik (24. Oktober 2006)

Wie gesagt, du versuchst auf weißem Hintergrund einen weißen gestrichelten Rahmen darzustellen.

Warum im Mozilla/Firefox der gestrichelte Rahmen dennoch zu erkennen ist (bzw. war, denn derzeit hast du in der Klasse *.header* wieder einen durchgezogenen weißen Rahmen definiert), kann ich dir auch nicht sagen.

Und daß der gestrichelte Rahmen unterhalb der Boxen zu sehen ist, liegt einfach daran, daß hier der Hex-Farbcode #999999 lautet.


----------



## Dranoel (24. Oktober 2006)

Du hast mir Sachen gesagt die ich schon wusste. In der Tabelle in der der untere Rand dashed sein soll ist kein weisser HG mehr. Hab ich extra geändert bzw es muss ein solcher HG sein. Und es funktioniert trotzdem nicht. Deshalb hab ich mich entschieden, das ganze mit durchgezogenen Linien darzustellen, da ich es Leid bin nach diesem echt hirnzermalmenden Fehler zu suchen. Klar mach ichs mir dadurch leicht, aber ich hab den ursprünglichen Code auch nicht geschrieben. Und der Fehler trat schon bei dieser Version auf.

Danke für die Hilfe.


----------



## Quaese (25. Oktober 2006)

Hi,

Zitat aus Cascading Style Sheets, Level 2 (Deutsche Übersetzung):
"Alle Rahmen werden auf dem Hintergrund der Box gezeichnet."

Damit ist erklärt warum der Rahmen im FF angezeigt wird. Der IE hält sich nicht an die Empfehlung und
zeichnet die Rahmen auf dem Hintergund des übergeordneten Elements.

Als Lösung könntest Du für solche Rahmen einfach zwei Rahmenfarben definieren.
- Für Nicht-IEs wie bisher weiss
- Für IEs die Hintergrundfarbe des Elementes

```
/* Klasse zum formatieren der Seite */
.header {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	background-color: #2E6F9E;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	border-bottom-color: #fff !important; /* Nicht-IEs */
	border-bottom-color: #2E6F9E;         /* IEs */
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}
```
Vielleicht hilft Dir das weiter.

Ciao
Quaese


----------



## Dranoel (25. Oktober 2006)

SUUUUPERGEIL (Admins verzeit bitte diesen Ausbruch von Freude in Kombination mit der  Fast-Mißachtung der Forenregeln!  )

Das funktioniert super. Grossen Dank für diesen Tipp.


EDIT:

Leider tritt jetzt ein neues Problem auf. Auf meiner Startseite wird im IE die gestrichelte Linie dunkel/Schwarz dargestellt obwohl die die selbe Klasse besitzt wie auf der Folgeseite. Zu sehen auf http://www.navimatix.de.

Der Quellcode ist folgendermassen:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Navimatix</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--- ###DOKUMENT### start -->
<style type="text/css">
a, a:link, a:active, a:visited { font-family: "Verdana", Arial, Helvetica, sans-serif; font-size: 11px; color: #999999; text-decoration: none }
a:hover  { color: #99CC00; text-decoration: none }
</style>
</head>
<body>
<table height="100%" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="186">&nbsp;</td>
    <td width="200" nowrap>&nbsp;</td>
    <td width="400" nowrap>&nbsp;</td>
    <td width="250" nowrap>&nbsp;</td>
    <td width="228">&nbsp;</td>
  </tr>
  <tr class="content"> 
    <td height="30" bgcolor="#FFFFFF">&nbsp;</td>
    <td width="200" height="30" nowrap bgcolor="#FFFFFF"><img src="fileadmin/templates/img/more.gif" width="200" height="30"></td>
    <td width="400" height="30" nowrap bgcolor="#FFFFFF">&nbsp;</td>
    <td width="250" height="30" nowrap bgcolor="#FFFFFF"> 
      <div align="right"><a href="#">###SPRACHE###</a></div></td>
    <td height="30" bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr> 
    <td height="100" class="header">&nbsp;</td>
    <td height="100" colspan="2" nowrap background="fileadmin/templates/img/back.gif" bgcolor="#99CC00" class="header">&nbsp;</td>
    <td width="250" height="100" valign="bottom" nowrap class="header"> 
      <div align="right"><img src="fileadmin/templates/img/weblogo.gif" width="160" height="65" border="0"></div></td>
    <td height="100" class="header">&nbsp;</td>
  </tr>
  <tr> 
    <td height="169" valign="top" bgcolor="#FFFFFF" class="content">&nbsp;</td>
    <td height="169" colspan="3" valign="top" nowrap bgcolor="#FFFFFF" class="content"> 
      <div align="right">
        <table width="850" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
          <tr> 
            <td width="170" height="100" class="aktive"><div align="right">
                <div align="right"><img src="fileadmin/templates/img/company.jpg" width="150" height="81"></div>
                <div align="right">###menu1###</div>
              </div></td>
            <td width="170" height="100" class="aktive"><div align="right">
                <div align="right"><img src="fileadmin/templates/img/features.jpg" width="150" height="81"></div>
                <div align="right">###menu2###</div>
              </div></td>
            <td width="170" height="100" class="aktive"><div align="right">
                <div align="right"><img src="fileadmin/templates/img/competences.jpg" width="150" height="81"></div>
                <div align="right">###menu3###</div>
              </div></td>
            <td width="170" height="100" class="aktive"><div align="right">
                <div align="right"><img src="fileadmin/templates/img/download.jpg" width="150" height="81"></div>
                <div align="right">###menu4###</div>
              </div></td>
            <td width="170" height="100" class="aktive"><div align="right">
                <div align="right"><img src="fileadmin/templates/img/team.jpg" width="150" height="81"></div>
                <div align="right">###menu5###</div>
              </div></td>
          </tr>
          <tr> 
            <td width="170" height="63" class="inaktiv">###subtitle1###<br>
            </td>
            <td width="170" height="63" class="inaktiv">###subtitle2###<br>
            </td>
            <td width="170" height="63" class="inaktiv"> ###subtitle3###<br>
            </td>
            <td width="170" height="63" class="inaktiv">###subtitle4###<br>
              <br></td>
            <td width="170" height="63" class="inaktiv"> ###subtitle5###<br>
            </td>
          </tr>
        </table>
      </div></td>
    <td height="169" valign="top" bgcolor="#FFFFFF" class="content">&nbsp;</td>
  </tr>
  <tr> 
    <td height="30" class="unten">&nbsp;</td>
    <td width="200" height="30" nowrap class="unten">&nbsp;</td>
    <td width="400" height="30" nowrap class="unten">&nbsp;</td>
    <td width="250" height="30" nowrap class="unten"><font color="#ffffff"><a href="#">###MININAV###</a></font></td>
    <td height="30" class="unten">&nbsp;</td>
  </tr>
  <tr> 
    <td height="30" bgcolor="#FFFFFF" class="content">&nbsp;</td>
    <td width="200" height="30" nowrap bgcolor="#FFFFFF" class="content">&nbsp;</td>
    <td width="400" height="30" nowrap bgcolor="#FFFFFF" class="content">&nbsp;</td>
    <td width="250" height="30" nowrap bgcolor="#FFFFFF" class="content">&nbsp;</td>
    <td height="30" bgcolor="#FFFFFF" class="content">&nbsp;</td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td nowrap>&nbsp;</td>
    <td nowrap>&nbsp;</td>
    <td nowrap>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
<!--- ###DOKUMENT### stop -->
</html>
```


----------



## Maik (25. Oktober 2006)

Der dunkelgraue Rahmen resultiert aus dem dunkelgrauen Hintergrund.



			
				Quaese hat gesagt.:
			
		

> Der IE hält sich nicht an die Empfehlung und zeichnet die Rahmen auf dem Hintergund des übergeordneten Elements.


----------



## Dranoel (25. Oktober 2006)

michaelsinterface hat gesagt.:


> Der dunkelgraue Rahmen resultiert aus dem dunkelgrauen Hintergrund.



Ok, dann habe ich wohl nicht richtig gelesen. Ich habs aber inzwischen auch bemerkt 
Und wie soll das dann weitergehn? Denn auf der Folgeseite funktioniert der Code und auf meiner Startseite leider nicht.


----------



## Maik (25. Oktober 2006)

Wozu verwendest du noch zusätzlich den Star-HTML-Hack, wenn du schon die !important-Regel einsetzt?

Und noch ein grundsätzlicher Tipp zur Anwendung des Star-HTML-Hacks: es werden in dem Selektor nur die Eigenschaften notiert, deren Werte für den IE angepasst werden müssen.


----------



## Dranoel (25. Oktober 2006)

Ich kenn leider die ganzen Hacks nich. Hab nur ausprobiert wie man das machen kann. funktioniert leider nicht so wie gewollt. Hab ja im Grunde nichts verändert auf der Startseite, da es ja die selbe Klasse verwendet, sollte es doch funktionieren oder hab ich da was falsch verstanden? 

Mir ist klar dass mein Code voller Fehler is da ich die Schachtelung vielleicht nicht korrekt eingesetzt habe. Aber diesen einen Fehler versteh ich einfach nicht. Mein Hirn will nich begreifen warum es auf der einen Seite funktioniert und auf der anderen nicht.


----------



## Maik (25. Oktober 2006)

Bitte vergleiche einfach nochmal Quaeses Lösungsvorschlag


```
background-color: #2E6F9E;
border-bottom-style: dashed;
border-bottom-width: 1px;
border-bottom-color: #fff !important; /* Nicht-IEs */
border-bottom-color: #2E6F9E;         /* IEs */
border-top-style: none;
border-right-style: none;
border-left-style: none;
```
mit deinen CSS-Klassen *.lineweiss* und *.header*.


----------



## Dranoel (26. Oktober 2006)

Die Klassen sind von mir richtig formatiert, da es sich bei den beiden um andere Seitenteile handelt die nich die #2E6F9E (blau) Farbe tragen. Ansonsten kann ich keinen Unterschied feststellen können. Linieweiss hab ich nur aus Testzwecken gemacht, da die .header-Klasse nichts bewirkt hat (warum auch immer).

Wenn ich beispielsweise bei .header & .lineweiss nur die Farbe (#99CC00) ändere:

```
.lineweiss {
	background-color: #99CC00;
        border-bottom-style: dashed;
        border-bottom-width: 1px;
        border-bottom-color: #ffffff !important; /* Nicht-IEs */
	border-bottom-color: #99CC00;         /* IEs */
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	
}

.header {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
        color: #ffffff;
	font-weight: bold;
	font-variant: normal;
	background-color: #99CC00;
	border-bottom-style: dashed;
        border-bottom-width: 1px;
	border-bottom-color: #ffffff !important; /* Nicht-IEs */
	border-bottom-color: #99CC00;         /* IEs */
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}/
```
dann funktiniert es auf den Unterseiten. Auf der Startseite wird im IE weiterhin eine graue-weisse Line gezeigt. Da kann ich machen was ich will. Einzige Lösung: Der * html Hack und eine solid Line. Sorry ich bin wahrscheinlich aufm falschen Dampfer.


----------



## Maik (26. Oktober 2006)

Gestern Abend waren die CSS-Klassen nicht richtig formatiert, ansonsten hätte ich den Tipp wohl nicht gepostet. Da ich mir deinen CSS-Code nicht auf der Festplatte und ebenso wenig "da oben" abgespeichert habe, kann ich ihn hier jetzt auch nicht posten, um die Unterschiede zu Quaeses CSS-Code aufzuzeigen.

Und noch ein grundsätzlicher Tipp für den Star-HTML-Hack: 

Du notierst ihn immer vor dem "normalen" CSS-Selektor, also etwa so:


```
* html .lineweiss { /* CSS-Formatierungen für IE */ }
.lineweiss { /* CSS-Formatierungen */ }
```
Das ist aber falsch, denn er wird anschliessend genannt, damit der IE die zuvor gesetzten Eigenschaftswerte überschreibt. Sinn und Zweck dieser Übung ist es nämlich,  auftretende Fehlinterpretationen und Bugs im IE zu beheben / korrigieren. 


```
.lineweiss { /* CSS-Formatierungen */ }
* html .lineweiss { /* CSS-Formatierungen für IE */ }
```

@grau-weisse Linie: wie es scheint, resultiert der graue Anteil des Rahmens aus der Seitenhintergrundfarbe.


----------

