Template issues w IE 6/7

Internet Explorer 6 is notorious for being odd and difficult CSS rendering wise but having a website that is XHTML valid helps.

At the moment your blog has 100 errors and 5 warning. Try fixing those and see if it fixes the sidebar output on IE6/7.

Thank you for the reply. How come it is showing errors for code that was generated by the WP “visual” editor buttons (for paragraph, underline, etc)?

Also, I ran some popular blog URLs through the validator and found that most of them had like 200+ errors. How many errors should be “expected”, if you will?

Thanks again.

Also, I ran some popular blog URLs through the validator and found that most of them had like 200+ errors. How many errors should be “expected”, if you will?

It’s just a tool and XHTML valid websites usually look the same or close to the same on different browsers. Different blogs care more or less

A blog not being XHTML valid may still render perfectly but still have lots of validation errors. That’s fine as long as you get the look you want.

In your case, IE6/7 looks bad, Safari (I’m guessing) on your Mac looks good. And on my XP laptop with Firefox it looks good also.

The problems begin with your template not being valid xhtml; it’s got missing alt tags, style sheet calls out of place, an out of place doc type, etc. Your Flicker badge code is a big problem, too.

Other problems come from WordPress putting in extra paragraph calls, but those can be fixed with experimenting with your editor.

If you want a site that validates, you have to start with a theme that validates, and then work from there if you modify the theme. If you want a theme to look the same in IE6 and 7 as well as Mac Safari and Firefox, lots of times you need to develop and test a separate style sheet for those browsers, and then have it select itself with conditional comments for each browser.

After fixing 62 of the 100 xhtml errors, and validating the css, I still have the following, for ie 6 and 7:

https://browsershots.org/screenshots/ec88e72c401d62921d2f2e2733c9f019/

https://browsershots.org/screenshots/83503697fea3f557bc8aee4555042478/

The original template had spacer images and I am wondering if those might help resolve the problem…I removed all of them because I thought it was a nuisance to have images everywhere I could just specify width/height.

Thanks,

Jennifer

I’ve found one can’t trust browser shots or anything other than a real, native version of IE. I use IE under VMware on a MacBook for testing, and that’s the only way I was able to develop reliable IE6 style sheets and make sure conditional comments work. I only need one or two CSS calls in those style sheets, but they clean up bad spacing and margins that are off in IE6.

If you want spacers, you can make them with CSS. Some people don’t like spacers at all, but I use them. A CSS spacer means a browser isn’t downloading a graphic image.

CSS:

.spacer
{
margin: 15px 0 0 0px;
}

.spacer2
{
margin: 25px 0 0 0px;
}

HTML:

<p class="spacer" />  or <p class="spacer2" />

Change the margins for different spacing amounts.

Use validator.w3.org for validating your page and read the errors and that will tell your everything. Once a page is valid, then you can check in IE for the way the page renders. But youy’re going to have to edit the code of your template directly to fix the code that doesn’t validate.

Use https://validator.w3.org to check your page and you’ll see what I mean.