Problems with IE

[etoare]

Hi everyone!
I have a "little" problem with how my webpage is rendered in IE. It looks alright in Firefox, but when I viewed it in IE i litterary fell from my chair
Would it be possible for someone to point out what's responsible for so much garbage in IE?

Check it out http://www.peoplecollector.co.uk/

[Lchad]

First thing you need to do is tidy up your code.

<div class="ArticleFooter">
<a href="http://www.peoplecollector.co.uk/admin/37/">Permalink</a>

&bull;
<a href="http://www.peoplecollector.co.uk/admin/37/#respond" class="comments-link" title="Comment on test post 1">No comments</a> </div>

IE will often render spaces in code as spaces. In the area that I highlighted in PINK you have tons of extra spacing in the html.

You also have issues in FF. It appears that your div class called article header needs to be sized differently or margin added. It's very different in width than the div class called Article body.

Start there and see what happens.

[etoare]

I got rid of all the unnecessary indents and made sure that lines do not end with spaces and it's still the same
And about the ArticleHeader and ArticleBody - they seem to have the same size, checked with WebDev extension in FF.
I'm clueless about what to do with that garbage in IE :/

[Lchad]

delete the spaces in this one too

<a href="http://www.peoplecollector.co.uk/admin/40/#comments" class="comments-link" title="Comment on test post 2">Comments (8)</a></div>
<div class="ArticleFauxFooter">
<p>

You have two of those to fix. Too many spaces between the class and the <p>

See screenshot attached:

Change ALL your spans to <p></p> and give the p some css.

<div class="ArticleHeader">
test post 2<br />
<p>Written by Maciek under <a href="http://www.peoplecollector.co.uk/archive/blog/blog/" title="View all posts in blog" rel="category tag">blog</a></p>
</div>

Class Article and Class ArticleHeader BOTH have the same background image. Delete one of them. One is messing up the other.

This image appears to be wider than the div that it is nesting in.

Code: Select all

<p><img src='http://www.peoplecollector.co.uk/wp-content/uploads/2007/05/testimage.jpg' alt='testimage' /></p>

Your rightcolumn div is what is messing up things in IE.

I'm not sure why... and I've sort of run out of time.
I would suggest you do a two column layout using floats instead of margins.
Check out Moojoo's layouts. http://www.newguyinennis.com/samples/layouts/

[etoare]

Finally found what messed up the IE rendering It was the Image that you pointed out was too wide :bighug: Thank you! :w00t2:

I double checked the background images for Article and ArticleHeader and they are different.
And now I'm going to change those spans and I promise i'll look into the other layout :P

thanks for your help!

[Lchad]

Oh that's GREAT!!! Glad I could help!