I’ve started customizing my website recently and it looks alright in all browsers except internet explorer 9. For some reason I get extra header (which is blank) from nowhere. I’m really struggling to find the issue, I tried looking for errors in fire bug, but everything seems to be ok. Also I used compatibility view in internet explorer 9 which shows how website looks in earlier versions of internet explorer and the issue did not accrue there, I suspect it only appears in ie9 maybe ie8.
if you visit my website from ie9 and other browser e.g. chrome you can see the issue clearly. I have no idea about what is causing it, I assume it is something to do with html/css , but it could be something in php I use to get articles.
PHP
$sql = mysql_query("SELECT * FROM stories WHERE showing = 1 ORDER BY st_date DESC LIMIT 10") or die (mysql_error("There was an error in connection"));
$storyDisplay = "";
while($row = mysql_fetch_assoc($sql)){
$story_id = $row["id"];
$story_author_name = $row["st_auth"];
$date = $row["st_date"];
$convertedTime = ($myObject -> convert_datetime($date));
$whenStory = ($myObject -> makeAgo($convertedTime));
$story_title = $row["st_title"];
$story_category = $row["st_category"];
$the_story = $row["st_body"];
$verified = $row["showing"];
if ($verified = 1) {
$verified_class = 'class="verified" title="Good Post!"';
} else {
$verified_class = '';
}
//Create random Style
$style_class = array("st_style1","st_style2","st_style3","st_style4");
$random_class = array_rand($style_class, 1);
$div_class = $style_class[$random_class];
//Create random image
$topic_img = array("s1","s2","s3","s4","s5","s6","s7","s8","s9","s10","s11","s12","s13","s14","s15");
$random_img = array_rand($topic_img, 1);
$the_img = $topic_img[$random_img];
$storyDisplay .= '
<div class="'.$div_class.'">
<div class="st_header">
<div class="st_info">
<a href="#"><img class="st_image" src="images/smile/'.$the_img.'.png" alt="image of '.$story_author_name.'"/></a>
<div class="st_title"><a href="http://inelmo.com/view_story.php?id='.$story_id.'">'.$story_title.'</a></div>
<div class="st_auth"><a href="#">by: '.$story_author_name.'</a></div>
</div>
<div class="st_vote">'.$pulse->buttons($story_id).'</div>
</div>
<div class="st_body">
<div class="st_container">
<article>'.$the_story.'</article>
</div>
</div>
<div class="st_footer">
<ul>
<li><time '.$verified_class.' datetime="'.$date.'">'.$verified_img.''.$whenStory.'</time></li>
<li class="st_category"><a class="st_categorya" href="#">'.$story_category.'</a></li>
<li class="st_id"><a class="st_ida" href="#">'.$story_id.'</a></li>
<li class="st_comments"><a class="st_commentsa" href="http://inelmo.com/view_story.php?id='.$story_id.'">Comments</a></li>
</ul>
<div class="st_social">
<div class="addthis_toolbox addthis_default_style"
addthis:url="http://inelmo.com/view_story.php?id='.$story_id.'"
addthis:title="'.$story_title.'"
addthis:description="'.$the_story.'">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
</div>
<br />
</div>
</div><br />
'; // End $storyDisplay
}// Close main while loop
w3c validator gives 12 errors, mostly unallowed child relations and, therefore, wrongly opened/closed tags. You might start working on that:
http://validator.w3.org/check?uri=http%3A%2F%2Finelmo.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0