...

View Full Version : XHTML 1.0 Strict Validation - <br /> won't validate



wobblehead
01-19-2005, 09:15 PM
Hi,

I've been creating a javascript website, and have been attempting to get my home page to validate in XHTML 1.0 Strict. I've managed to whittle down all of my errors to just two. Both of which happen to be related to my line breaks. I can't see anything wrong with them, on both instances all I have coded is, <br /> Yet the W3C Validator keeps displaying this message...

Line 185, column 7: document type does not allow element "br" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag
<br />

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>").

Line 239, column 7: document type does not allow element "br" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag
<br />

I've scoured the internet but can't seem to find any answers to my problem, if you guys can help me, I'd be really grateful.

Puffin the Erb
01-19-2005, 09:18 PM
Do you have a link to the page casuing the problem?

wobblehead
01-19-2005, 09:21 PM
I have yet to upload the page to the internet yet so I'm afraid I'll have to attach you the document if thats ok, sorry! Oh, I can't see anywhere to attach my document, I'll copy and paste the code into here, but if you know of anyway i can send you the code, i'll do that instead.




<?xml version="1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title> Big Dog Music News - Homepage </title>
<link rel="stylesheet" type="text/css" href="index.css"/>
<script type="text/javascript">

<!-- Hide script from old browsers

if(document.images)
{
buttonHome = new Image
buttonHomeRollover = new Image

buttonHipHop = new Image
buttonHipHopRollover = new Image

buttonPop = new Image
buttonPopRollover = new Image

buttonRock = new Image
buttonRockRollover = new Image

buttonNewReleases = new Image
buttonNewReleasesRollover = new Image

buttonCharts = new Image
buttonChartsRollover = new Image

buttonHome.src = "buttons/homeButton.gif"
buttonHomeRollover.src = "buttons/homeButtonRollover.gif"

buttonHipHop.src = "buttons/hiphopButton.gif"
buttonHipHopRollover.src = "buttons/hiphopButtonRollover.gif"

buttonPop.src = "buttons/popButton.gif"
buttonPopRollover.src = "buttons/popButtonRollover.gif"

buttonRock.src = "buttons/rockButton.gif"
buttonRockRollover.src = "buttons/rockButtonRollover.gif"

buttonNewReleases.src = "buttons/newreleasesButton.gif"
buttonNewReleasesRollover.src = "buttons/newreleasesButtonRollover.gif"

buttonCharts.src = "buttons/chartsButton.gif"
buttonChartsRollover.src = "buttons/chartsButtonRollover.gif"
}

else
{
buttonHome = ""
buttonHomeRollover = ""

buttonHipHop = ""
buttonHipHopRollover = ""

buttonPop = ""
buttonPopRollover = ""

buttonRock = ""
buttonRockRollover = ""

buttonNewReleases = ""
buttonNewReleasesRollover = ""

buttonCharts = ""
buttonChartsRollover = ""

document.home = ""
document.hiphop = ""
document.pop = ""
document.rock = ""
document.newreleases = ""
document.charts = ""
}

dayName = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")
monthName = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")

now = new Date

adImages = new Array("images/banner1.gif", "images/banner2.gif", "images/banner3.gif")
thisAd = 0
imgCt = adImages.length

function rotate()
{
if (document.images)
{
thisAd++
if (thisAd == imgCt)
{
thisAd = 0
}
document.adBanner.src=adImages [thisAd]
setTimeout("rotate()", 3 * 1000)
}
}

// End hiding script from old browsers -->

</script>
</head>

<body onload="rotate()">

<div id="header">
<table class="width">
<tr>
<td class="dollar">
<img src="images/dollar.gif" alt="dollar"/>
</td>
<td id="logo">
<img src="images/heading.gif" alt="logo"/>
</td>
<td class="dollar">
<img src="images/dollar.gif" alt="dollar"/>
</td>
</tr>
</table>
</div>

<script type="text/javascript">

<!-- Hide script from old browsers

document.write("<h3>" + dayName[now.getDay()] + ", " + now.getDate() + " " + monthName[now.getMonth()] + " " + now.getYear() + ".<\/h3>")

// End hiding script from old browsers -->

</script>

<div id="navigation">
<table class="width">
<tr>
<td class="button">
<a href="index.htm"
onmouseover="document.home.src=buttonHomeRollover.src"
onmouseout="document.home.src=buttonHome.src">
<img class="border" src="buttons/homeButton.gif" alt="home button"/>
</a>
</td>
<td class="button">
<a href="hiphop.htm"
onmouseover="document.hiphop.src=buttonHipHopRollover.src"
onmouseout="document.hiphop.src=buttonHipHop.src">
<img class="border" src="buttons/hiphopButton.gif" alt="hiphop button"/>
</a>
</td>
<td class="button">
<a href="pop.htm"
onmouseover="document.pop.src=buttonPopRollover.src"
onmouseout="document.pop.src=buttonPop.src">
<img class="border" src="buttons/popButton.gif" alt="pop button"/>
</a>
</td>
<td class="button">
<a href="rock.htm"
onmouseover="document.rock.src=buttonRockRollover.src"
onmouseout="document.rock.src=buttonRock.src">
<img class="border" src="buttons/rockButton.gif" alt="rock button"/>
</a>
</td>
<td class="button">
<a href="newreleases.htm"
onmouseover="document.newreleases.src=buttonNewReleasesRollover.src"
onmouseout="document.newreleases.src=buttonNewReleases.src">
<img class="border" src="buttons/newreleasesButton.gif" alt="new releases button"/>
</a>
</td>
<td class="button">
<a href="charts.htm"
onmouseover="document.charts.src=buttonChartsRollover.src"
onmouseout="document.charts.src=buttonCharts.src">
<img class="border" src="buttons/chartsButton.gif" alt="charts button"/>
</a>
</td>
</tr>
</table>
</div>

<br />

<div id="main_content">
<table class="width" border="0">
<tr>

<td class="spacing">
</td>

<td id="image_box1">
<a href="pop.htm"><img class="image_attributes" src="images/xfactor.jpg" alt="Xfactor"/></a>
<a href="rock.htm"><img class="image_attributes" src="images/U2.gif" alt="U2"/></a>
<h4><a href="pop.htm">Xfactor Steve tops UK charts</a></h4>
<h4><a href="pop.htm">Artists help Tsunami relief</a></h4>
<h4><a href="rock.htm">U2 delay world tour</a></h4>
</td>

<td class="spacing">
</td>

<td id="image_box2">
<a href="hiphop.htm"><img class="image_attributes" src="images/eminem.gif" alt="Eminem"/></a>
<a href="hiphop.htm"><img class="image_attributes" src="images/xzibit.gif" alt="Xzibit"/></a>
<h4><a href="hiphop.htm">Shady killing on eBay</a></h4>
<h4><a href="hiphop.htm">Ashanti's new album reviewed</a></h4>
<h4><a href="hiphop.htm">Xzibit's 'mean muggin'</a></h4>
</td>

<td class="spacing">
</td>

<td id="image_box3">
<a href="pop.htm"><img class="image_attributes" src="images/scissorSisters.gif" alt="Scissor Sisters"/></a>
<a href="pop.htm"><img class="image_attributes" src="images/JLo.gif" alt="Jennifer Lopez"/></a>
<h4><a href="pop.htm">Scissor Sisters top 2004</a></h4>
<h4><a href="pop.htm">J.Lo returns to being Jennifer</a></h4>
<h4><a href="pop.htm">Focus on Destiny's Child</a></h4>
</td>

<td class="spacing">
</td>

<td id="image_box4">
<a href="rock.htm"><img class="image_attributes" src="images/libertines.gif" alt="The Libertines"/></a>
<a href="rock.htm"><img class="image_attributes" src="images/franzFerdinand.gif" alt="Franz Ferdinand"/></a>
<h4><a href="rock.htm">Libertines star in tumour shock</a></h4>
<h4><a href="rock.htm">Fischerspooner's new album</a></h4>
<h4><a href="rock.htm">'This Fffire' reviewed</a></h4>
</td>

</tr>
</table>
</div>

<br />

<div id="banner">
<table class="width">
<tr>
<td>
<img src="images/banner1.gif" alt="Ad Banner"/>
</td>
</tr>
</table>
</div>

<script type="text/javascript">

<!-- Hide script from old browsers

document.write("<h3>" + "Page last modified " + document.lastModified + ".<\/h3>")

// End hiding script from old browsers -->
</script>

<hr />

<p><a class="right" href="http://jigsaw.w3.org/css-validator/"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" /></a></p>

</body>

</html>

liorean
01-19-2005, 09:24 PM
As it sounds' you have placed the br element where you are not allowed to have br elements. That probably means that you've placed it someplace where you're not at all allowed to place inline-elements or text, such as for example as direct children of the body element.

wobblehead
01-19-2005, 09:28 PM
I see, I read somewhere that you cannot put the <br /> tag in the body as a direct child, but didn't completely understand what it meant. I'm only a university student so I'm fairly new to all of this stuff. I've highlighted in orange where my <br /> tags are in the code. There are only 2 of them. If you don't mind taking a look at where they are, then you might be able to see better than me if I've put them in a place I'm not meant too. Thanks for the help you've given me so far though!

liorean
01-19-2005, 09:32 PM
Ah, a few things:
In XML, comments are comments and not content. That means that if you place a comment in the script element, you should not expect it to be sent to the scripting engine. Getting around this in a way that both XML and HTML user agents support is long-winded, so it's better to move your scripts to separate files instead.

The br element, as I noted in my latest post (you latest didn't exist when I started writing that) is an inline element that is only allowed in inline contexts. That means that you may not place br as a direct child of the body element. Anyway, you're just using br for presentation, when the appropriate way of doing that is to use CSS.

wobblehead
01-19-2005, 09:37 PM
Thanks for the help, with regards to the script stuff though, would I put it in a separate file as you would do if you were to create an external css file and then put something like this...


<link rel="stylesheet" type="text/css" href="index.css"/>

in your XHTML file which would link to your javascript file?

JamieR
01-19-2005, 09:40 PM
All your javascript is best of going into external .js files - as this is required for successful validation.

Add <script type="text/javascript" src="XXX.js"></script> where the code in your html and it will work just the same as it did before - it will get rid of a few errors as well. Atleast that is what I found:p

wobblehead
01-19-2005, 09:41 PM
Thats great, thanks a lot for all the help guys!

Graft-Creative
01-19-2005, 09:57 PM
Line 185, column 7: document type does not allow element "br" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag

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.


That is pretty much your answer right there.

Because your break tags are not direct descendants of any of the above tags - they become direct descendants of the body tag, which, as mentioned, is not allowed.

a quick fix would be to move the br tags so they are before the /div tags - though yes, you would be better setting a bottom-margin values to the divs with css to acheive the same effect.

An excellent resource on the correct document hierarchy & the use of css selectors is @ http://css.maxdesign.com.au/listamatic/

(thanks for that one Ronaldb66 :thumbsup: )

Gary

Puffin the Erb
01-19-2005, 10:14 PM
Just to add transitional xhtml will allow your current placement of the <br />

wobblehead
01-19-2005, 10:18 PM
Yeah thanks, unfortunately, my lecturer insists all pages have to be validated in strict.

wobblehead
01-19-2005, 10:43 PM
That margin-bottom CSS worked a treat, thank you!!! Only one more validation error to go, and I can finally get this badboy validated as XHTML Strict 1.0!!! Yeahhhhhh baby! :eek:

Graft-Creative
01-20-2005, 12:12 AM
You could further impress your lecturer by serving your page up as xhtml1.1 to those browsers that can cope with it - and xhtml trans/strict/html4.01 Strict, to those that can't:

http://blog.geoffers.uni.cc/archives/2005/01/07/xhtml-html/#comments

and

http://www.htmldog.com/guides/htmladvanced/declarations/ :p

Gary

gsnedders
01-20-2005, 01:00 AM
http://blog.geoffers.uni.cc/archives/2005/01/07/xhtml-html/#commentsI never expected to get this sort of intrest... :rolleyes:

Anyhow, it's all good :)

rmedek
01-20-2005, 03:44 AM
Ooh, nothing personal Geoffers, but that HTMLDog version is so clean and to the point. I'm going to start sliding that one in my pages...

On second thought... I just spent over two hours reading up on the differences/preferences/opinions of the text/html vs. application xhtml and now my brain is fried. For now I'm going back to what works :)

gsnedders
01-20-2005, 07:12 PM
Ooh, nothing personal Geoffers, but that HTMLDog version is so clean and to the point. I'm going to start sliding that one in my pages...

On second thought... I just spent over two hours reading up on the differences/preferences/opinions of the text/html vs. application xhtml and now my brain is fried. For now I'm going back to what works :)I think you're getting to my point, while it's longer than some, it's shorter than some...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum