Gestrichelte CSS Linie im IE nicht vorhanden/durchgängig
- Themenstarter Dranoel
- Beginndatum
- Status
M
Maik
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.
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
Grünschnabel
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.
Danke für die Hilfe.
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
Vielleicht hilft Dir das weiter.
Ciao
Quaese
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
Code:
/* 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;
}Ciao
Quaese
Dranoel
Grünschnabel
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:
)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:
HTML:
<!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"> </td>
<td width="200" nowrap> </td>
<td width="400" nowrap> </td>
<td width="250" nowrap> </td>
<td width="228"> </td>
</tr>
<tr class="content">
<td height="30" bgcolor="#FFFFFF"> </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"> </td>
<td width="250" height="30" nowrap bgcolor="#FFFFFF">
<div align="right"><a href="#">###SPRACHE###</a></div></td>
<td height="30" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td height="100" class="header"> </td>
<td height="100" colspan="2" nowrap background="fileadmin/templates/img/back.gif" bgcolor="#99CC00" class="header"> </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"> </td>
</tr>
<tr>
<td height="169" valign="top" bgcolor="#FFFFFF" class="content"> </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"> </td>
</tr>
<tr>
<td height="30" class="unten"> </td>
<td width="200" height="30" nowrap class="unten"> </td>
<td width="400" height="30" nowrap class="unten"> </td>
<td width="250" height="30" nowrap class="unten"><font color="#ffffff"><a href="#">###MININAV###</a></font></td>
<td height="30" class="unten"> </td>
</tr>
<tr>
<td height="30" bgcolor="#FFFFFF" class="content"> </td>
<td width="200" height="30" nowrap bgcolor="#FFFFFF" class="content"> </td>
<td width="400" height="30" nowrap bgcolor="#FFFFFF" class="content"> </td>
<td width="250" height="30" nowrap bgcolor="#FFFFFF" class="content"> </td>
<td height="30" bgcolor="#FFFFFF" class="content"> </td>
</tr>
<tr>
<td> </td>
<td nowrap> </td>
<td nowrap> </td>
<td nowrap> </td>
<td> </td>
</tr>
</table>
</body>
<!--- ###DOKUMENT### stop -->
</html>
Zuletzt bearbeitet:
M
Maik
Der dunkelgraue Rahmen resultiert aus dem dunkelgrauen Hintergrund.
Quaese hat gesagt.:
Dranoel
Grünschnabel
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.
Zuletzt bearbeitet:
M
Maik
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.
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
Grünschnabel
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.
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.
M
Maik
Bitte vergleiche einfach nochmal Quaeses Lösungsvorschlag
mit deinen CSS-Klassen .lineweiss und .header.
Code:
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;- Status
