Hi,

Hope someone can help me out. I have a problem with my website (actually 134 problems) When I use Firefox it looks fine, but with I.E. the layout is all over the place. I think it is only on the home page, the product pages seem ok. I checked the markup with W3C Markup Validation Service and the report says I have 134 errors and 22 warnings. I am having trouble understanding the report. Does anyone know if there is a tutorial around that explains what they say in the report ? My website is at www.lannacharm.com

Thanks in advance, Mickmac

Your site looks fine in opera. A lot of those errors are due to tags being in all caps. I just scimmed the report but it looks like that majority of the errors, other than the caps, are things like leaving out alt tags for images and not properly closing a tag ( > instead of /> ). Fix those minor things and then that should simplify things.

Thanks NullPointer,

That's very reassuring, but I may have to get someone to advise me before I go changing anything in there, don't want to create any more problems. Might be able to find a tutorial somewhere to help me. Thanks again for the reply,
Mickmac

The errors, many of them, are happening because you are using an XHTML doctype and your code is not following all of the rules for XHTML. If you're going to use XHTML, then ALL tags MUST be closed, including meta, link, br and img tags. That means closing the tag (as noted above) with a slash before the closing > - like this :

<meta name="verify-v1" content="5Z+G0cgVCQt9utER3XrnUWxaPE9ykJSVhmUraQrdW To=" />

You have invalidly nested code:

<div id="minicart"><a href="/cart" title="Your Shopping Bag is Empty!"><span class="text off">Your Shopping Bag is Empty!</span>
<div id="bag">0</div>
</a></div>

You can NOT wrap a block level element, such as a div, inside an inline element, in this case, the <a></a>. You also cannot do this:

<a href="/products/mango-wood-vase-3" title="Click here to View this Product"><img src="http://static2.shopify.com/s/files/1/0001/0607/products/p1030840_small.jpg?1236416665" />
<p class="desc">Mango Wood Vase</p>
</a>

Again, you're wrapping a <p> inside an <a> - not allowed. Put the link INSIDE the <p></p>.

There is no such thing as alt TAGS, they are ATTRIBUTES, and yes, in XHTML if you MUST define an alt ATTRIBUTE for EVERY image, even if it's a null, like this: alt="" - though that's not recommended if the image is not just decorative.

There is a tutorial on XHTML here: http://www.w3schools.com/Xhtml/

Other things:
When you float a <div> you MUST define a width - so you need a width on #main-content-side-border, #side, #home-page-intro, and any other's you've floated w/o widths.

The lack of widths WILL cause the float-drop you're seeing in IE. It is also caused because your widths do not add up when you also add in the margins and padding you've added on TOP of the box width. Remove the padding on #main and it will pull up where it belongs.

Hi LadynRed,

Thank you very much for your reply. You have saved my day.
I think most of the errors occurred because I have been adding HTML code to the site and not checking it with I.E. as I go, (I only use Firefox) and it has clashed with the XHTML.
What I don't understand is why code such as :

<div id="minicart"><a href="/cart" title="Your Shopping Bag is Empty!"><span class="text off">Your Shopping Bag is Empty!</span>
<div id="bag">0</div>
</a></div>

is not right because I have not touched it, and it was part of the site when it was first built by a good website designer. I am sure the site used to look ok in I.E. before. How should a section of code like that be written ? I am not sure what you mean by : "You can NOT wrap a block level element, such as a div, inside an inline element, in this case, the <a></a>."

As far as the closing tags go, I should have no trouble adding a / before the >.

And one last thing, regarding the code :

<a href="/products/mango-wood-vase-3" title="Click here to View this Product"><img src="http://static2.shopify.com/s/files/1/0001/0607/products/p1030840_small.jpg?1236416665" />
<p class="desc">Mango Wood Vase</p>
</a>

That is something I have not played with, how should it be written ? Not sure what you mean by : "Again, you're wrapping a <p> inside an <a> - not allowed. Put the link INSIDE the <p></p>."

Thank you again with your help, and hoping you have time to answer my questions here. I want to learn how to fix these errors myself, and not have to ask others to help me out all the time. Hope one day I can help someone out with the same problem.

Mickmac

and it was part of the site when it was first built by a good website designer.

Maybe a good designer but obviously crap at coding

inline elements, block elements

block level elements should NOT be inside inline elements, inline element can contain other inline elements of course. Block elements make up the structure and flow of a document and can contain both block and inline elements.

thanks mickmac i also had same problem but now i solve now
thanks alottttttttttts

I wish I could say the same, I am still trying to understand the Validation Report. Some of it is easy but I have a lot to learn about coding.
Glad you had success though, good luck,
Mickmac