• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Falsche Darstellung im Internet Explorer? (Tabellen)

B

Bluebird

New member
Hi! Hab mich in den letzten Stunden ein bisschen mit CSS beschäftigt und viele Probleme auch selbst lösen können. Nur bei dieser Sache komme ich nicht weiter und hoffe, dass mir einer dabei hilft.

Ich würde gern unter dem aktiven Register(in diesem Fall "Startseite") keinen Strich haben, sodass die kleine Tabelle oben direkt mit der großen Tabelle unten verbunden ist. Ich habe es geschafft, dass es im Firefox richtig aussieht, nur im Internet Explorer ist die Linie noch da und was noch viel schlimmer ist, dort fehlt die obere Linie.

Im Firefox siehts so aus:

firefox.jpg


Im Internet Explorer so:

ie.jpg


Das Stylesheet sieht so aus:

Code: 
#tabmenue {
  margin-left:25px; margin-right:25px; padding:3px; width:600px; border-bottom:0px solid #222;
}
#tabmenue li {
  display:inline; margin:0; padding:0;
  font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif; font-style:normal; font-weight:bold; font-size:10;
}

#tabmenue li a {
  padding:3px 1em; margin-left:3px; border:1px solid #777; border-bottom:0px solid black;
  color:#666666; background-color:#cccccc; text-decoration:none;
  font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif; font-style:normal; font-weight:bold; font-size:10;
}
#tabmenue li a:hover {
}
#tabmenue li a#aktuell {
  border-collapse:collapse; border-style:hidden; padding-bottom:3px; border:1px solid black; border-bottom:1px solid #dedcdc;
  color:#000; background-color:DEDCDC;
}
#h1 h1 {
border-style:none; width:715px;  margin-left:-15px; margin-top:-19px; height:300px; border:1px solid black; padding:10px; font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif; font-style:normal; font-weight:bold; font-size:12; background-color:#DEDCDC;

Die HTML Datei so:

Code: 
<html>
<head>
<title>...</title>
<link rel="stylesheet" href="sheet.css">
</head>

<body>
<ul id="tabmenue">
  <li><a id="aktuell" href="#">Startseite</a></li>
  <li><a href="./produkte.htm">Produkte</a></li>
  <li><a href="#">...</a></li>
  <li><a href="#">Unternehmen</a></li>
  <li><a href="#">Kontakt</a></li>
  <li><a href="#">Impressum</a></li>
</ul>
<ul id="h1">
    <h1 align="left">...<br><br><br><img src="bilder/buero.jpg" width="400" height="200" border="0"></h1>
</ul>
</body>
</html>
 
Tja, das scheint wohl eine Frickelarbeit zu werden...

Code: 
#tabmenue li a#aktuell { border-collapse:collapse; border-style:hidden; padding-bottom:3px; border:1px solid black; border-bottom:1px solid #dedcdc; color:#000; background-color:DEDCDC; }

Also das: border-style:hidden gibt's eigentlich gar nicht...
Und hier dran: border:1px solid black; border-bottom:1px solid #dedcdc könnte der IE sich eventuell stören.
Versuche das mal 'korrekt':
Code: 
border-top:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #dedcdc;
border-right:1px solid #000;
Vielleicht hilft's ja was...
 
also liebe Leute ich fummel auch schon seit gestern dran rum, aber von Browserkompatibilität kann keine Rede sein.

Es gibt ein paar Angaben in dem Code, die überflüssig sind. border-style:hidden z.B. Aber egal. Läßt man das weg ändert sich auch nix.

Wichtigster Punkt ist, der IE verschluckt den oberen border, weil der müsste eigentlich direkt im li definiert werden, damit auch der ie den anzeigt. Aber dann ist der immer da und das soll er ja nicht beim aktuellen Link.

Durch die unterschiedlichen Browser-Defintionen klappt das hier weder mit mit den border noch mit den padding-Angaben. Natürlich definiere ich die border einzeln. Und besser immer mit Farbcodes anstatt mit Namen.

Die Navigation muß ja immer 1px über dem Contentbereich überlappen, sonst ist der fest definierte border vom Content-Bereich immer sichtbar, und das soll er ja auch nicht. Gut das mit dem border collapse klappt schon auch die Anzeige mit dem aktuellen Link. Bleibt aber das padding-Problem und der border oben im ie wird verschluckt.

fummel frickel, hm, ich kann bisher keine zufriedenstellende Lösung anbieten, vergesse jetzt mal alles was ich gelesen habe und fang ganz von vorne an.
 
Guten Morgen!

die oberen Ränder im Menue kann man dadurch erreichen, dass man im #tabmenue
mehr padding setzt, der IE hat einfach nicht genug Platz, um diesen Menue-link mitsamt
dem oberen Rand anzuzeigen, da er ja padding nicht zum Container dazuzählt, sondern abzieht.
HTML: 
<style type="text/css">
...
#tabmenue {
  margin-left:25px; 
  margin-right:25px; 
  padding-top:7px; 
  padding-right:3px;
  padding-bottom:3px;
  padding-left:3px;
  width:600px; 
}
...
</style>
wahrscheinlich wird man das so nie hinbekommen, eben, wie bine schon sagt, wegen des padding-Problems.
dadurch wird die Anzeige in IE und Mozilla immer unterschiedlich ausfallen.

planet4.
 
Noch 'ne Möglichkeit:
wenn Du die Nase voll hast vom IE
(und das würde ich sehr gut verstehen),
machst Du Deine CSS erstmal für den FireFox fertig
(damit wäre auch gewährleistet, das es in den 'guten' Browsern ziemlich einheitlich aussieht)
und dann kopierst Du die fertige CSS,
benennst sie um und änderst die Teile die geändert werden müssen um,
damit der IE es richtig darstellt.
Zu guter Letzt machst Du eine CSS-Browserweiche in Deinen Head...
 
Huh, man Leute, diese ganzen Umgehungs-Arien sind ja OK, aber alle sowas von schmerzhaft. Wollt ich bloß mal sagen.

f*** IE.
 
bine schrieb:
Huh, man Leute, diese ganzen Umgehungs-Arien sind ja OK, aber alle sowas von schmerzhaft.
Zum Vergrößern anklicken....

Naja, ist aber eigentlich recht einfach und es funktioniert gut...
Man muss ja auch nur Kleinigkeiten korrigieren und keine komplette CSS schreiben...
Code: 
<style type="text/css"> @import url(style.css) screen; </style>
<!--[if IE]><link type='text/css' rel='stylesheet' href='style_ie.css'><![endif]-->

bine schrieb:
f*** IE.
Zum Vergrößern anklicken....
:D So sehe ich das auch...
 
... das möcht ich schnell noch nebenbei verstehen:
HTML: 
<style type="text/css"> @import url(style.css) screen; </style>
<!--[if IE]><link type='text/css' rel='stylesheet' href='style_ie.css'><![endif]-->
die obere Zeile is klar, aber das untere: was ist das genau? (XML???)
und muss man dazu einen bestimmten Doctype angeben? Versteht das jeder?

planet4.
 
Das ist ein Code, den alle Browser als auskommentiert überlesen, nur der IE interpretiert diesen. So hat man die Möglichkeit eine Seite erstmal mit den Browsern kompatibel zu machen, die CSS korrekter interpretieren als der IE, und für den IE extra Informationen zu hinterlegen damit der auch funktioniert .

auch hier nachzulesen http://www.quirksmode.org/css/condcom.html
 
In der Hinsicht ist die Seite: http://dean.edwards.name/IE7/ perfekt, denn auch die kann man in einem Kommentar-Tag verbergen, das nur der IE sieht - Browser kriegen das garnicht mit.
Dieses JS ist natürlich unvollkommen, zunächst ist alles in Ordnung, aber wehe, man versucht das IE-Fenster auf eine bestimmte Art und Weise zu skalieren... Aber wenn die Leute llieber damit arbeiten, bitteschön, vielleicht sind ja gerade solche Seiten ein Grund für den Normaluser zu wechseln?

Ich bin der Meinung, daß eine Seite auf jeden Fall IE kompatibel sein muß - das heißt für mich, daß man auch mit dem IE dieselben Informationen bekommt wie mit einem Browser.
Niemand kann etwas dagegen sagen, daß man diese sehr viel schneller und eiinfacher bekommt als im IE (Beispiel CSS Menüs) , oder?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben