Seitenanzeige im IE vs. FF, Chrome, Opera...

1 Finn (Gast)

Hallo Jörg, hallo alle,

bin mir jetzt nicht sicher, ob das ins "Browserforum" oder hierher gehört, deshalb bitte verschieben, falls ich falsch bin.

Ich hab wieder mal ein Problem (hört das denn NIE auf ;-)).... kurz: "meine" Startseite wird im IE anders angezeigt wie in den anderen Browsern.
"Anders" heißt: der Div "container" außer meiner CSS hängt am linken Bildschirmrand, sollte aber eigentlich zentriert sein.

Ich vermute, dass es an der "max-width"-Definition des Containers liegt (?):

/* @group Layout */

#container {
	width:auto;
	max-width: 1320px;
	margin: 0px auto;
	padding: 0px;

Dazu gibt es ja auch zahlreiche Hacks, wie man dem IE simulieren kann, dass er das richtig interpretiert, aber ich konnte keinen finden, der bei mir funktioniert.

Gibt's da eine praktikable Abhilfe?

Danke und viele Grüße
Finn

2 Jörg Kruse

Besonders im Bezug auf den IE sind folgende Punkte relevant:

1, bei welcher / welchen Version(en) des IE tritt das Problem auf?

2. ist dort der Kompatibilitätsmodus aktiviert?

3. welche Doctype-Angabe verwendest du im HTML-Quelltext?
Ein "stricter" Doctype veranlasst den IE, die betreffende Seite standardkonformer darzustellen, also so wie die anderen Browser.

Falls ein anderer Doctype das Problem nicht löst, solltest du soviel Code posten, dass man das Problem damit nachvollziehen kann (oder eine Beispielseite verlinken)

3 Finn

Mensch, bist du schnell! :-))

1. IE 7.0.5730.13 (die hab ich momentan auf dem Rechner --> Büro), daheim gehts aber auch nicht, muß aber nachschauen, welche Version das ist. Nutze den fast nicht mehr.

2. Der Kompatibilitätsmodus ist hier (Büro) nicht im IE-Menü zu finden (zumindest find ich ihn nicht unter Tools bzw. Extras). Wir haben "sichere" Browser-Versionen, so dass ich vermute, dass diese Option irgendwie entfernt wurde. Das Blöde ist: die Seite sollte gerade auf IE's gut laufen zwecks Portfolio-Darstellung im Arbeitsumfeld... ;-)

3. Doctype: hmmm. Ist eine selbst zusammengefrickelte php, hier der Code:

<div id="container" style="width: 990px; ">
	<?php get_header(); ?>
    
		<?php dynamic_content_gallery(); ?>
        
   	<?php get_footer(); ?>

</div><!-- /container -->

Das ist diese Seite (nur die Startseite).
Nicht lachen, zu mehr hat's nicht gereicht :D (sollte aber auch nicht viel mehr sein. Weniger ist mehr... ;-))

Die

style="width: 990px;

bezieht sich auf die Dynamic Content Gallery , die ich eingebaut habe. Breite und Höhe dieses Galeriefensters kann man flexibel in den Plugin-Optionen (CSS) anpassen, welche dann wohl hier selbständig eingefügt werden.

Design und Layout sind noch nicht final. Auch bzgl. Anpassungen der CSS, was Schriftfarben, Grafiken und Fotos (z.B. die Breite auf der Startseite) betrifft, bin ich noch nicht fertig, ich will erstmal, dass die Grundfunktionen laufen.

Danke,
Finn

4 Jörg Kruse

Sorry, hab vergessen zu erwähnen, dass der IE 7 keinen Kompatibilitätsmodus hat, den gibt's erst ab Version 8 :)

<div id="container" style="width: 990px; ">
	<?php get_header(); ?>

Das div#container solltest du unterhalb der get_header() Zeile platzieren - momentan hast du nämlich ungültigen Code:

<div id="container" style="width: 990px; ">
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Die Doctype-Angabe gehört in die erste Zeile. Das besagte Div darf erst nach dem geöffneten <body> folgen

Vielleicht löst sich das Problem ja schon durch eine Korrektur dieses Fehlers.

5 Finn

Hmmm... ich probier das dann in einer ruhigen Minute gleich mal aus, danke.

Was ich nicht verstehe: die Doctype-Angabe steht in der header.php, die php der Startseite hat das alles gar nicht drin. So sieht's im gesamten aus - über den Template-Namen wird diese php als Homeseite aufgerufen - und ersetzt damit die sonstige Einstiegsseite, die ja bei einem Blogsystem immer die letzten Posts beinhaltet. Ich wollte aber eine "feste" (nicht statische ;-)) Startseite.

<?php
/*
Template Name: xy
*/
?>


<div id="container" style="width: 990px; ">
	<?php get_header(); ?>
    
		<?php dynamic_content_gallery(); ?>
        
   	<?php get_footer(); ?>

</div><!-- /container -->

Sorry, dass ich nicht gleich das Ganze gepostet habe, dachte, es wäre nicht so wichtig. Insofern kann ich die Doctype-Angabe ja gar nicht in die erste Zeile verschieben, weil's ja im Ausgangsdokument gar nicht drinsteht... oder?
...
Habe die Doctype-Angabe in der header.php gefunden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="Shortcut Icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" type="image/x-icon" />	

<?php 
wp_enqueue_script('jquery');
wp_head();
?>

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.1.3.js" type="text/javascript" charset="UTF-8"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.vgrid.0.1.4-mod.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//<![CDATA[

function debug(text) {
  ((window.console && console.log) ||
   (window.opera && opera.postError) ||
   window.alert).call(this, text);
}
jQuery.noConflict();

(function($){
	$(function(){
		
		$('#header').css("visibility", "hidden");
		var setGrid = function () {
			return $("#grid-wrapper").vgrid({
				easeing: "easeOutQuint",
				time: 800,
				delay: 60,
				selRefGrid: "#grid-wrapper div.x1",
				selFitWidth: ["#container", "#footer"],
				gridDefWidth: 285 + 15 + 15 + 15,
				forceAnim: 1
			});
		};
		
		setTimeout(setGrid, 300);
		setTimeout(function() {
			$('#header').hide().css("visibility", "visible").fadeIn(500);
		}, 500);
		
		$(window).load(function(e){
			setTimeout(function(){ 
				// prevent flicker in grid area - see also style.css
				$("#grid-wrapper").css("paddingTop", "0px");
			}, 1000);		
		});
		
		var lastShown = "";
		
		function showNew(className) {
			if (lastShown == className) {
				hideLast();
			} else {
				hideLast();
				showClass(className);
			}
		}
		
		function hideLast() {
			if (lastShown == "") {
				return;
			}
			$(lastShown).hide("slow");
			lastShown = "";
		}
		
		function showClass(className) {
			$(className).show("slow");
			lastShown = className;
		}
		
		// Start editing Menu bar  here
		$("#abt-title").click(function() {
			showNew(".abt-show");
		});

		$("#portfo-title").click(function() {
			showNew(".portfo-show");
		});

		$("#art-title").click(function() {
			showNew(".art-show");
		});
		
		$("#life-title").click(function() {
			showNew(".life-show");
		});
		// Menu bar editing ends here
		
	}); // end of document ready
})(jQuery); // end of jQuery name space 

//]]>
</script>

</head>

<body <?php body_class();?>>

<noscript><p class="caution aligncenter">Enable Javascript to browse this site, please.</p></noscript>

<div id="container">
	<div id="header">
		<div id="header_text"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>	</div>	
		<?php get_sidebar(); ?>
	</div>

6 Jörg Kruse

Was ich nicht verstehe: die Doctype-Angabe steht in der header.php, die php der Startseite hat das alles gar nicht drin.

Die Wordpress-Funktion get_header() ruft die Datei header.php auf

Wenn das div#container in allen Seiten erscheinen soll, ist die header.php wohl auch der geeignetere Ort für einen Einbau - z.B. direkt nach dieser Zeile:

<body <?php body_class();?>>

7 Finn

Was ich nicht verstehe: die Doctype-Angabe steht in der header.php, die php der Startseite hat das alles gar nicht drin.

Die Wordpress-Funktion get_header() ruft die Datei header.php auf

Ja, sorry - da hab ich mich mißverständlich ausgedrückt. Das weiß ich, ich habs ja selbst geschrieben :-)

Kurz zur Verdeutlichung:
Das Wordpress-Theme hat standardmäßig eine index.php als Startseite, auf der die jeweils letzten Posts erscheinen (blogmäßig eben), so wie hier (das ist das Ursprungstheme, welches ich abgewandelt habe).

Will man aber nicht die letzten Posts auf der Startseite, sondern eine "statische" Seite haben (statisch nur deshalb, weil sie sich nicht permanent ändert wie bei einem Blog, nicht auf die Scriptsprache bezogen), muß man selbst eine home.php schreiben. Dieses ist meine:

<?php /*Template Name: xy*/
?>

<div id="container" style="width: 990px; ">
	<?php get_header(); ?>
    		<?php dynamic_content_gallery(); ?>
         <?php get_footer(); ?>

</div><!-- /container -->

Das heißt ich wollte eigentlich nur die gleiche Anordung der einzelnen CSS-Container auf dieser Startseite wie auf den anderen Seiten, sowie den Header (=das Menü), den Footer und die Dynamic Content Gallery haben.

Wenn das div#container in allen Seiten erscheinen soll, ist die header.php wohl auch der geeignetere Ort für einen Einbau

Ich habe dann über Firebug geschaut, worin die einzelnen Teile (Header etc.) "eingepackt" sind und das war der div#container. Das div#container ist schon überall eingebaut, das war schon vorgegeben. Ich wollte nur, dass Header, Footer und Gallery von der Positionierung so erscheinen wie die anderen Seiten und habe die Teile daher in den div#container gepackt, weil ich dachte, so "rutscht" alles in die richtige Position.

Funktioniert ja auch mehr oder weniger, bloß eben nicht im IE - und da der div#container in der CSS mit "max-width" definiert ist, dachte ich, es liegt vielleicht daran...

8 Jörg Kruse

Momentan liegt div#container außerhalb des HTML-Dokuments, so dass es nicht verwunderlich ist, dass der IE dieses Element ignoriert. Dass die anderen Browser die Seite wie gewünscht anzeigen, ist hier eher Glücksache. Es handelt sich hier nicht um einen kleinen, sondern gravierenden HTML-Fehler. Ein <div> darf nur innerhalb von <body> vorkommen

Wenn du das Div nur auf der Startseite benötigst, könntest du es folgendermaßen in die header.php einbauen (ungetestet):

<body <?php body_class();?>>

<?php if ($_SERVER['REQUEST_URI'] == '/') { ?>
<div id="container" style="width: 990px; ">
<?php } ?>

<noscript><p class="caution aligncenter">Enable Javascript to browse this site, please.</p></noscript>

... dann erscheint es regelkonform nach dem öffnenden <body>.

Analog sollte das Div vor dem </body> in der footer.php geschlossen werden

<?php if ($_SERVER['REQUEST_URI'] == '/') { ?>
</div><!-- /container -->
<?php } ?>

9 Finn

So, jetzt komm ich endlich dazu, das auszuprobieren. Habe es wie von dir vorgeschlagen eingebaut, und.. es scheint zu funktionieren! Ich trau diesen ganzen Browsern ja eh nie so ganz.

Das einzige, was mir noch auffällt, ist folgendes:
Wenn man auf eine Unterseite, z.B. "portfolio / landscape" geht, rutscht im IE erstmal der gesamte Content ganz nach links, korrigiert sich dann aber selbst wieder und platziert sich korrekt.

Mit dem Problem befasse ich mich später (oder ich lebe damit), erstmal will ich jetzt das Design abschließen, noch ein Logo entwerfen und die Fotos reinladen. Wird Zeit, dass das mal fertigwird ;-)

Danke für deine Hilfe, ich bin bestimmt bald wieder da ;-)

Gruß, Finn

nach oben

Seitenanzeige im IE vs. FF, Chrome, Opera...

Beitrag schreiben (als Gast)