Forum Moderators: not2easy
My website wont validate html but does validate css.
I think I know why it wont validate html tho,
I have inline elements wrapped around block elements. Namely <p> inside <a>, but I cant seem to find another method for using a block as a hyperlink?
Hope I make sense I have only realy become serious with css recently.
Thanks
But I cant really see how this will help validate my HTML, my CSS knowledge is limited perhaps I am missing an important point?
Thanks
One reason is that if you have the correct doctype and your site validates, then the site will be viewed using web standards and makes it more accessible and easier for the search engines to navigate your pages. Now, there's no real *proof* that SEO is increased by using web standards and CSS, but it seems to help and it makes sense that it dies, because the spiders don't have to wade through *anything* but content on your page, and as well all know, "content is king" when it comes to rankings.
However, if you have a doctype and it *doesn't* validate, you're throwing your browser into "quirks" mode. Which means that it will *guess* at what you want it to display. Sometimes the guesses are right, and sometimes they're wrong. It's the wrong ones that'll screw ya, because you'll then try and figure out how to get this position fixed and this display moved and end up screwing up every browser known to man, and utlizing hacks to try and fix things that don't need fixing - except to just validate your code.
In other words, if you *don't* a lot of times you're digging yourself into a hole that you can't seem to get out of. You'd be surprised how often simply validating (X)HTML will suddenly snap your "weirdness" back into place - ir at least make it more sensible and easier to fix.
But no, search engines don't penalize you for invalid code. It's just that valid code is better all around - for design *and* accessibility.
Heres the error I keep getting:
# Error Line 76 column 32: document type does not allow element "P" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag.
<p align="center" class="velvet">Velvet</p>
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
I'm working on it right now trying to get it sorted, I'm pretty sure It's still to do with the inline elements wrapped around block elements.
At least I dont think its the doctype I have tried several combinations.
Thanks
with the following css
a.block {display:block}
is this what you're aiming for?
The html validator hates what I have done. Maybe it would be easier just to post the code, so here it is:
HTML:
<a class="background-pic" href="target-page.html">
<p class="some-copy">blah,blah,blah</p>
CSS:
a.background-pic{
display: block;
position:relative;
float:left;
top:-95px;
width:600px;
height:300px;
background-image: url(target.jpg)
}
p.some-copy{
position:relative;
line-height:15px;
vertical-align: bottom;
left: 170px;
height:10px;
float: left;
width:160px;
top: 75px;
color: #FEFEFE;
font-size: 12px;
font-family: Arial, "Times New Roman", Verdana;
}
Are you looking to have a link (with a background picture) and some text within?
What am I doing wrong?
In fact what I have done does actually work and work fine in both IE and Firefox. It just wont validate, so I guess the html MUST be dodgy.
css
a.pic {
display: block;
position:relative;
float:left;
width:600px;
padding:140px 0;
text-align:center;
color: #FEFEFE;
font-size: 1em;
font-family: Arial, "Times New Roman", Verdana;
background:#ccc url(target.jpg) center center no-repeat}
padding:140px 0; centers the text vertically, this may need adjusting to suit your image..
the html
<a class="pic" href="target-page.html">Some text goes here</a>
worth a shot ;)
[inzanemedia.co.uk...]
Thanks a lot.
