...

View Full Version : A very strange (overnight) change in validation.



effpeetee
01-21-2008, 09:38 AM
Last night before I put the PC to rest, I validated my Sources url and got a complete validation from W3.

This morning, I decided to alter the footer div to stop it jumping. Then I validated it again and got very many errors, almost all of them due to a missing </li> tag.:eek:

Failed validation, 317 Errors

The only alteration that I made was to the footer div. Can anyone see a reason for this. I have uploaded the faulty version to the site.:confused:

There does seem to be a pattern to the missng tags. Four missing one OK, four missing, one OK.

http://exitfegs.co.uk/Sources.html

Frank

Majoracle
01-21-2008, 10:04 AM
This is indeed mind-boggling. When I look at the source, basically none of your <li> tags are closed, but if I go edit it with Web Developer, they are closed. NEVER had that happen before. Anyone else have that problem. It looks OK in Firebug too.

Post your code from the file you uploaded here.

effpeetee
01-21-2008, 10:40 AM
This is indeed mind-boggling. When I look at the source, basically none of your <li> tags are closed, but if I go edit it with Web Developer, they are closed. NEVER had that happen before. Anyone else have that problem. It looks OK in Firebug too.

Post your code from the file you uploaded here.

Unfortunately I have already been working on it. But it is a very unusual thing. It has got me thoroughly confused with unordered lists and how to switch from bullets to no bullets at the end of each group of five.

Totally accepted by W3 last night.

ANY help will stop me going mad.

Frank.

Kor
01-21-2008, 10:52 AM
XHTML strict Doctype is ... strict indeed. :) You must:

- close all the <li> tags with the </li>

- use lowercase for the div tag names (div and p) in footer
- use quotes when setting a value to an attribute


<div id="footer" style="Z-INDEX: 100; LEFT: 307px; POSITION: absolute; TOP: 535px">
<p>Please report/pm any faulty/missing links to effpeetee.</p></div>

effpeetee
01-21-2008, 11:17 AM
I think that you have missed the point.
W3 gave me a valid strict xhtml last night. NO ERRORS at all.

This a.m. I decided to modify the footer div. THAT IS ALL THAT I DID.
I validated again and got the results mentioned above.

The </li>'s were removed by some process. The first four in every group of five with the fifth left intact. THIS WAS NOT DONE BY ME,

This is the original code before I added the latest bunch of url's.:D


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>useful urls</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #551100;
color: #ffffff;
font: 900 9px/1.3 "lucida sans", verdana, arial, sans-serif;
font-weight: 900;
}
a:link {
color: #fff;
background-color: inherit;
text-decoration: none;
}
a:visited {
color: #ffff00;
background-color: inherit;
}
a:hover {
color: #ff0000;
background-color: inherit;
}
a:active {
color: #ffffff;
background-color: inherit;
}
a img {
border: 0;
}
#header h2 {
color: #ffffff;
background-color: #551100;
text-align: center;
padding: 6px;
}
#content1 {
width: 32%;
float: left;
background-color: #551100;
padding: 3px;
margin-bottom: 2px;
margin-right: .64em;
text-align: left;
}
#content2 {
width: 32%;
float: right;
background-color: #551100;
padding: 3px;
margin-bottom: 2px;
text-align: left;
}
#content3 {
background-color: #551100;
padding: 3px;
margin-bottom: 2px;
text-align: left;
margin-left:33%;
margin-right:33%;
}
.links {
font: 900 9px/1.3 "lucida sans", verdana, arial, sans-serif;
padding: 9px;
margin-bottom: 9px;
border: 2px solid yellow;
color: #fff;
}
.links ul {
padding-left: 16px;
margin-left: 16px;
list-style:disc;
}
.links ul a {
text-decoration: none;
}
.links ul a:hover {
font-size: 140%;
font-family: "lucida bright", serif;
color: #0ff;
text-decoration:underline;
}
#valids {
margin: auto;
width: 180px;
}
li.nobullet, li.nobullet ul li {
list-style-type:none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}
div.c1 {
margin-left: 2em;
}
</style>
<!--[if IE]>
<style type="text/css">
li.nobullet {
height:1%;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
</style>
<![endif]-->
</head>
<body>
<div id="body" class="clearfix">
<div id="header">
<h2>Useful urls from Frank's Den.<a href="http://www.exitfegs.co.uk/index.html">.</a></h2>
</div>
<div id="content1">
<div class="links">
<ul>
<li><a href="http://validator.w3.org/">W3 mark-up validator.</a></li>
<li><a href="http://www.alvit.de/handbook/">Web Developer's Handbook.</a></li>
<li><a href="http://www.websitebytes.com/articles/index.php">Webpage Creation html
tutorials.</a></li>
<li><a href="http://webdesign.about.com/od/CSS/cascading_style_sheets.htm">Web Design /
cascading style sheets.</a></li>
<li><a href="http://www.imanthony.com/lesson1.php">I'm Anthony.&quot;An introduction to
CSS.&quot;</a></li>




<li class="nobullet">
<ul>
<li><a href="http://brainstormsandraves.com/articles/semantics/structure">Semantics,
and Structure</a></li>
<li><a href="http://blog.tn38.net/archives/2005/05/what_are_semant.html">What are
Semantics?</a></li>
<li><a href="http://www.positioniseverything.net/">Position is Everything.</a></li>
<li><a href="http://www.brainjar.com/CSS/positioning/">CSS Positioning
again.</a></li>
<li><a href="http://blog.html.it/layoutgala/">CSS layout gala.</a></li>
</ul>




</li>
<li> <a href="http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts/">6 Keys to Modern CSS-based Layouts</a></li>
<li><a href="http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-FLOATS/">Simple
clearing of FLOATS by Alex Walker .</a></li>
<li><a href="http://www.positioniseverything.net/easyclearing.html">Clearing &quot;FLOATS&quot; the
old fashioned way.</a></li>
<li><a href="http://www.webreference.com/html/tutorial20/1.html#head-1">Tutorial 20: CSS
&quot;FLOATS&quot;, part 1.</a></li>
<li><a href="http://www.complexspiral.com/publications/containing-FLOATS/">Containing
FLOATS.</a></li>




<li class="nobullet">
<ul>
<li><a href="http://www.digital-web.com/articles/web_design_101_FLOATS/">Digital Web
on &quot;FLOATS&quot;.</a></li>
<li><a href="http://www.CSSdrive.com/">Categorised CSS Gallery and Examples.</a></li>
<li><a href="http://www.snook.ca/jonathan/">Understanding CSS-based layouts.</a></li>
<li><a href="http://www.alistapart.com/articles/slidingdoors/">CSS sliding doors
technique.</a></li>
<li><a href="http://www.dynamicdrive.com/">Welcome to Dynamic Drive .</a></li>
</ul>
</li>



<li> <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS library</a></li>
<li><a href="http://www.projectseven.com/tutorials/CSS/pvii_columns/">Equal Height CSS
columns.</a></li>
<li><a href="http://www.alistapart.com/articles/fauxcolumns/">FAUX columns extend to the
bottom.</a></li>
<li><a href="http://www.ilovejackdaniels.com/CSS/faux-columns-for-liquid-layouts/">FAUX
columns for liquid layouts</a></li>
<li><a href="http://glish.com/CSS/">CSS layout techniques at 'Glish'.</a></li>




<li class="nobullet">
<ul>
<li><a href="http://webdesign.about.com/od/TABLES/a/aa122605.htm">TABLES for Tabular data.</a></li>
<li><a href="http://accessat.c-net.us/articles/convert.html">TABLE-based to a CSS
layout.</a></li>
<li><a href="http://www.hotdesign.com/seynormal/">The alternative to TABLES.</a></li>
<li><a href="http://www.tanfa.co.uk/CSS/examples/">CSS examples - INDEX.</a></li>
<li><a href="http://www.positioniseverything.net/explorer/doubled-margin.html">The IE doubled float-margin bug.</a></li>
</ul>
</li>



<li> <a href="http://CSScreator.com/">A Cascading Style Sheet learning resource.</a></li>
<li><a href="http://CSScreator.com/?q=divitis">DIVitis: what it is and how to cure
it.</a></li>
<li><a href="http://www.smashingmagazine.com/2007/01/19/53-CSS-techniques-you-couldnt-live-without">53
CSS-techniques you couldn't live without</a></li>
<li><a href="http://www.answersthatwork.com/downright_pages/boot_disks_and_boot_cds.htm">Useful Boot
disks.</a></li>
<li><a href="http://CSS-discuss.incutio.com/?page=classesvsids">Classes or id's?</a></li>
</ul>
</div>
<!-- end links2 -->
</div>
<!-- end content2 -->



<div id="content2">
<div class="links">
<ul>
<li><a href="http://jigsaw.w3.org/css-validator/">W3 CSS validator.</a></li>
<li><a href="http://www.w3.org/tr/CSS21/cascade.html">Cascading, and Inheritance</a></li>
<li><a href="http://xhtml.com/en/CSS/reference/">CSS reference.</a></li>
<li><a href="http://xhtml.com/en/xhtml/reference/">XHTML reference.</a></li>
<li><a href="http://www.bluerobot.com/web/layouts/">The Layout Reservoir.</a></li>


<li class="nobullet">
<ul>
<li><a href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">Various BOX LAYOUTS.</a></li>
<li><a href="http://www.webcredible.co.uk/user-friendly-resources/CSS/CSS-round-corners-boxes.shtml"> Boxes with ROUNDED CORNERS.</a></li>
<li><a href="http://www.html.it/articoli/nifty/index.html">'Nifty' boxes with ROUNDED CORNERS.</a></li>
<li><a href="http://en.neuroticweb.com/recursos/CSS-rounded-box/">More ROUNDED
CORNERS.</a></li>
<li><a href="http://webdesign.about.com/od/CSS/a/aa072406.htm?nl=1">ROUNDED&nbsp;CORNERS using CSS and no images.</a></li>
</ul>
</li>


<li> <a href="http://www.CSSplay.co.uk/index">Experiments with STYLE SHEETS.</a></li>
<li><a href="http://www.huntingground.freeserve.co.uk/main/mainfram.htm">The
Huntinground - A general site.</a></li>
<li><a href="http://www.tizag.com/">Welcome to TIZAG Tutorials.</a></li>
<li><a href="http://www.codingforums.com/index.php">Coding Forums - live help.</a></li>
<li><a href="http://www.felgall.com/">&quot;Ask Felgall.&quot; Free computer help.</a></li>


<li class="nobullet">
<ul>
<li><a href="http://CSS.maxdesign.com.au/">MAX DESIGN - tutorials.</a></li>
<li><a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox Image
Viewer.</a></li>
<li><a href="http://www.htmlcodetutorial.com/">Help with HTML, CSS etc.</a></li>
<li><a href="http://www.theeldergeek.com/maximize_internet_explorer.htm">&quot;The Elder Geek on Windows XP.</a></li>
<li><a href="http://litmusapp.com/CSSvista/">CSSVISTA. edit your CSS live in IE and FFox.</a></li>
</ul>
</li>



<li> <a href="http://www.webcredible.co.uk/user-friendly-resources/CSS/internet-explorer.shtml">various IE BUGS and their solutions?</a></li>
<li><a href="http://www.softcomplex.com/products/tigra_menu/">TIGRA MENU is free
javascript menu.</a></li>
<li><a href="http://sperling.com/examples/menuh/">CSS horizontal DROP-DOWN MENU and
more.</a></li>
<li><a href="http://www.dynamicdrive.com/style/CSSlibrary/category/c2/">CSS library
VERTICAL CSS MENUSs</a></li>
<li><a href="http://www.dynamicdrive.com/style/CSSlibrary/category/c1/">CSS library
HORIZONTAL CSS MENUS.</a></li>



<li class="nobullet">
<ul>
<li><a <span style="font-size: 10pt"></span>href="http://www.CSSzengarden.com/CSSfile=http://www.anthonyforsey.com/flower_annimation/sample.CSS"> ZEN GARDEN - The Beauty of Web Design.</a></li>
<li><a href="http://www.maxdesign.com.au/presentation/page_layouts/">Sample CSS page
layouts .</a></li>
<li><a href="http://www.w3schools.com/CSS/CSS_pseudo_elements.asp">CSS
pseudo-elements and more.</a></li>
<li><a href="http://www.alistapart.com/stories/doctype/">Fix your site with the righ DOCTYPE!</a></li>
<li><a href="http://www.htmldog.com/">HTML DOG, the web designer's resource.</a></li>
</ul>
</li>



<li><a href="http://www.templatesforfree.net/">TEMPLATES for free.</a></li>
<li><a href="http://www.wellstyled.com/CSS-nopreload-rollovers.html">CSS technique: fast
rollovers without preload.</a></li>
<li><a href="http://www.fiftyfoureleven.com/">Web development Weblog +
resources.</a></li>
<li><a href="http://www.answersthatwork.com/home_page.htm">ANSWERS that work - home
page.</a></li>
<li><a href="http://www.javascriptkit.com/">Javascript kit.</a></li>
</ul>
</div>
<!-- end links2 -->
</div>
<!-- end content2 -->





<div id="content3">
<div class="links">
<ul>
<li><a href="http://www.webcredible.co.uk/user-friendly-resources/CSS/CSS-tricks.shtml">Ten more CSS
tricks you may not know</a></li>
<li><a href="http://www.ryanfait.com/">Sticky Footer. ryanfait.com</a></li>
<li><a href="http://www.htmldog.com/">HTML and CSS tutorials. and stuff.</a></li>
<li><a href="http://msdn2.microsoft.com/en-us/library/ms535153.aspx">VERTICAL
TEXT.</a></li>
<li><a href="http://www.ssi-developer.net/CSS/vertical-text.html">MORE VERTICAL TEXT.</a></li>


<li class="nobullet">
<ul>
<li><a href="http://bonrouge.com/~disjointed_text">Disjointed Text - hover to
display.</a></li>
<li><a href="http://www.webmasterworld.com/forum83/4161.htm">Taking on IE BUGS
.</a></li>
<li><a href="http://www.satzansatz.de/CSSd/onhavinglayout">On having LAYOUT .</a></li>
<li><a href="http://www.web-wise-wizard.com/html-tutorials/html-lists-menus-listings-tutorial.html">HTML code - HTML LISTS and MENUS.</a></li>
<li><a href="http://www.web-wise-wizard.com/html-tutorials/html-form-forms-tutorial.html">HTML code - HTML forms.</a></li>
</ul>
</li>



<li> <a href="http://www.maxdesign.com.au/presentation/liquid/example13.htm">Liquid DIV insanity!.</a></li>
<li><a href="http://www.maxdesign.com.au/presentation/multiple-classes/">Using multiple classes within selectors. </a></li>
<li><a href="http://pmob.co.uk/temp/3colfixedtest_explained.htm">Three Columns Explained.</a></li>
<li><a href="http://www.alistapart.com/articles/holygrail">In Search of the Holy Grail.</a></li>
<li><a href="http://www.alistapart.com/articles/12lessonsCSSandstandards">Lessons for Those Afraid of CSS and Standards.</a></li>



<li class="nobullet">
<ul>
<li><a href="http://css.maxdesign.com.au/floatutorial/">Floatutorial</a></li>
<li><a href="http://www.quirksmode.org/CSS/clearing.html">Clearing FLOATS </a></li>
<li><a href="http://www.positioniseverything.net/explorer.html">CSS BUGS found only in IE versions 5 and higher.</a></li>
<li><a href="http://www.elated.com/articles/CSS-FLOATS/">What are CSS FLOATS. What can you use them for? </a></li>
<li><a href="http://www.boutell.com/newfaq/creating/threecolumnlayout.html">How do I create a three-column CSS layout? </a></li>
</ul>



</li>
<li> <a href="http://webdesign.about.com/od/css/a/aa010702a.htm?nl=1">How to Add CSS Stylesheets to Your Web Pages.</a></li>
<li><a href="http://webdesign.about.com/od/colorcharts/l/bl_csscolors.htm?nl=1">Official CSS COLORS. </a></li>
<li><a href="http://www.webcredible.co.uk/user-friendly-resources/css/ie7-commands.shtml">New CSS commands for Internet Explorer 7.</a></li>
<li><a href="http://www.javascriptkit.com/">Javascript Kit.</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Javascript Reference.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://nopeople.com/CSS/full-height-layout/">Full height Layout.</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- end links1 -->
</div>
<!-- end content3 -->
<!-- end clearfix -->
<div class="c1"></div>
</body>
</html>

Kor
01-21-2008, 11:28 AM
You have missed also the point.


This a.m. I decided to modify the footer div

When you modified the footer div, probably you have used Uppercase (DIV, P...) for the tags names (while XHTML needs always lowercase) and you have not quoted the id value of the div.

And, of course, the <li> elements must have and end tag </li> by all means.

Or maybe you have changed the Doctype, meanwhile, how should I know?

bazz
01-21-2008, 12:15 PM
Frank,

I expect you may have a caching issue where the last time the validator did its thing, it wasn't using the most up to date version of your page - the most up to date version actaully being as you see it this morning.

Either this or, you may have the medical condition known as frustratitis immensus.

This condition is usually experienced by people in the IT world - no matter their age or sex. They reach a level of competence that is far superior to whenever they began these activities. Unfortunately, however, there comes a time when for around 3-6 weeks, they suffer from the afore-mentioned condition because things seem to happen without explanation. Their knowledege says that can't happen: common sense says that can't happen - yet it does.

The only known cure is to keep on going and fight your way through the barrier to a time as said, in about 3-6 weeks, when such things will diminish in frequency. It seems that after such a period of time, the human brain is capable, almost sub consciously, of preventing such occurrences, as if behind the scenes so that, to the person, they seem to have gone.

It seems unknown at this stage what triggers the condition but it seems to be related to events such as the perception that viruses have infiltrated the PC at some point recently and, the fear of these actually doing damage causes the individual to magnify any new subsequent issues (of unknown origin), to the point where things seem to be happening all by themselves.

This, in turn, causes the person to become stressed and confused and no manner of persistence will relieve the symptoms.

The cure:
1. take a break for 2 or 3 days
2. spend a day or two pondering the next developments as you remain away from the PC.
3. come back refreshed and continue to work. fight any temptation to give up or throw in the towel.
4. in 3-6 weeks all should be in clearer perspective and work can continue as 'normal'.

I suppose I could have shortened this post with thw words: deja vous!! :)

I have been there Frank about 2 years ago.

bazz

effpeetee
01-21-2008, 12:23 PM
No KOR,

I only did what I said. You are right about the upper case and I have corrected that. I have not yet changed the code at the ISP since I first sent the post.

I have put the code right, but I did not alter it in the first place with regard to the missing </li>'s.

The strangest thing is that, of each group of five links, only the first four of each group has been changed. Even XHTML in it's quirks mode could not have done this. They don't have my password.

I shall put the repaired, validated version up in twenty minutes - 1242 GMT. Just in case anyone wants to see the old version before it goes.

Thank you all for your input.

Frank

Bazz. Strange though it seems, everything happened just as I have said. Have you read the post above by Majoracle . The validator I used was W3's. Also, I always check the date and time on the server to make certain that the code has gone across.


Frank

Kor
01-21-2008, 01:18 PM
bazz... We all pass those barriers several times a day (sometimes within an hour, even in minutes or seconds) all our life... There are no general and mandatory time, rules, methods to bypass an apparently "illogical" issue. If in humans' world it is hard to find/predict situations/behaviors, in the computer machines' world there is always a clear/logical/math explanation for everything. This is the main difference between humans and machines... well... so far:rolleyes: And when a computer looks to go crazy, you have to be sure there is a human mind behind that situation... :D

oesxyl
01-21-2008, 01:27 PM
Last night before I put the PC to rest, I validated my Sources url and got a complete validation from W3.

This morning, I decided to alter the footer div to stop it jumping. Then I validated it again and got very many errors, almost all of them due to a missing </li> tag.:eek:

Failed validation, 317 Errors

The only alteration that I made was to the footer div. Can anyone see a reason for this. I have uploaded the faulty version to the site.:confused:

I guessing what could be:

if you use a "smart/inteligent" visual editor, open one page, save and close without doing anything else, could give such a result, because is smart enough to take some "proper" decision about syntax and corect them in a "smart" way, for example changing tag names from lower case to upper case.

best regards

bazz
01-21-2008, 01:51 PM
Bazz. Strange though it seems, everything happened just as I have said. Have you read the post above by Majoracle . The validator I used was W3's. Also, I always check the date and time on the server to make certain that the code has gone across.



Yeh I read that post. If, as it seems, the text editor caused the issue then, perhaps it's a good reminder to begin using a plain text editor. Why trust something if it has already shown its limited benefits.

Not shouting from a soap box but, I hand code in wordpad. does what I tell it to and forces me (gradually :p ) to learn how to code properly.

bazz

effpeetee
01-21-2008, 02:17 PM
oesxyl,

I do not use a smart text editor in the sense that you seem to mean. I just use an editor which will show me what the result of my coding will be. It does this in its own browser and any other that I link to it.

I have been using it for years without any problem. All I did on this occasion was to alter my footer to position it absolute. Since I have put the code right, I have gone through the same steps and resaved and posted to my site without any problem.

What sort of process could cause the removal of the </li> tags from the first four of each five, right throughout the coding. I shall probably never know. Just one of life's big mysteries. Keeps us on our toes. Small wonder that my Avatar is cross-eyed!

Frank.

_Aerospace_Eng_
01-21-2008, 04:05 PM
I would also remove this line and any space before the doctype as that is throwing IE6 into quirks mode.
<?xml version="1.0"?>

effpeetee
01-21-2008, 04:42 PM
I would also remove this line and any space before the doctype as that is throwing IE6 into quirks mode.
<?xml version="1.0"?>

Thanks _Aerospace_Eng_

I have done that now.

Frank

EDIT: Is it OK now with IE6?


Very weird in Opera.

Apostropartheid
01-21-2008, 05:50 PM
deja vous!! :)
"Again you"?

effpeetee
01-21-2008, 06:03 PM
Very weird in Opera. Any ideas.

http://exitfegs.co.uk/Sources.html

Frank

oesxyl
01-21-2008, 06:33 PM
Very weird in Opera. Any ideas.

http://exitfegs.co.uk/Sources.html

Frank
you have 3 error:

http://validator.w3.org/check?verbose=1&uri=http&#37;3A%2F%2Fexitfegs.co.uk%2FSources.html

this could be the reason for how it look in opera.

I suppose that you fix them before upload, could be the filesistem on the remote server the problem?

best regards

effpeetee
01-21-2008, 07:40 PM
Unfortunately not. This was part of an alteration that I made to try and put Opera right.
I just forgot to alter the closure.


I suppose that you fix them before upload, could be the filesistem on the remote server the problem?

Yes, I must admit that seems to be the only feasible explanation.

Frank

_Aerospace_Eng_
01-21-2008, 08:26 PM
Never seen that before but the fix is to add this to your CSS

#body {
width:100%;
}
however there are more issues that you probably aren't aware of. You tried to fix your footer so it doesn't move but you didn't account for the browser resizing. When this happens your footer overlaps the columns. I would do something like this

<!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>
<!-- Kindly re-written and corrected for me by _AeroSpace_Eng of CodingForums. 21.1.2008 -->
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<title>useful urls</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height:100%;
}
body {
background-color: #551100;
color: #ffffff;
font: 900 9px/1.3 "lucida sans", verdana, arial, sans-serif;
font-weight: 900;
}
#body {
min-height:100%;
position:relative;
}
a:link {
color: #fff;
background-color: inherit;
text-decoration: none;
}
a:visited {
color: #ffff00;
background-color: inherit;
}
a:hover {
color: #ff0000;
background-color: inherit;
}
a:active {
color: #ffffff;
background-color: inherit;
}
a img {
border: 0;
}
#header h1 {
font-size:3em;
color: #ffffff;
background-color: #551100;
text-align: center;
padding: 6px;
}
#content1 {
width: 32%;
float: left;
background-color: #551100;
padding: 3px;
margin-bottom: 2px;
margin-right: .64em;
text-align: left;
}
#content2 {
width: 32%;
float: right;
background-color: #551100;
padding: 3px;
margin-bottom: 2px;
text-align: left;
}
#content3 {
background-color: #551100;
padding: 3px;
margin-bottom: 2px;
text-align: left;
margin-left: 33%;
margin-right: 33%;
}
.links {
font: 900 9px/1.3 "lucida sans", verdana, arial, sans-serif;
padding: 9px;
margin-bottom: 9px;
border: 2px solid yellow;
color: #fff;
}
.links ul {
padding-left: 16px;
margin-left: 16px;
list-style: disc;
}
.links ul a {
text-decoration: none;
}
.links ul a:hover {
font-size: 135%;
font-family: "lucida bright", serif;
color: #0ff;
text-decoration: underline;
}
#clearfoot {
height:60px;
clear:both;
overflow:hidden;
}
#footer {
height:60px;
position:absolute;
width:100%;
bottom:0;
left:0;
font-size: 120%;
background-color: #551100;
padding:3px 0;
text-align: center;
}
#valids {
margin:auto;
width: 180px;
}
li.nobullet, li.nobullet ul li {
list-style: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}
</style>
<!--[if IE]>
<style type="text/css">
li.nobullet {
height: 1%;
}

* html .clearfix {
height: 1%;
}

* html #body {
height:100%;
}

.clearfix {
display: block;
}
</style>
<![endif]-->
</head>
<body>
<div id="body" class="clearfix">
<div id="header">
<h1>Useful urls from Frank's Den.<a href="http://www.exitfegs.co.uk/index.html">.</a></h1>
</div>
<div id="content1">
<div class="links">
<ul>
<li><a href="http://validator.w3.org/">1-W3 mark-up validator.</a></li>
<li><a href="http://www.alvit.de/handbook/">2-Web Developer's Handbook.</a></li>
<li><a href="http://www.websitebytes.com/articles/index.php">3-Webpage Creation html tutorials.</a></li>
<li><a href="http://webdesign.about.com/od/CSS/cascading_style_sheets.htm">4-Web Design / cascading style sheets.</a></li>
<li><a href="http://www.imanthony.com/lesson1.php">5-I'm Anthony. An introduction to CSS."</a></li>
<li class="nobullet">
<ul>
<li><a href="http://brainstormsandraves.com/articles/semantics/structure">6-Semantics, and Structure</a></li>
<li><a href="http://blog.tn38.net/archives/2005/05/what_are_semant.html">7-What are Semantics?</a></li>
<li><a href="http://www.positioniseverything.net/">8-Position is Everything.</a></li>
<li><a href="http://www.brainjar.com/CSS/positioning/">9-CSS Positioning again.</a></li>
<li><a href="http://blog.html.it/layoutgala/">10-CSS layout gala.</a></li>
</ul>
</li>
<li><a href="http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts/">11-Six Keys to Modern CSS-based Layouts</a></li>
<li><a href="http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-FLOATS/">12-Simple clearing of FLOATS by Alex Walker .</a></li>
<li><a href="http://www.positioniseverything.net/easyclearing.html">13-Clearing "FLOATS" the old fashioned way.</a></li>
<li><a href="http://www.webreference.com/html/tutorial20/1.html#head-1">14-Tutorial 20: CSS "FLOATS", part 1.</a></li>
<li><a href="http://www.ejeliot.com/blog/59">15-Containing FLOATS.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://www.digital-web.com/articles/web_design_101_floats/">16-Digital Web on FLOATS.</a></li>
<li><a href="http://www.CSSdrive.com/">17-Categorised CSS Gallery and Examples.</a></li>
<li><a href="http://www.snook.ca/jonathan/">18-Understanding CSS-based layouts.</a></li>
<li><a href="http://www.alistapart.com/articles/slidingdoors/">19-CSS sliding doors technique.</a></li>
<li><a href="http://www.dynamicdrive.com/">20-Welcome to Dynamic Drive .</a></li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">21-Dynamic Drive CSS library</a></li>
<li><a href="http://www.projectseven.com/tutorials/CSS/pvii_columns/">22-Equal Height CSS columns.</a></li>
<li><a href="http://www.alistapart.com/articles/fauxcolumns/">23-FAUX columns extend to the bottom.</a></li>
<li><a href="http://www.ilovejackdaniels.com/CSS/faux-columns-for-liquid-layouts/">24-FAUX columns for liquid layouts</a></li>
<li><a href="http://glish.com/CSS/">25-CSS layout techniques at 'Glish'.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://webdesign.about.com/od/TABLES/a/aa122605.htm">26-TABLES for Tabular data.</a></li>
<li><a href="http://accessat.c-net.us/articles/convert.html">27-TABLE-based to a CSS layout.</a></li>
<li><a href="http://www.hotdesign.com/seybold/">28-Why tables for layout is stupid.</a></li>
<li><a href="http://www.tanfa.co.uk/CSS/examples/">29-CSS examples - INDEX.</a></li>
<li><a href="http://www.positioniseverything.net/explorer/doubled-margin.html">30-The IE doubled float-margin bug.</a></li>
</ul>
</li>
<li><a href="http://CSScreator.com/">31-A Cascading Style Sheet learning resource.</a></li>
<li><a href="http://CSScreator.com/?q=divitis">32-DIVitis: what it is and how to cure it.</a></li>
<li><a href="http://www.smashingmagazine.com/2007/01/19/53-CSS-techniques-you-couldnt-live-without">33-53 CSS-techniques you couldn't live without</a></li>
<li><a href="http://www.answersthatwork.com/downright_pages/boot_disks_and_boot_cds.htm">34-Useful Boot disks.</a></li>
<li><a href="http://CSS-discuss.incutio.com/?page=classesvsids">35-Classes or id's?</a></li>
</ul>
</div>
<!-- end links2 -->
</div>
<!-- end content2 -->
<div id="content2">
<div class="links">
<ul>
<li><a href="http://jigsaw.w3.org/css-validator/">71-W3 CSS validator.</a></li>
<li><a href="http://www.w3.org/tr/CSS21/cascade.html">72-Cascading, and Inheritance</a></li>
<li><a href="http://xhtml.com/en/CSS/reference/">73-CSS reference.</a></li>
<li><a href="http://xhtml.com/en/xhtml/reference/">74-XHTML reference.</a></li>
<li><a href="http://www.bluerobot.com/web/layouts/">75-The Layout Reservoir.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">76-Various BOX LAYOUTS.</a></li>
<li><a href="http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml">77-Boxes with ROUNDED CORNERS.</a></li>
<li><a href="http://www.html.it/articoli/nifty/index.html">78-'Nifty' boxes with ROUNDED CORNERS.</a></li>
<li><a href="http://www.spiffybox.com/">79-More ROUNDED CORNERS.</a></li>
<li><a href="http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml">80-ROUNDED CORNERS using CSS and no images.</a></li>
</ul>
</li>
<li><a href="http://www.CSSplay.co.uk/index">81-Experiments with STYLE SHEETS.</a></li>
<li><a href="http://www.huntingground.freeserve.co.uk/main/mainfram.htm">82-The Huntinground - A general site.</a></li>
<li><a href="http://www.tizag.com/">83-Welcome to TIZAG Tutorials.</a></li>
<li><a href="http://www.codingforums.com/index.php">84-Coding Forums - live help.</a></li>
<li><a href="http://www.felgall.com/">85-"Ask Felgall." Free computer help.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://CSS.maxdesign.com.au/">86-MAX DESIGN - tutorials.</a></li>
<li><a href="http://www.huddletogether.com/projects/lightbox2/">87-Lightbox Image Viewer.</a></li>
<li><a href="http://www.htmlcodetutorial.com/">88-Help with HTML, CSS etc.</a></li>
<li><a href="http://www.theeldergeek.com/maximize_internet_explorer.htm">89-"The Elder G" on Windws XP.</a></li>
<li><a href="http://litmusapp.com/labs">90-CSSVISTA. edit your CSS live in IE and FFox.</a></li>
</ul>
</li>
<li><a href="http://cavemonkey50.com/2005/12/the-ultimate-ie-hack-guide/">91-various IE BUGS and their solutions?</a></li>
<li><a href="http://www.softcomplex.com/products/tigra_menu/">92-TIGRA MENU is free javascript menu.</a></li>
<li><a href="http://sperling.com/examples/menuh/">93-CSS horizontal DROP-DOWN MENU and more.</a></li>
<li><a href="http://www.dynamicdrive.com/style/CSSlibrary/category/c2/">94-CSS library VERTICAL CSS MENUSs</a></li>
<li><a href="http://www.dynamicdrive.com/style/CSSlibrary/category/c1/">95-CSS library HORIZONTAL CSS MENUS.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://www.CSSzengarden.com/CSSfile">96-ZEN GARDEN - The Beauty of Web Design.</a></li>
<li><a href="http://www.maxdesign.com.au/presentation/page_layouts/">97-Sample CSS page layouts .</a></li>
<li><a href="http://www.w3schools.com/CSS/CSS_pseudo_elements.asp">98-CSS pseudo-elements and more.</a></li>
<li><a href="http://www.alistapart.com/stories/doctype/">99-Fix your site with the right DOCTYPE!</a></li>
<li><a href="http://www.htmldog.com/">100-HTML DOG, the web designer's resource.</a></li>
</ul>
</li>
<li><a href="http://www.templatesforfree.net/">101-TEMPLATES for free.</a></li>
<li><a href="http://www.wellstyled.com/CSS-nopreload-rollovers.html">102-CSS technique: fast rollovers without preload.</a></li>
<li><a href="http://www.fiftyfoureleven.com/">103-Web development Weblog + resources.</a></li>
<li><a href="http://www.answersthatwork.com/home_page.htm">104-ANSWERS that work - home page.</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/csshacks.shtml">105-CSS Hacks- The good, the bad, and the ugly.</a></li>
</ul>
</div>
<!-- end links2 -->
</div>
<!-- end content2 -->
<div id="content3">
<div class="links">
<ul>
<li><a href="http://www.webcredible.co.uk/user-friendly-resources/CSS/CSS-tricks.shtml">36-Ten more CSS tricks you may not know</a></li>
<li><a href="http://www.ryanfait.com/">37-Sticky Footer. ryanfait.com</a></li>
<li><a href="http://www.htmldog.com/">38-HTML and CSS tutorials. and stuff.</a></li>
<li><a href="http://msdn2.microsoft.com/en-us/library/ms535153.aspx">39-VERTICAL TEXT.</a></li>
<li><a href="http://www.ssi-developer.net/CSS/vertical-text.html">40-MORE VERTICAL TEXT.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://bonrouge.com/~disjointed_text">41-Disjointed Text - hover to display.</a></li>
<li><a href="http://www.webmasterworld.com/forum83/4161.htm">42-Taking on IE BUGS .</a></li>
<li><a href="http://www.satzansatz.de/CSSd/onhavinglayout">43-On having LAYOUT .</a></li>
<li><a href="http://www.web-wise-wizard.com/html-tutorials/html-lists-menus-listings-tutorial.html">44-HTML code - HTML LISTS and MENUS.</a></li>
<li><a href="http://www.web-wise-wizard.com/html-tutorials/html-form-forms-tutorial.html">45-HTML code - HTML forms.</a></li>
</ul>
</li>
<li><a href="http://www.maxdesign.com.au/presentation/liquid/example13.htm">46-Liquid DIV insanity!.</a></li>
<li><a href="http://www.maxdesign.com.au/presentation/multiple-classes/">47-Using multiple classes within selectors.</a></li>
<li><a href="http://pmob.co.uk/temp/3colfixedtest_explained.htm">48-Three Columns Explained.</a></li>
<li><a href="http://www.alistapart.com/articles/holygrail">49-In Search of the Holy Grail.</a></li>
<li><a href="http://www.alistapart.com/articles/12lessonsCSSandstandards">50-Lessons for Those Afraid of CSS and Standards.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://css.maxdesign.com.au/floatutorial/">51-Floatutorial</a></li>
<li><a href="http://www.quirksmode.org/CSS/clearing.html">52-Clearing FLOATS</a></li>
<li><a href="http://www.positioniseverything.net/explorer.html">53-CSS BUGS found only in IE versions 5 and higher.</a></li>
<li><a href="http://www.elated.com/articles/CSS-FLOATS/">54-CSS FLOATS. What can you use them for?</a></li>
<li><a href="http://www.boutell.com/newfaq/creating/threecolumnlayout.html">55-How do I create a three-column CSS layout?</a></li>
</ul>
</li>
<li><a href="http://webdesign.about.com/od/css/a/aa010702a.htm?nl=1">56-How to Add CSS Stylesheets to Your Web Pages.</a></li>
<li><a href="http://webdesign.about.com/od/colorcharts/l/bl_csscolors.htm?nl=1">57-Official CSS COLORS.</a></li>
<li><a href="http://www.webcredible.co.uk/user-friendly-resources/css/ie7-commands.shtml">58-New CSS commands for Internet Explorer 7.</a></li>
<li><a href="http://www.javascriptkit.com/">59-Javascript Kit.</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">60-Javascript Reference.</a></li>
<li class="nobullet">
<ul>
<li><a href="http://nopeople.com/CSS/full-height-layout/">61-Full height Layout.</a></li>
<li><a href="http://gotomy.com/color.html">62-Web Color Chart - 1.</a></li>
<li><a href="http://www.geocities.com/SiliconValley/Network/2397/">63-Web Color Chart - 2.</a></li>
<li><a href="http://www.twinhelix.com/css/iepngfix/">64-IE PNG Fix v1.0 RC4.</a></li>
<li><a href="http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions">65-CSS Reference:Mozilla Extensions.</a></li>
</ul>
</li>
<li><a href="http://nopeople.com/CSS/background_image_resize/">66-Content scales to fit screen size.</a></li>
<li><a href="http://www.exitfegs.co.uk/RC1.html">67-Interesting rounded corners by css.</a></li>
<li><a href="http://www.hotdesign.com/seybold/20semanticmarkup.html">68-Structural markup: code what you mean.</a></li>
<li><a href="http://www.hotdesign.com/seybold/29writecss.html">69-It's time to start writing your CSS.</a></li>
<li><a href="http://www.thenoodleincident.com/tutorials/css/">70-/CSS/ - a guide for the unglued..</a></li>
</ul>
</div>
<div id="clearfoot">&nbsp;</div>
<div id="footer">
<div id="valids"> <a href="http://validator.w3.org/check?uri=referer"> <img width="88" height="31" src="xhtml.png" alt="Valid XHTML 1.0 Strict" /> </a> <a href="http://jigsaw.w3.org/css-validator/"> <img width="88" height="31" src="vcss.png" alt="Valid CSS!" /> </a> </div>
<p>Please report/pm any faulty/missing links to effpeetee.</p>
</div>
</div>
</div>
<!-- end links1 -->
<!-- end content3 -->
<!-- end clearfix -->
</body>
</html>
I put valids inside of the footer as well as the paragraph. I set a min-height on #body, made it position:relative, then I set a height to #footer and add the #clearfoot div so the content never gets covered by the footer. #clearfoot and #footer have to be the same height to work. It now works in Opera just fine by setting width:100% on #body.

effpeetee
01-21-2008, 08:30 PM
Thanks Aero,

You're a good friend. Not just the code but a good explanation. "Worth a Guinea a Box,"

Frank

_Aerospace_Eng_
01-21-2008, 08:32 PM
I made one change. In #footer it says padding:0 3px;. It should be padding:3px 0; instead.

effpeetee
01-21-2008, 08:48 PM
I made one change. In #footer it says padding:0 3px;. It should be padding:3px 0; instead.
Thanks, have done it.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum