nicht angemeldet
Darstellungsproblem mit P im IE6 (XP-SP2)
Hallo NG,
ich bin dabei mir ein kleines Blog zu basteln. Da ich auch sonst Webanwendungen entwickel, bin ich darauf bedacht, das es barrierefrei ist und überall gleich aussieht. Ist ja total verständlich. Nun habe ich aber ein Problem mit der Darstellung der Seite im IE.
Das Layout der Seite ist mit Div's erstellt. Alle Styleangaben liegen in der CSS.
Hier mal die Links:
Seite: http://www.csharp-paradise.de
CSS: http://www.csharp-paradise.de/styles/general.css
Ich habe verschiedene Browser zum Testen genommen (Oper 7.54, FireFox 1.0PR, IE 6). Bis auf den IE wird es überall ordentlich dargetstellt.
Der Fehler:
Auf der Seite befinden sich 4 Bereiche. Header, Menü, Inhalt, Footer.
|-----------------------------|
| Header |
|---|
| Menu |
| ----------------------------- |
| Footer |
| ----------------------------- |
Im Menubereich und im Inhaltsbereich befindt sich jeweils ein <P>-Element als ersten. Im IE wird es im Inhaltsbereich aber etwas tiefer dargestellt, als im Menübereich.
Es ist aber überall die gleiche Styleangabe.
p.headline
{
font-size: 1.1em;
font-weight: bold;
background-color: #dcdcdc;
padding: 4px;
}
Zudem ist zu bemerken, dass es im Loginbereich der Seite geht. Da habe ich aber die Breite des Elements durch ein Div begrenzt. Kann es an der Breite liegen? Aber warum ist es das in anderen Browsern so, wie ich mir das vostelle?
Vieleicht kennt ja jemand von euch das Problem und kann mir helfen.
Andreas Gräfe
-
Hi,
Im Menubereich und im Inhaltsbereich befindt sich jeweils ein <P>-Element als ersten. Im IE wird es im Inhaltsbereich aber etwas tiefer dargestellt, als im Menübereich.
Wenn Dich der voreingestellte Abstand nach oben für P im IE stört, warum definierst Du ihn dann nicht einfach selbst?
Dies ist ausnahmsweise mal kein Fehler vom IE.freundliche Grüße
Ingo-
Im Menubereich und im Inhaltsbereich befindt sich jeweils ein <P>-Element als ersten. Im IE wird es im Inhaltsbereich aber etwas tiefer dargestellt, als im Menübereich.
Wenn Dich der voreingestellte Abstand nach oben für P im IE stört, warum definierst Du ihn dann nicht einfach selbst?
Dies ist ausnahmsweise mal kein Fehler vom IE.Aber warum muss ich das nicht im Mozilla oder Opera machen? Das ist das, was ich m´nicht so ganz verstehe.
Und mir ist nochwas aufgefallen, was noch viel schlimmer ist. Die Seite http://www.csharp-paradise.de/weblog.aspx stellt den obersten Eintrag im IE auch nicht so dar, wie alle anderen, obwohl alle die selben Styleangaben haben. Das ist in anderen Browsern auch nicht so.
Tut mir leid, wenn ich soviel fragen muss, aber ich verstehe das einfach nicht.Andreas
-
Hi,
Aber warum muss ich das nicht im Mozilla oder Opera machen? Das ist das, was ich m´nicht so ganz verstehe.
Das "mußt" Du ja auch nicht machen - es sei denn, Du willst einen bestimmten Abstand in allen Browsern erreichen. Ein anderes noch typischeres Beispiel sind die Seitenränder. Hier ist steht auch den Browsern frei, ob sie html ein padding geben oder body ein margin oder padding - will man einwen einheitlichen (oder keinen) Randabstand, dann setzt man ihn explizit für alle möglichen Variationen.
Und mir ist nochwas aufgefallen, was noch viel schlimmer ist. Die Seite http://www.csharp-paradise.de/weblog.aspx stellt den obersten Eintrag im IE auch nicht so dar, wie alle anderen, obwohl alle die selben Styleangaben haben.
Du meinste den Bug, daß er die Überschriftzeile nicht bzw. erst bei rezise anzeigt? Den bekomst Du z.B. über
<p class="headline" style="position:relative;">Blog von Andreas Gräfe</p>
weg.freundliche Grüße
Ingo-
Hallo Ingo,
Du meinste den Bug, daß er die Überschriftzeile nicht bzw. erst bei rezise anzeigt? Den bekomst Du z.B. über
<p class="headline" style="position:relative;">Blog von Andreas Gräfe</p>Nein, das hat sich, so wie es scheint, mit margin erledigt. Ich meinte den ersten Blogeintrag. Der ist bei mir nich so, wie die anderen. Die blaue Zeile ist viel zu groß. Dann fehlen Textangaben, besonders die im 2. Div (beinhaltet "Eintrag erstellt...."). Das wird erst angezeigt, wenn man es markiert. Es scheint so, als würde das div nicht angezeigt.
Beispiel:
<div class="blog">
<div style="FONT-WEIGHT: bold; FONT-SIZE: 1em; FLOAT: left; BACKGROUND-COLOR: #00bfff">asdf</div><!-- Darstellung fehlerhaft. -->
<div style="TEXT-ALIGN: right; BACKGROUND-COLOR: #00bfff">Eintrag erstellt: 01.10.2004 22:50:43</div><div style="clear: left; border-top: solid 1px #dcdcdc;">asdf</div>
</div>-
Hi,
Nein, das hat sich, so wie es scheint, mit margin erledigt. Ich meinte den ersten Blogeintrag. Der ist bei mir nich so, wie die anderen. Die blaue Zeile ist viel zu groß. Dann fehlen Textangaben, besonders die im 2. Div (beinhaltet "Eintrag erstellt...."). Das wird erst angezeigt, wenn man es markiert.
Diesen Bug bekommst Du mit <div id="divContent" style="line-height:1.3em;"> in den Griff... der IE erfordert halt einige Tricks, damit er mit modernem CSS klar kommt ;-)
freundliche Grüße
Ingo-
Hi,
Diesen Bug bekommst Du mit <div id="divContent" style="line-height:1.3em;"> in den Griff... der IE erfordert halt einige Tricks, damit er mit modernem CSS klar kommt ;-)
Das kann ich so nicht bestätigen. Danach sieht es noch schlimmer aus.
Nur damit wir nicht aneinander vorbeireden. Ich meine diesen Teil:
<div class="blog">
<div style="FONT-WEIGHT: bold; FONT-SIZE: 1em; FLOAT: left; BACKGROUND-COLOR: #00bfff">asdf</div>
<div style="TEXT-ALIGN: right; BACKGROUND-COLOR: #00bfff">Eintrag erstellt: 01.10.2004 22:50:43</div>
<div style="clear: left; border-top: solid 1px #dcdcdc;">asdf</div>
</div>Die Erstellung des Blogs erfolgt in einem Repeater. Also sind alle Teile gleich erstellt. Wieso ist dann im oberen Bereich noch Raum nach dem Text? In den unteren Elementen ist es aber niccht mehr.?
Ich habe keine Ahnung.
Katarch
-
Hi,
Diesen Bug bekommst Du mit <div id="divContent" style="line-height:1.3em;"> in den Griff... der IE erfordert halt einige Tricks, damit er mit modernem CSS klar kommt ;-)
Das kann ich so nicht bestätigen. Danach sieht es noch schlimmer aus.
Wenn ich in http://www.csharp-paradise.de/weblog.aspx diesen Style hinzufüge, dann wirkt sich das auf den gesamten Inhalt des DIVs aus - jedenfalls in meinem IE6.
Die Erstellung des Blogs erfolgt in einem Repeater. Also sind alle Teile gleich erstellt. Wieso ist dann im oberen Bereich noch Raum nach dem Text? In den unteren Elementen ist es aber niccht mehr.?
das mußt Du wohl Microsoft fragen ;-)
Es wird wohl mit der nebenstehend floatenden Naviogation zusammen hängen, daß der Bug sich unterhalb nicht mehr bemerkbar macht.freundliche Grüße
Ingo
-
-
-
-
-
-
-
Hi,
p.headline
Also eine Überschrift. Dafür gibt es in HTML ganz spezielle Elemente, h1, h2, h3 ... h6
Definiere die Abstände (margin/padding), dann erhöht sich die Chance, daß die Darstellung ähnlicher wird.
Ein Unterschied ist z.B., daß bei
<div id="divMenu">
<p class="headline">Navigation</p>whitespace im div vor dem p kommt, bei
<div><p class="headline">Willkommen im CSharp-Paradise</p>
aber nicht.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hi,
p.headline
Also eine Überschrift. Dafür gibt es in HTML ganz spezielle Elemente, h1, h2, h3 ... h6
Das ist schon klar. Das Problem ist aber das gleiche gewesen. Ich werde es natürlich wieder umstellen.
Definiere die Abstände (margin/padding), dann erhöht sich die Chance, daß die Darstellung ähnlicher wird.
Mit Margin hat es funktioniert.
Ein Unterschied ist z.B., daß bei
<div id="divMenu">
<p class="headline">Navigation</p>whitespace im div vor dem p kommt, bei
<div><p class="headline">Willkommen im CSharp-Paradise</p>
aber nicht.
Wieso denn das?
Hast du dir mal die Blog-Seite angesehen? Das ist noch viel schlimmer. Aber da habe ich nur mit DIV's gearbeitet. Das verstehe ich nun gar nicht mehr. Da werde einzelne Teile einfach nicht dargestellt. Aber auch nur vom IE.
Andreas
-
Hi,
Ein Unterschied ist z.B., daß bei
<div id="divMenu">
<p class="headline">Navigation</p>
whitespace im div vor dem p kommt, bei
<div><p class="headline">Willkommen im CSharp-Paradise</p>
aber nicht.Wieso denn das?
Woher soll ich bitte wissen, warum Du im ersten Fall whitespace verwendet hast und im zweiten Fall nicht?
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hi,
Ein Unterschied ist z.B., daß bei
<div id="divMenu">
<p class="headline">Navigation</p>
whitespace im div vor dem p kommt, bei
<div><p class="headline">Willkommen im CSharp-Paradise</p>
aber nicht.Wieso denn das?
Woher soll ich bitte wissen, warum Du im ersten Fall whitespace verwendet hast und im zweiten Fall nicht?
Ichhabe keine Anung, wo da whitespace sein soll. Kannst du mir den Code mal bitte posten?
Danke,
Andreas (AKA Katarch)
-
-
-