Hi All, I am in need of some help and I am not sure where to turn as I am totally stumped. I am in the progress of wrapping up a new area on my website. I am having issues with the way the new page looks in IE and a few other browsers. I figured I could attempt to run the xhtml validator at w3.org and see if I could nail the issue down. The url in question is http://www.dnlodge.com/tools The text below the actual link to each too appears "shifted" down and the <p> code I am using for this text appears to not be valid. I am not sure what to do, because when I remove the <p>'s the text becomes very large and doen't fit into the template. I am at my wits end and I really need some advice. Is anyone willing to point me in the right direction? Thanks!!
I would take a look at your style sheet settings for the page. I reviewed your code briefly and couldnt really tell which style sheet your were using? Set up borders in your style sheet to see how the page is laying out. This will help you determine what needs to be changed.
Hi iProx, when you say "the text below the actual link" i'm not sure to where your actually reffering to here on your page, so I can't help exactly with that. OK, on passing your site through the validator you can fix most of these problems simply. For your site to be valid XHTML: - You must give all your images the ALT tag, so something like: <img src="yourimg.gif" alt="description of pic" /> - Spaces must be self encolsed, as everything in XHTML must be closed. So your <br>, should look like <br /> - And lastly the problem with your <p> is because you have put it inside a SPAN. A Span is an inline element, where a P is a block element. You cannot put block elements inside inline elements. An example of a block element would be a DIV, so you could replace the Span for this. - The rest of the problems are because you've either closed one DIV to many or you've left one open, I haven't looked properly but it's a likley cause with mismatches. All of the above are minor errors to be honest but on taking my advice they'll get you through the validator. As with your spacing problem, i'm not sure what part of your page your on about so I can't help exactly. But take these points on board: Padding and Margin adds space around an element, padding is space inside the element and margin is space around the element, and the border is in-between the two. Different browser set the default margin and padding for some elements like P to different values, so you may want to reset this like so: p { margin: 0; padding:0; } or change the value to something you like.
You can use html tidy to make your code tidy & clean. It will not look like a mess code. It improves the code quality, automatically improve the code.