Header blog niet goed zichtbaar in IE8

Status
Niet open voor verdere reacties.

Stormbreaker

Terugkerende gebruiker
Lid geworden
16 nov 2009
Berichten
1.481
Typisch IE8 probleem wederom: mijn headertekst van Februariblog.nl is niet goed zichbaar in IE8 zonder compatibility view.
Dan is de koptekst verder naar onderen dan bij FireFox en Chrome.
En de kopfoto lijkt wel meer dan de 258 px breedte die hoort.

Is dit via andere CSS codes betreft padding op te lossen?
Ik neem aan dan zelfs na mijn oproep niemand op de compatibility view button klikt en als ik de koptekst niet hoog zet hij standaard gaat overlappen.
Wel jammer, want een hoge koptekst is niet bepaald mooi...
 
Hoi Stormbreaker,
Je kunt (zeiden ze en zeggen ze bij Microsoft) ook vanaf de site zelf de compatibility view voor IE8 forceren, met:
HTML:
<meta http-equiv="X-UA-Compatible" content="IE7" /> of
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Het verschil zit 'm in het al/niet oproepen van de Standards mode of de Quirks mode.
Je zou ze allebei eens kunnen proberen.
  • Er zijn ook contra-indicaties: het werkt niet altijd. :confused: Zie bv. dans.blog.
  • En het blijft natuurlijk een raar lapmiddel: IE8 zou het gewoon moeten doen!
Maar er vallen ook wat andere dingen te proberen. Ik signaleer:
  • De site heeft een Doctype "XHTML 1.0 Transitional". Nu was het transitional doctype bedoeld als "overgang": om browsers te kunnen laten omgaan met webpagina's die in ouderwetse (niet standaard) html geschreven waren. Dat kwaad woekert nogal voort, maar voor nieuwe websites wordt altijd sterk aanbevolen het Strict doctype te nemen: dat zijn de goede standaarden! (zie bv. dit artikel van Roger Johansson, de man achter www.456bereastreet.com).
  • Helpt het, als je je Doctype naar Strict verandert (en evt. de daarvoor nodige wijzigingen toepast)?

  • De html heeft fouten: 41 Errors, zegt de html-validator. Om verschillende redenen zijn html-fouten niet jofel. Eén daarvan is, dat verschillende browsers (en: verschillende browser-versies!) er verschillende foutafhandelings-procedures op na houden. Voor fout-afhandeling bestaan géén standaarden! - Dat betekent dat als de ene browser(versie) een html-fout "goed corrigeert", de andere browser dezelfde fout op een andere manier kan afhandelen, en een compleet ander resultaat kan geven.
  • Daarom: helpt het, als je alle html-fouten wegwerkt?
Conclusie: als het forceren via de <meta> tag lukt, kan je daarna op je gemakje met het doctype en de html-fouten aan de slag. :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Moeten die meta tags in een html document?
Welk document als ik een WP blog heb?
 
Ja, zo'n meta-tag moet er op elke html-pagina in.
Hij moet in de <head> van elke pagina gefrommeld worden, maar hoe dat in WordPress gaat, weet ik niet.

Hopelijk kan iemand anders dat vertellen: hallo iemand anders?! :)

[edit]Hm, ik lees hier net "You cannot add meta tags to a WordPress.com blog" (zie hier, laatste reactie), maar of dat waar is, kan ik niet overzien. :confused: [/edit]
 
Laatst bewerkt:
Ja, want in WP is het wel mogelijk het in berichten te zetten.
Maar is de html code nou met /> of zonder de slash en spatie?
Het laatste toch hopelijk?
 
Het moet blijkbaar met [spatie]/>
Maar als ik het in header.php zet, waar het kan, werkt het niet.
 
Als het xhtml is, moet het inderdaad met [spatie]/>.
Werken allebei de versies niet?
 
Oho - waarschijnlijk is de header.php de header binnen de <body> van de pagina, en niet iets dat met de <head> te maken heeft!
 
PHP:
<!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">

<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="X-UA-Compatible" content="IE7" />
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> <?php } ?> <?php wp_title(); ?></title>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<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 0.3" href="<?php bloginfo('atom_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	<?php wp_get_archives('type=monthly&format=link'); ?>

	<?php wp_head(); ?>
</head>
<body><div id="container"><div id="page">










<div id="header">
	 <div id="headerimg"><a href="<?php bloginfo('url'); ?>/"><div class="headertxt"><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></div></a><!-- <?php bloginfo('description'); ?> --></div>
	
<div class="topmenu">
<ul>
	<div class="topmenu_home"><a href="<?php bloginfo('url') ?>" title="Home" >Home</a></div><?php wp_list_pages('depth=1&title_li'); ?>
</ul>
	</div>
</div>
 
Ik zou regel 5 en 6 eens omdraaien, zodat de charset voorop staat - misschien helpt dat ...
 
Kladblok waarmee ik hem bewerkt draait dat dan automatisch weer om zodat het hetzelfde blijft.
 
O.
Maar misschien moet je even op zoek naar waar de missende </div> moet staan die de html-validator aangeeft (e.a. html-foutjes, als je daarbij kunt komen in WP). Wie weet loopt IE8 dan wel in de pas?

(PS: ik heb hier geen IE8, dus kan niet met de css experimenteren.)
 
Voordat ik ga wijzigen: horen achter
PHP:
<body><div id="container"><div id="page">
niet
PHP:
</div></div>
?
 
Ja, in principe wel, maar niet meteen er achter: want ze moeten wel alles van de pagina omvatten.
 
Kan jij dan zeggen waar ze wel moeten in dit document, header.php?
Ik had eerder het volledige php-document al gepost.
 
Op 't laatst staan na de <div id="footer">...</div> wel keurig twee </div>'s voor de </body>. Dat zouden die twee moeten zijn.
De ontbrekende </div> moet dus ergens middenin de pagina zitten.
Maar de pagina-code is niet zo overzichtelijk dat je dat met één oogopslag kunt zien...

Hé, binnen de <div id="footer">...</div> zit een <div class="copyright"> waar ik geen </div> bij zie. Is dat 'm?
 
PHP:
<?php get_header(); ?>
<?php get_sidebar(); ?>

<div id="maincolumn">

	<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>

	<div class="post" id="post-<?php the_ID(); ?>">
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2><div class="postimedata">Posted in <?php the_category(', ') ?> on <?php the_time('F jS, Y') ?> by <?php the_author(', ') ?> &mdash; <?php comments_popup_link('Be the first to comment!', '1 Comment so far', '% Comments'); ?></div>
		<div class="entry">

			<?php the_content('Read more...'); ?>

			<!-- <?php trackback_rdf(); ?> -->

		</div>
		<div class="postmetadata">
<div class="posttextdata"><!--Posted in <?php the_category(', ') ?><br /> -->
<?php edit_post_link('<strong>Edit This Entry.</strong><br />','',''); ?>
<?php _e('Tags: '); ?> <?php the_tags('', ', ', ''); ?></div>
<div class="commentdata"><?php comments_popup_link('No Comments Yet', '1 Comment so far', '% Comments'); ?>  »  <a href="<?php the_permalink() ?>#respond">Write a Comment</a></div><br />
		<img src="wp-content/themes/spring-blossom/images/divider.jpg"></div>
	</div>

	<?php endwhile; ?>

	<?php include (TEMPLATEPATH . '/browse.php'); ?>

	<?php else : ?>

	<div class="post">
		<h2><?php _e('Not Found'); ?></h2>
		<div class="entry">
			<p><?php _e('Sorry, but you are looking for something that isn't here.'); ?></p>
		</div>
	</div>

	<?php endif; ?>

</div>

<?php include (TEMPLATEPATH . '/rightcolumn.php'); ?>
<?php get_footer(); ?>
Dit is uit Index.php, volgens mij het document voor de gedeeltes in het midden.
 
Puf-puf... ik heb alle uitkomst-html van de <?php get_header(); ?> en de <?php get_sidebar(); ?> geordend en gecheckt; daar zit in ieder geval die ontbrekende </div> niet in.

Maar heb je ook een footer.php? En wat staat daarin? Anders komt het missende </div>'je er misschien pas uitrollen als de hele pagina van top tot voorlaatste teen doorgeworsteld is. ;)

Maar ik kwam wel heel wat anders tegen:
HTML:
<div id="headerimg">
	<a href="http://www.februariblog.nl/">
		<div class="headertxt">
			<a href="http://www.februariblog.nl/">Februari 2011 Blog</a>
		</div>
	</a><!-- Weblog over carnaval en Valentijnsdag -->
</div>
Dat is wel heel eigenaardig: een link binnen een <div> binnen een andere link! :D
Ik zou de buitenste link er maar uit slopen.
En ... (ik durf het bijna niet te vragen) ... wat laat IE8 daarna zien? Was die daar per abuis over gestruikeld? Je weet maar nooit!

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan