Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Dec 2004
    Location
    England
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    XHTML 1.0 Strict Validation - <br /> won't validate

    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.

  • #2
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Do you have a link to the page casuing the problem?

  • #3
    New Coder
    Join Date
    Dec 2004
    Location
    England
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <?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>

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    New Coder
    Join Date
    Dec 2004
    Location
    England
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    New Coder
    Join Date
    Dec 2004
    Location
    England
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

    Code:
     <link rel="stylesheet" type="text/css" href="index.css"/>
    in your XHTML file which would link to your javascript file?

  • #8
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    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

  • #9
    New Coder
    Join Date
    Dec 2004
    Location
    England
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thats great, thanks a lot for all the help guys!

  • #10
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by wobblehead
    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 )

    Gary

  • #11
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Just to add transitional xhtml will allow your current placement of the <br />

  • #12
    New Coder
    Join Date
    Dec 2004
    Location
    England
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah thanks, unfortunately, my lecturer insists all pages have to be validated in strict.

  • #13
    New Coder
    Join Date
    Dec 2004
    Location
    England
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #14
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...html/#comments

    and

    http://www.htmldog.com/guides/htmlad.../declarations/

    Gary

  • #15
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by Graft-Creative
    I never expected to get this sort of intrest...

    Anyhow, it's all good


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •