WordPress › Support » IE problem only on SOME pages, ok on Safari and Firefox

rcarbaugh
Member
Posted 1 month ago #

Using Delicate theme, I modified the standard page to delete comment function, etc. Nearly all of my pages on my site use this "noposts" page template. It has been fine for over a year now. On my Mac, it is still fine. However, last week a helpful surfer sent me a screenshot of a page on his PeeCee, and there was a huge gap between the header and the content. Sidebar was okay. I had some PeeCee friends check it out, and some of the pages had this anomaly, while some did not, all using the same page template and CSS.

I am puzzled. I used the Validator.w3.org site, and it came up with similar errors on both pages below. Honestly, I don't know what most of those errors mean, nor do I know how to fix them, since WP and the theme make the majority of the code. Point is, why on some pages, and not on others?

Page with problem: here

Page without problem: here

Any help would be really appreciated.
rcarbaugh
songdogtech
Member
Posted 1 month ago #

Mostly what you've got is a glitch in header.php. This bit of code <div id="container"> is at the top of header.php, where it shouldn't be and where it whacks IE's display. Fix that, and many if not all of the valdiation errors will go away. If not, the validation errors will be easier to fix. header.php should start with <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

rcarbaugh
Member
Posted 1 month ago #

songdogtech:
Thank you for this. My header.php file does actually begin with that code, but the <div id="container"> code is at the top of the page template, BEFORE it calls up the header. I have commented it out now, and it still looks okay on my Mac, hopefully it looks okay on IE now as well.

Here is the page template that I use mostly. It is a modification of the main page template. You can see that I have commented out several sections, primarily because I am nervous about deleting those sections in case I need to get back to them.

<?php
/*
Template Name: noposts
*/
?>
<!--	<div id="container"> -->

<?php get_header();?>

<div id="content">
	<div class="left"><div class="lpadding">
		<?php get_sidebar(); ?>
	</div></div>
	<div class="right"><div class="rpadding">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

		<div class="title">

			<h1><a href="<?php the_permalink() ?>" target="_self"><?php the_title(); ?></a></h1>
		<!--	<h4><?php the_time('F j, Y'); ?></h4>-->
			<div class="clear"></div>
		</div>

		<?php the_content(__('(more...)')); ?>
		<div class="clear"></div>

<!--		<div class="tags"><?php _e("Author: "); ?><?php the_author() ?><?php _e(" - Categories: "); ?> <?php the_category(',') ?><?php _e(" - Tags: "); ?><?php the_tags('', ', ', ''); ?></div>
-->
	<!--	<?php comments_template(); // Get wp-comments.php template ?> -->

	<!--	<?php endwhile; else: ?> -->
<!--		<p><?php _e('Sorry, no posts matched your criteria.'); ?></p> -->
<!--		<?php endif; ?> -->

<!--	<?php posts_nav_link(' — ', __('&laquo; Older Posts'), __('Newer Posts &raquo;')); ?> -->

	</div></div>
	<div class="clear"></div>
</div>
</div>
<?php get_footer(); ?>

rcarbaugh

songdogtech
Member
Posted 1 month ago #

It's good practice to comment out code rather than delete it, like you say, in case you need it later. Go ahead and delete  from your noposts template, but get a fresh copy of your theme and find out where that div goes, as it is an important part of the theme code in noposts, as well as other files in your theme. The message store page is still whacked in IE.

rcarbaugh
Member
Posted 1 month ago #

I upgraded to the newest version of the theme, and I believe the issue gone. So that problem is solved. The new theme does not have the container div at all.

The menu bar, however, is no longer anchored to the site, but the left edge of the window. So, it is floating in relation to the site. Again, only in Internet Explorer. On Safari it is fine.

Here's the css for the menu bar. I commented out the float:left command, because that caused it to float on the Mac as well. However, it didn't settle the IE issue. Any code that you see here that would cause IE to float the bar?

Is it the position:absolute line? It is so unpredictable when it works on my Mac, and yet is whacked on a peecee.

#suckerfishnav {
    background:#9C1F1B url("../multi-level-navigation-plugin/images/suckerfish_red.png") repeat-x;
    font-size:18px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:900px;
    }
#suckerfishnav, #suckerfishnav ul {
    <!-- float:left; -->
    list-style:none;
    line-height:30px;
    padding:0;
    border:1px solid #aaa;
    margin:0 auto;
    width:900px;
    }
#suckerfishnav a {
    display:block;
    color:#dddddd;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    <!-- float:left; -->
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:101px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:99px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:80px;
    font-size:10px;
    color:#dddddd;
    }
#suckerfishnav li ul ul {
    margin:-19px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:#9C1F1B;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#dddddd;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#dddddd;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#dddddd;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
<!--    background:#846429; -->
    background:#444444;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#DA0909;
    }

songdogtech
Member
Posted 1 month ago #

Suckerfish is a pretty foolproof menu, so I'd leave the float in there and not edit the menu CSS. The problem is somewhere else. I'd check with the theme author; maybe they have a forum at their site.

Also, try deactivating plugins and checking in IE. Maybe the CSS for a plugin is overwriting the menu CSS.

Reply

You must log in to post.

WordPress.org

Forums

IE problem only on SOME pages, ok on Safari and Firefox (6 posts)

Reply

About this Topic

Tags

Code is Poetry