IE6 CSS Issue?

Hi there,
I believe my site has some CSS issues with IE6, as it was denied from submission to BlogExplosion for the following reason:

I'm using IE7, and don't see a problem, if anyone with IE6 can verify this information for me, and if possible - a solution

http://www.canadian-business.info

 

is there a IE6 standalone anyone is aware of?

 

google.com

ie6 standalone

click click download

iexplore.exe, boom.

 

no it won't install without uninstalling ie7, which i don't want
but i found Microsoft's virtual pc 2007, which supposedly allows a standalone of ie 5, 6.. ps: i'm using vista

 

tredosoft multipleIE even though its buggy as fvck? Dont get msie6 from microsoft.com, look for the standalone version.. theres also one @ evolt

 

do u think you can check my website http://www.canadian-business.info using IE6 (if you have) to see if there is a bug ?

 

Yep theres definitely a problem -- middle content div is thrown off probably because of double margins. If you're floating divs, add display:inline; to fix the double margins in IE6

 

I'm sorry I don't have much idea of what you are saying... The following is the code.. your help's really appreciated....

<?php get_header(); ?>


<?php include(TEMPLATEPATH."/left.php");?>

<?php include(TEMPLATEPATH."/right.php");?>




<div id="content">

<br><center><?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?></center><br>

	<?php if (have_posts()) : ?>

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


				

<p align="center">
<script type="text/javascript"><!--
google_ad_client = "pub-2956021589428038";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "image";
//2007-07-19: Posts
google_ad_channel = "9863301296";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "990000";
google_color_text = "000000";
google_color_url = "455A79";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>		

<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
	<p><b>By <?php the_author(); ?></b> | <?php the_time('F j, Y'); ?> </p>
		<div class="postspace2">
	</div>	



					<?php the_content('Read the rest of this entry &raquo;'); ?>


			<?php if(function_exists('wp_email')) { email_link(); } ?> 
				<p><b>Topics:</b> <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
	<div class="postspace">
</div>

<p align="center">
<script type="text/javascript"><!--
google_ad_client = "pub-2956021589428038";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_cpa_choice = "CAEaCKeg_fuNu1hKUAc";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "990000";
google_color_text = "000000";
google_color_url = "455A79";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>	


		<?php endwhile; ?>

<!--
                <?php next_posts_link('&laquo; Previous Entries') ?>
		<?php previous_posts_link('Next Entries &raquo;') ?>
-->

<center>
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
</center>
<br><br>

<center>
<!-- Begin BlogToplist voting code -->
<a href="http://www.blogtoplist.com/vote.php?u=14217" target="_blank">
<img src="http://www.blogtoplist.com/images/votebutton.gif" alt="Top Blogs" border="0" /></a>
<!-- End BlogToplist voting code -->

<a href="http://www.zimbio.com/member/bhaque"> <img src="http://www.zimbio.com/images/badges/badgeBlue.png?u=bhaque" border="0" /></a>

<a href="http://www.blogarama.com/"><img src="http://www.blogarama.com/images/button.gif" border="0" alt="Blogarama - The Blog Directory"></a>

<a href="http://www.linkwith.us" id="R0"><img src="http://www.linkwith.us/images/linkwith.gif" border=0 alt="Link With Us - Web Directory"></a>

<a href="http://www.romow.com/"><img src="http://www.romow.com/banners/romow80x15.gif" alt="Romow Web Directory - Online Internet Marketing Center" border=0></a>

<a href="http://www.blogexplosion.com/index.php?ref=bhaque"><img src="http://banners.blogexplosion.com/button6.gif" width=80 height=15 border=0></a>

<a href="http://www.xwebdirectory.com/"><img src="http://www.xwebdirectory.com/images/xwebdirectory.png"  alt="X Web Directory - Submit Web Site" border=0></a>

<a href="http://www.blogdirs.com">Blog Directory</a>

<a href="http://www.blogcatalog.com/directory" title="Business Blogs - Blog Catalog Blog Directory"><img src="http://www.blogcatalog.com/images/buttons/blogcatalog5.gif" alt="Business Blogs - Blog Catalog Blog Directory" style="border: 0;" /></a>

<a href="http://www.blogdup.com"><img src="http://www.blogdup.com/imgs/blogdupbutton.gif" alt="Blogdup Blog Directory" width="80" height="15" border="0" /></a>


</center><br>

	<?php else : ?>

		Not Found
		Sorry, but you are looking for something that isn't here.
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>

	<?php endif; ?>


</div>
	

<?php get_footer(); ?>

PHP:

 

Suggestion, whatever you're floating in the CSS

div {
float:left;
margin:0 20px 0 0;
}

add a display:inline; if you have margins on the left/right and that should fix it for ie6.. remember any floated element with left/right margins.

 

man its freakin wordpress.. this stuff is so hard to edit... if even possible

 

i think i solved a major CSS problem with one of the plugins. you mind checking the site http://www.canadian-business.info with IE6 to see if its working properly now? -thanks

 

You shouldn't be touching the PHP/HTML, you should be touching the css.

 

Yea, I just looked with IE6 and Firefox. The site does looks good on Firefox.. but there is still a problem on IE6.. The middle content is pushed down below the content in the sidebars.. I have ran in to this issue before with certain WP templates... Something (content) in either the sidebar or main content area is probably larger than the div container that holds it..

One time after days of trying to fix, I had to change templates to correct a similar issue with a site.

Boulder

 

Find the div for the content area and put overflow:hidden;, that might be a temporary fix til you can see what's making the container larger than it should be.

 

Well... I would think part of the issue is that it's DIV and class happy - uses properties like 'row' that don't exist in HTML 4 much less XHTML 1.0 tranny... Has 89 validation errors - hardly shocking given the piss-poor formatting of the output (which can probably be laid squarely in the lap of the site being hacked together with turdpress generation)

Of course I'd also suggest easing up on the advertising code - if people aren't clicking on the one in your header and the one in your sidebar, they sure as shine aren't going to click on the three that get in the way of the actual page content.

Seriously, if the person who coded this doesn't know what's wrong with:

<center>
<div class="wp-pagenavi">
<span class="pages">Page 1 of 5</span>
<span class="current">1</span>
<a href="http://www.canadian-business.info/page/2/" title="2">2</a>
<a href="http://www.canadian-business.info/page/3/" title="3">3</a>
<a href="http://www.canadian-business.info/page/4/" title="4">4</a>
<a href="http://www.canadian-business.info/page/5/" title="5">5</a>
<a href="http://www.canadian-business.info/page/2/">&raquo;</a>
</div>
</center>
<br><br>

Or even WORSE

<div id="header">
<table rows="2" columns="2" border="0" width="100%">
<tr>
<td>
<h2><a href="http://www.canadian-business.info/">Canadian Business</a></h2>
</td>

<td align="right" rowspan="2" valign="bottom">
<script type="text/javascript"><!--
google_ad_client = "pub-2956021589428038";
google_alternate_color = "D3230B";
google_ad_width = 160;
google_ad_height = 90;
google_ad_format = "160x90_0ads_al";
google_ad_channel = "";
google_color_border = "455A79";
google_color_bg = "D3230B";
google_color_link = "FFFFFF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr>
<tr><td>
<h3>News, Markets and Economy - a Canadian Perspective</h3>
</td>
</tr>
</table>

</div>

They need to pack it in now.

My advice - chuck it all and start over with clean semantic markup.

 

still can't get this thing to work. ughh... help anyone. here's the stylesheet.. there might be some unnecessary code.. i just tried everything

body {
	background: #777 url(images/back.gif) fixed;
	color: #000;
	font-size: 11px;
	font-family: Verdana, Helvetica, Arial, Sans-Serif;
	margin: 0px 0px 0px 0px;
	}
	
a, a:visited{
	color: #990000;
	text-decoration: none;
	border: none; 
	}
	
a:hover{
	color: #D3230B;
	border: none;
	text-decoration: underline;
	}
	
img {
	border: none;
	}

#container { 
	width: 900px;
	background: #fff url(images/bg.jpg);
	text-align: left; 
	margin: 20px auto; 
	border: 10px solid #fff;
line-height: 1.2;
	}
	
#header { 
	background: #D3230B;
	height: 116px;
	padding: 0px 0px 20px 10px;
	}
	
#header h2 {
	color: #ffffff;
	font-family: goudy old style, "Times", verdana, serif;
	font-size: 20pt;
	font-variant: small-caps;
	font-weight: normal;
	margin-top: 55px;
	margin-bottom: 0px;
	margin-left: 13px;
	letter-spacing: 2px;
	}

#header h2 a {
	color: #fff;
	text-decoration: none;
	}

#header h2 a:hover {
	color: #fff;
	text-decoration: underline;
	}

#header h3 {
	color: #F0F0F0;
	font-size: 10pt;
	font-family: georgia, verdana, Sans-Serif;
	font-weight: normal;
	font-style: italic;
	margin: 0px;
	margin-left: 15px;
	}
	
#middlepic {
	position: absolute;
	height: 128px;
	width: 540px;
	margin: 0px;
	background-image: url(images/adam.jpg);
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}

#lpic {
	height: 128px;
	width: 179px;
	background-image: url(images/study.jpg);
	border-bottom: 1px solid #fff;
}

#rpic {
	height: 128px;
	width: 179px;
	background-image: url(images/boat.jpg);
	border-bottom: 1px solid #fff;
}
	
#menu {
	font-family: verdana, "Microsoft Sans Serif", Times, serif;
	font-size: 8pt;
	background-color: #455A79;
	margin-top: 1px;
	width:900px; 
	height:23px;
	border-bottom: 1px solid #fff;
}


#menu ul {
	margin: 0px;
	padding: 5px;
	list-style: none;
	text-align: right;
}

#menu li {
	display: inline;
}

#menu a {
	padding: 5px 15px;
	text-decoration: none;
	color: #FFF;
}

#menu a:active,
#menu a:focus,
#menu a:hover, 
#menu .current a {
	background-color: #D3230B;
}



#content { 
	width: 500px; 
	margin-top: 128px;
	margin-bottom: 20px;
	margin-left: 179px; <!--179-->
	margin-right: 0px; <!--0-->
	position: relative;
	padding: 0px 18px 15px 18px;
	text-align: justify;
display: inline-block;
	}
	
#content b{
	color: #455A79;
	line-height: 14pt;
	}


#content p{
	margin: 0px;
	line-height: 18px;
	padding: 0px 0px 10px 0px;
	margin-top: 5px;
	}
	
#content p img{
	border: none;
	float: left;
	margin-right: 15px;
	margin-bottom: 10px;
	}
#content h1 {
	color: #455A79;
	font-size: 22px;
	font-family: Helvetica Bold, Arial Bold, Verdana, Sans-Serif;
	font-weight: normal;
	padding: 10px 10px 10px 10px;
	line-height: 150%;
	margin: 0px;
	}
	
#content h1 a  {
	color: #D3230B;
	text-decoration: underline;
	}

#content h1 a:hover {
	color: #990000;
	text-decoration: underline;
	}

#content h2 {
	font-family: helvetica, arial, sans-serif;
	font-size: 12px; 
	color: #455A79; 
	margin: 0px;
	line-height: 120%;
	padding-top: 10px;
	padding-bottom: 4px;
	border-bottom: 1px dotted #455A79;
	}
#content h2 a  {
	color: #D3230B;
	text-decoration: none;
	}

#content h2 a:hover {
	color: #990000;
	text-decoration: underline;
	}


#content h3 {
	font-size: 12px; 
	color: #455A79; 
	margin: 0px;
	line-height: 120%;
	font-variant: small-caps;
	padding-top: 10px;
	padding-bottom: 4px;
	margin-bottom: 7px;
	border-bottom: 1px dotted #455A79;
	}
	
#content h3 a  {
	color: #455A79;
	text-decoration: none;
	}

#content h3 a:hover {
	color: #455A79;
	text-decoration: none;
	}

#content ol {
	list-style-type: decimal;
	line-height: 18px;
	margin: 0px;
	padding: 0px 0px 10px 30px;
	}
#content ul {
	list-style: none;
	margin: 0px;
	padding: 0px 0px 10px 0px;
	}
	
#content li {
	margin: 0px;
	padding: 0px;
	}
	
#content ul li {
	list-style: square inside;
	margin: 0px 0px 0px 10px;
	padding: 5px 0px 0px 0px;
	}
	
#content ul li a {
	color: #990000;
	text-decoration: none;
	}

#content ul li a:hover {
	color: #D3230B;
	text-decoration: underline;
	}
	
#arch {
	color: #000;
	}
	
#arch ul {
	list-style: none;
	margin: 0px;
	padding: 0px 0px 10px 0px;
	}
	
#arch li {
	margin: 0px;
	padding: 0px;
	}
	
#arch ul li {
	list-style: square inside;
	margin: 0px 0px 0px 10px;
	padding: 5px 0px 0px 0px;
	}
	
#arch ul li a {
	color: #797979;
	text-decoration: none;
	}

#arch ul li a:hover {
	color: #000;
	text-decoration: underline;
	}
	
blockquote{
	background-color: #F3F3F3;
	margin: 0px;
	margin-left: 15px;
	margin-bottom: 12px;
	padding: 7px;
	width: 420px;
	font-style: italic;
	color: #455A79;
	border: 1px solid #cccccc;
	}
	

.postspace {
	background: #fff;
	width: 500px; <!-- default = 440 -->
	height: 32px;
	margin: 0px;
	padding: 0px;


	}
.postspace2 {
	background: #fff;
	width: 500px;
	height: 0px;
	margin: 0px;
	padding: 0px;


	}
.postspace3 {
	background: #fff;
	width: 500px;
	height: 15px;
	margin: 0px;
	padding: 0px;


	}

#left { 
	color: #000000;
	width: 179px;
	float: left; 
	margin-top: 0px;
	margin-bottom: 20px;
position: relative;
line-height: 1.2;
	}
#left p{
	margin: 0px;
	line-height: 16px;
	padding: 10px;
	}
	
#left h2 {
	color: #fff;
	background: #D3230B;
	font-family: verdana, "Microsoft Sans Serif", Times, serif;
	font-size: 8pt;
	list-style: none;
	padding: 6px;
	margin: 0px;
	margin-bottom: 10px;
	border-bottom: 1px solid #fff;
	}

#left ul {
	list-style: none;
	margin: 0px;
	padding: 0px 0px 20px 0px;
	}
	
#left li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#left ul li {
	list-style: none;
	margin: 0px;
	padding: 0px 0px 0px 0px;
	}
	
#left ul li a {
	display: block;
	color: #000000;
	text-decoration: none;
	padding-left: 12px;
	padding-right: 6px;
	padding-top: 5px;
	padding-bottom: 5px;
	line-height: 12pt;
	}

#left ul li a:hover {
	color: #000000;
	background: #fff;
	}


#right { 
	color: #000000;
	width: 179px;
	float: right;
	margin-top: 0px;
	margin-bottom: 20px;
position: relative;
line-height: 1.2;
	}
	
#right p{
	margin: 0px;
	line-height: 16px;
	padding: 10px;
	}
	
#right h2 {
	color: #fff;
	background: #D3230B;
	font-family: verdana, "Microsoft Sans Serif", Times, serif;
	font-size: 8pt;
	list-style: none;
	padding: 6px;
	margin: 0px;
	margin-bottom: 10px;
	border-bottom: 1px solid #fff;
	}


#right ul {
	list-style: none;
	margin: 0px;
	padding: 0px 0px 20px 0px;
	}
	
#right li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#right ul li {
	list-style: none;
	margin: 0px;
	padding: 0px 0px 0px 0px;
	}
	
#right ul li a {
	display: block;
	color: #000000;
	text-decoration: none;
	padding-left: 12px;
	padding-right: 6px;
	padding-top: 5px;
	padding-bottom: 5px;
	line-height: 12pt;
	}

#right ul li a:hover {
	color: #000000;
	background: #fff;
	}
	
#right h2.widgettitle {
	color: #fff;
	background: #D3230B;
	font-family: verdana, "Microsoft Sans Serif", Times, serif;
	font-size: 8pt;
	list-style: none;
	padding: 6px;
	margin: 0px;
	margin-bottom: 10px;
	border-bottom: 1px solid #fff;
	}

#footer {
	background: #D3230B;
	width: 900px;
	overflow: hidden;
	font-size: 8pt;
	margin: 0px auto 0px;
	padding:  9px 0px 7px 0px;
	text-align: center;
	line-height: 17px;
	clear: both;
	}
	
#footer p {
	color: #fff;
	padding: 0px;
	margin: 0px;	
	}
	
#footer a, #footer a:visited {
	color: #EAEAEA;
	text-decoration: none;
	border: none;
	border-bottom: 1px dotted #eaeaea;
	}
	
#footer a:hover {
	text-decoration: none;
	border: none;
	}

#wp-calendar {
	margin-left: 22px;
	margin-bottom: 10px;
	}

#searchform {
	margin-left: 9px;
	margin-bottom: 0px;
	}
	
#searchform input {
	font-family:"Lucida Grande","Lucida Sans Unicode",Tahoma, Helvetica, Verdana, sans-serif;
	font-size: 9pt;
	text-align: right;
	color: #67717E;
	border: 1px solid #ddd;
	width: 150px;
	margin-bottom: 0px;
	}
	
/* comments */
	
.entry {
	margin-bottom: 12px;
	border-bottom: 1px solid #E3E3E3;
	}	

#s,#submit {	
	background-color:#ffffff;
	border:1px solid #cccccc;
	color:#505050;
	font-size:0.9em;
	margin:0 0 16px;
	padding:4px;
	width:130px;
	}
	
#author {
	border:1px solid #cccccc;
	font-family:Verdana,Tahoma,Arial,Sans-Serif;
	font-size:1em;
	margin:0;
	padding:4px;
}

	
#email {
	border:1px solid #cccccc;
	font-family:Verdana,Tahoma,Arial,Sans-Serif;
	font-size:1em;
	margin:0;
	padding:4px;
}

#url {
	border:1px solid #cccccc;
	font-family:Verdana,Tahoma,Arial,Sans-Serif;
	font-size:1em;
	margin:0;
	padding:4px;
}

#comment  {
	width: 350px;
	border:1px solid #cccccc;
	font-family:Verdana,Tahoma,Arial,Sans-Serif;
	font-size:1em;
	margin:0;
	padding:4px;
}

PHP:

 

Add display: inline; to #left and #right as the others have said.

And I do agree with deathshadow to an extent - you need to validate your code. Though he does discriminate against WordPress a lot when it's the people who have no clue how to even write a Web page who are churning out WordPress themes like toys in a Chinese factory who are to blame.

Where did you get the theme from?

 

I tried that man.... The theme is "ad-clerum" from themes.wordpress.net site..

 

Okay, I've started from scratch with a new theme. Check it out now. Please let me know of your comments / opinions on the new layout; they are more than appreciated. Thanks.