IE6 zerschießt meinen Baukasten

Hmm... immer noch das gleiche Problem: Die Navi verschwindet. Ich habe dir mal zum Beweis drei Screenshots angehängt. Einmal die Seite mit deinen Änderungen im Firefox und die betreffenden Codepassagen, einmal im Stylesheet selbst und in der page.php (das Blog läuft ja über Wordpress)...
 

Anhänge

  • Bild 1.jpg
    Bild 1.jpg
    37,5 KB · Aufrufe: 22
  • Bild 2.jpg
    Bild 2.jpg
    16,5 KB · Aufrufe: 17
  • Bild 3.jpg
    Bild 3.jpg
    13,2 KB · Aufrufe: 26
Zuletzt bearbeitet:
Moin,

hast du auch, wie von mir empfohlen, die Breite für #wrapper innerhalb des <style>-Tags geändert?

Das Attachment hatte ich gestern in den folgenden Browsern (unter WinXP) erfolgreich getestet:

  • FF 2.0.0.18 + 3.0.4
  • IE 6 + 7
  • Mozilla 1.8b
  • Netscape 9
  • Opera 9.6
  • Safari 3.1.2
  • Seamonkey 1.1.12

mfg Maik
 

Anhänge

  • demo_blindtexter.zip
    53,7 KB · Aufrufe: 18
Moin!

Innerhalb des <style>-Tags? Ich habe #wrapper nur im Standard-Stylesheet verändert, vgl. die unterste Zeile in Screenshot 2... Muss der Eintrag woanders hin?

Habe auch mal deinen Demotext in das Stylesheet gepastet - das Resultat anbei als weiterer Screenshot. Zusätzlich sind nun auch noch die Infos zu den einzelnen Artikeln verschoben - langsam beginne ich an meinem Rechner zu zweifeln... Was hast du für eine Bildschirmauflösung, wen nbei dir alles ordentlich dargestellt wird? Oder hat das damit nichts zu tun?
 

Anhänge

  • Bild 1.jpg
    Bild 1.jpg
    16,6 KB · Aufrufe: 21
Zuletzt bearbeitet:
blindtexter hat gesagt.:
Moin!

Innerhalb des <style>-Tags? Ich habe #wrapper nur im Standard-Stylesheet verändert, vgl. die unterste Zeile in Screenshot 2... Muss der Eintrag woanders hin?
Zum Vergrößern anklicken....
Ich rede hiervon:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
	<title>laufende beobachtungen : </title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" media="screen,projection" href="http://www.sebastian-ploenges.com/blog/wp-content/themes/barthelme/style.css" title="Barthelme" />
	
	<link rel="alternate" type="application/rss+xml" href="http://www.sebastian-ploenges.com/blog/feed/" title="laufende beobachtungen RSS feed" />
	<link rel="alternate" type="application/rss+xml" href="http://www.sebastian-ploenges.com/blog/comments/feed/" title="laufende beobachtungen comments RSS feed" />
	<link rel="pingback" href="http://www.sebastian-ploenges.com/blog/xmlrpc.php" />

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.sebastian-ploenges.com/blog/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.sebastian-ploenges.com/blog/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 2.6.3" />


<style type="text/css" media="screen,projection">
/*<![CDATA[*/
/* CSS inserted by Barthelme theme options */
	body{font-family:'trebuchet ms',helvetica,sans-serif;font-size:75%;}
	div#content h2,div#content h3,div#content h4,div#content h5,div#content h6,body.archive div.archive-meta,body.attachment div.entry-content div.attachment-content p.attachment-name,body.home div#content div.entry-meta span,body.archive div#content div.entry-meta span,body.search div#content div.entry-meta span,body.single div.entry-date,body.single div.entry-meta,div#content blockquote,div.comments ol.commentlist li div.comment-meta,div.entry-content div.page-link,div.entry-content span.tag-links,body.page div.archive-meta,div.formcontainer form#commentform div.form-input input,div.formcontainer form#commentform div.form-textarea textarea#comment,input#s,div.entry-content div.entry-caption{font-family:'trebuchet ms',helvetica,sans-serif;}
	body div#content div.hentry{text-align:left;}
	body div#wrapper{width:800px;}
	div#header,div#header h1#blog-title a,div#header h1#blog-title a:link,div#header h1#blog-title a:visited{color:#a6a6a6;outline:none;text-decoration:none;}
	body div#header{background:#D4D0C8 url("http://www.sebastian-ploenges.com/blog/wp-content/themes/barthelme/images/header-img.php?upper=D4D0C8&lower=D4D0C8") repeat-x left top;}
/*]]>*/
</style>


mfg Maik
 
Yeah!

Lieber Maik, dein letzter Beitrag hat mich entscheidend weiter gebracht. Nur kurz: Die entsprechende div#wrapper-Breite war über die Optionen des Wordpress-Themes steuerbar - deswegen fand ich sie innerhalb der konventionellen CSS-Maske nicht. Durch deinen Verweis konnte ich den Wert in den Theme-Options tauschen. Mit Erfolg: Der IE stellt die Box jetzt dar!

Dafür gibt es ein paar kleine Folgeprobleme:

  • auf dem PC stellen FF, IE und Opera bei einer Auflösung von 1024x768 die Sidebar immer noch falsch an: unten links. Der IE aber wenigstens nun mit dem Contentbereich...
  • bei einer höhreren Auflösung (Mac und PC) rückt die Sidebar zwar auch nach oben - aber auf die rechte Seite...
  • die Daten zu den einzelen Blogartikeln (Datum, Comments, Permalink) sind nicht mehr neben den Artikeln dargestellt, sondern darunter
  • => ich vermute, dass das einfach mit der Reigenfolge im Stylesheet zusammenhängt, oder? Jetzt mal abgesehen von den Auflösungsfragen...
  • Und: Mag der IE generell keine Transparenz bei png-Dateien? Mit Blick auf den Header?

Ach ja: Danke, danke, danke! ;-)
 
Es liegt nicht an der Reihenfolge der Selektoren im Stylesheet, sondern an der erneut vertauschten Reihenfolge der beiden Spaltenblöcke im HTML-Code - zum Vergleich siehe den Quellcode meines Attachments.

Das Umbrechen der Spaltenblöcken bei einem zu kleinem Viewport lässt sich mit einer Mindestbreite min-width für #wrapper verhindern. Da der IE6 diese CSS-Eigenschaft nicht unterstützt, empfehle ich dir hierfür Stu Nicholls' Beispiel Min-Width for Internet Explorer.

Und ja, der IE6 kann mit transparenten PNGs nicht umgehen - der Artikel Cross-browser semi-transparent backgrounds stellt hierfür aber einen Workaround vor.

mfg Maik
 
Aber ich habe deinen Code im Wordpress-Bereich gepastet - kann es sein, dass irgendeine primary-Definition dem Stylesheet zuvorkommt? Ich habe noch nicht die Stelle gefunden...
 
Hi,

ich rede nicht vom Stylesheet sondern vom Seitenquelltext ;)

Der von dir gepostete Quellcode in diesem Screenshot:

Code: 
<?php get_sidebar() ?>

<div id="container"> ... </div>
deckt sich nicht mit der aktuellen Reihenfolge der beiden Blöcke im Quellcode der Seite (http://www.sebastian-ploenges.com/blog), oder wie in meinem angehängten Beispiel.

mfg Maik
 
Du hast Recht - und genau das verwirrt mich ja: Die page.php aus dem Screenshot ist genauso gerade aktiv, d.h. die Sidebar steht vor dem Container. Aber halt nicht im Quelltext, an den ich über das Wordpress-CMS ja gar nicht herangelange... Ich kann immer nur in den einzelnen phps (wie im jetzt angehängten Bild) schreiben. Oder bin ich blind?



(ganz am Rande und wegen deiner Links: gibts einen über alle Browser einheitlichen Befehl zum Zentrieren des gesamten Layouts?)
 

Anhänge

  • Bild 1.png
    Bild 1.png
    33,3 KB · Aufrufe: 27
Hi,

zu Wordpress kann ich leider nicht viel sagen, außer, dass es nicht der Weisheit letzter Schluß sein kann, dass das CMS dir vorschreibt, in welcher Reihenfolge die Elemente im Seitenquelltext ausgegeben werden.

Im standardkonformen Modus kannst du für #wrapper neben einer angemessenen Breite (die ehemaligen 800px waren da zu klein gewählt) margin:0 auto deklarieren, um es im Viewport horizontal zu zentrieren. Diese Aussage bezieht sich auf den IE, denn alle übrigen Browser unterstützen diese Eigenschaft selbst dann, wenn ihnen das Dokument im "Quirksmodus" übergeben wird ;)

Im letztgenannten Darstellungsmodus müsste text-align:center für das body-Element angegeben werden, damit der IE die Box im Anzeigebereich zentriert, und im Gegenzug für #wrapper text-align:left deklariert werden, damit die horizontale Ausrichtung nicht an die Nachfolgeelemente vererbt wird.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück