A validation error that I don't understand

jeanm

Member
I'm now up to validating my template. I've fixed all other errors but I can't see what to do with this one. The error notice reads:

# Error Line 58, Column 17: document type does not allow element "ul" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

<p><ul id="nav">



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


The URL of the page is http://www.railway-train-travel.com.au/newpage.php

Can anyone see what I've got wrong please? :confused: Thanks in advance.
 

d a v e

New Member
Remove the paragraph tag in both instances.

don't forget to title your pages - if someone bookmarks it at the moment it says "......................"

also, if i may, could you split up your text into more readable paragraphs? at the moment that big block of text looks daunting and inaccessible ;) you could also use more subheadings too as appropriate ;)

oh and font sizes should be in ems or percentages for the screen , not points (only for print) and the text size is a wee bit small and could use some more line height (say p {line-height:1.5;}

and while i'm on about the readability of your text i remember that full-justified text is harder to read and you can end up with rivers flowing through it (especially with the poor rendering of browsers compared with DTP/layout programs)

******************************************************************
compare what i've written just above with the block of (the same) text below
******************************************************************

Remove the paragraph tag in both instances. don't forget to title your pages - if someone bookmarks it at the moment it says "......................" :) also, if i may, could you split up your text into more readable paragraphs? at the moment that big block of text looks daunting and inaccessible ;) oh and font sizes should be in ems or percentages for the screen , not points (only for print) and the text size is a wee bit small and could use some more line height (say p {line-height:1.5;} and while i'm on about the readability of your text i remember that full-justified text is harder to read and you can end up with rivers flowing through it (especially with the poor rendering of browsers compared with DTP/layout programs)
 

jeanm

Member
Thanks a million Dave. It now passes validation!

I understand about the importance of the wording in the title tag and the other two below it. I've left them as "........." at present so I can put individual wording on each page as I create it.

The text that is in there at present is a load of rubbish - it's just there to fill out the page a bit and I'll take your advice and make sure everything is in sensible but short paragraphs with headings in there too.

I didn't know I had the font stuff so wrong but I'll attend to that job next. What would you suggest for a text size please?

I chose fully justified text because I thought it looked neater but I'll try changing it if it makes it more readable.

I'm hoping to improve the look of the site as I learn more but, for the time being, are you able to see anything in there that would hinder me in making it look nicer in years to come. Have I missed including something that will be difficult or time consuming to fix further down the track? I really want to get the basics right.
 

d a v e

New Member
for text size i use
body {font-size: 62.5%;}
and then use ems (so text can be resized easily). using 62.5% means that for example
1.6em = 16px
2.4em = 24px (easy huh?)
with a line height of around 1.5

e.g. p {font-size:1.6em; line-height:1.5;}

if you're using css for everything then it's pretty easy to change the text alignment and sizes.

i and many other people prefer cntred sites, but there are many others who prefer left aligned... try both and see which seems better
 

jeanm

Member
I tried the changes and the fonts look huge. It has shoved around other elements on the page so I think perhaps I have to do some re-designing of the layout. I wish I had realized my text was too small at the start......
 

jeanm

Member
Dave I found it was only the navigation bar causing the problem. Once I made the spaces between the links in the nav bar smaller it all fitted back where it should be and everything was fine.

I'm now going to address the issue of left/fully justified.
 

jeanm

Member
I've now input the body font size and put in the H1, H2, p etc. in em's and left-justified the paragraphs. However I now seem to have gone to the other extreme and all the text is now tiny. It's at http://www.railway-train-travel.com.au/newpage.php

I think you are correct about the paragraphs looking better if they are left justified. It certainly makes all the links in the right div look more sensible instead of being spread out right across the line.

I think the size of the text is now my only issue.
 

d a v e

New Member
put this first (at the top of) your stylesheet
body {background-color: #D7D790; font-size: 62.5%; margin: 0px; padding: 0px; border: 0px; left: 0px; top: 0px;}

because of the cascade the body is overruling the p
 

jeanm

Member
Thanks so much Dave. It works brilliantly now. I've downloaded the Firefox add-on and I've done the validation and all is well in the world :)

I've got three web sites to 'modernize' so now I have my template I'll just change the site colours and images etc to suit each web site.

The amount of help I've received from members of this forum is phenomenal and I will be forever grateful to all of you. Finally getting all this code correct is like a big Christmas present to me.

Happy Christmas Everyone.
 
Top