Horrible rendering in IE 7/8

[afish674]

I've just been using http://netrenderer.com/index.php to preview my site in IE 7&8 and it looks a mess! I'm lost as to how to get it to render things in the correct places, any help as to what the issues are and how to solve them massively appreciated! http://lovespreading.co.uk - Renders fine in IE9, Firefox & Chrome.

[Ingolme]

Internet Explorer 9 has Internet Explorer 8 and 7 rendering engines integrated, which you can access in the developer tools. The first problem I find is that you have <div> elements inside an <a> element, which isn't allowed and I can't predict how it would be rendered. The validator also shows that you have <h6> elements as direct children of <ul> elements. If you want a hyperlink to be a box, you should use CSS display: block. Hyperlinks can only contain inline elements, you can use <span> which is inline and give it display: block as well.

[afish674]

Hi Ingolme, Thanks for bringing up the fact you can render the older IE's within 9. Thats VERY useful! I corrected the nested list elements, although it didn't fix anything, I couldn't find where you referred to a div inside an a, what was the element called? I found that the source of my problems was the fact the document was HTML5. I used the HTML5 boiler plate (http://html5boilerplate.com/) as a template for my code but when I uploaded it to the server I neglected to also upload the modernizr JS file and update the link in my document. Subsequently anything contained in an HTML5 element broke in IE7/8 because of the lack of support for HTML5 tags. I changed my doctype and updated the elements, this fixed the problem. There are however still a few of things that I don't understand.

1. The 2 validation errors that remain.
2. Why the main menu doesn't display on one line.
3. The "Jam of the month" renders with less margin or padding in IE7

Edited September 18, 2012 by afish674

[Ingolme]

Internet Explorer 7 and 8 support HTML 5 tags if you use a bit of Javascript to create an element, and use CSS to give them a default block style. The problem I mentioned is here and it's exactly what the validator is referring to. You have two <div> elements inside an <a> element.

<div id="logo" class="shadow twistLL paper"><a href="http://www.lovespreading.co.uk">				<div id="logo-pinl" class="pin"></div>				<div id="logo-pinr" class="pin"></div>

[afish674]

If you want a hyperlink to be a box, you should use CSS display: block.

Do you mean applying CSS:Block to the anchor element as it was would validate correctly? I took the div elements out of the anchor element to fix it, as I'm not too fussed about the pin images not being part of the link, I'm just curious for future reference. Cheers! Edited September 19, 2012 by afish674

[Ingolme]

No, a <div> element can never be inside an <a> element under any circumstance. Neither can a variety of elements, such as <p> or <h1>.It is valid to put a <span> inside the <a>. You can style the <span> elements as blocks if you want to.

[afish674]

Okay, thanks.