Не проходит валидацию

[Borka]

Здравствуйте . скажите пожалуйста что изменить в данном коде чтобы код прошел валидацию и расположение элементов в верстке не изменилось?

<div class='rod' align= 'center'>
	 <div class = 'topt' >
	 <p><a href = '#html'>Lets get movies</a></p>
	 <form name = 'loic' action = '#' method = 'post'>
		 <p><input type="IMAGE" src = 'images/mes.png' value="" id = 'l2'><label for="l1"><p>12</p></label></p>
	 </form>
	 </div>
	 <div class = 'pcontent'>
	 <img src = 'images/pic2.gif' alt= 'picture' >
	 </div>
	 <div class = 'tfooter'>
	 <form name = 'star' action = '#' method = 'post'>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" ></p>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" ></p>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" ></p>
	 <p><input type="IMAGE" src = 'images/star1.png' value="" ></p>
	 <p><input type="IMAGE" src = 'images/star2.png' value="" ><label><p style = 'padding-top: 2px; float:right; padding-right:2px;'><a style = 'font-size: 10px;' href = '#.html'>Write a Comment</a></p></label></p>
	 </form>	
	 </div>
	 </div>

(такой код валидацию не проходит но зато разметка получается в соответствии с макетом)

собственно проблема состоит в запихивании label в контейнер <p>. Но если делать без него то текст не выравнивается в одну линию, как требуется на этих изображениях

Edited August 8, 2013 by Borka

[SelenIT]

Проблема, наоборот, в запихивании p в label (у которого Content model — Phrasing content, т.е. текст в пределах абзаца). Впрочем, запихнуть p в p тоже невозможно по построению (p неявно закрывается перед всем «блочным», включая другой p).

Решение — убрать p из label и задать последнему display:block. И, имхо, на будущее лучше думать о p не как о контейнере, а как о инструменте логической разбивки контента. Безопасные контейнеры — это span (внутри абзаца) и div (для нескольких абзацев).