Forum Moderators: not2easy
I'm getting ready to validate my site so looked up and added a valid doctype. But when I added it a section of my page was no longer visible. I guess there must be something wrong. Used the W3C CSS validator and the CSS was fine... The CSS and HTML is below. I have indicated the section that adding the doctype makes invisible (its right at the bottom).
CSS
body
{font-family: arial, sans-serif;
font-size: 1em;}
a:link,a:visited, a:active
{text-decoration: none;
font-weight: bold;
color: #000000;}
li
{margin-top: 1px;}
#main
{margin: 20px;}
a#home:link,a#home:visited, a#home:active, h2#home
{color: #ffcc00;}
a#about:link,a#about:visited, a#about:active, h2#about
{color: #cc33cc;}
a#meet:link,a#meet:visited, a#meet:active, h2#meet
{color: #3399ff;}
a#links:link,a#links:visited, a#links:active, h2#links
{color: #00cc00;}
ul#home
{list-style-image: url(../pictures/orange_bullet.jpg);}
ul#about
{list-style-image: url(../pictures/purple_bullet.jpg);}
ul#meet
{list-style-image: url(../pictures/blue_bullet.jpg);}
ul#links
{list-style-image: url(../pictures/green_bullet.jpg);}
#banner
{margin: 0 auto;
width: 100%;
text-align: center;}
#navcontainer
{margin: 0 auto;
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;}
#navcontainer li
{display: inline;
list-style-type: none;
padding:10px;}
#navcontainer li a:link, #navcontainer li a:visited, #navcontainer li a:active
{width: 56px;
height: 96px;}
#navcontainer li#home a:link, #navcontainer li#home a:visited, #navcontainer li#home a:active
{background: url(../pictures/orange1.jpg);}
#navcontainer li#about a:link, #navcontainer li#about a:visited, #navcontainer li#about a:active
{background: url(../pictures/purple1.jpg);}
#navcontainer li#meet a:link, #navcontainer li#meet a:visited, #navcontainer li#meet a:active
{background: url(../pictures/blue1.jpg); }
#navcontainer li#links a:link, #navcontainer li#links a:visited, #navcontainer li#links a:active
{background: url(../pictures/green1.jpg);}
#navcontainer li#home a:hover
{background: url(../pictures/orange2.jpg);}
#navcontainer li#about a:hover
{background: url(../pictures/purple2.jpg);
#navcontainer li#meet a:hover
{background: url(../pictures/blue2.jpg);}
#navcontainer li#links a:hover
{background: url(../pictures/green2.jpg);}
HTML
<div id="banner">
<img src="banner.jpg">
</div>
<div id="main">
<h2 id="home">Home</h2>
content
<ul id="home">
<li>listitem1</li>
<li>listitem2 etc</li>
</ul>
</div>
!THIS IS THE SECTION THAT DISAPPEARS WHEN DOCTYPE ADDED
<div id="navcontainer">
<ul>
<li id="home"><a href="index.php" title="home"></a></li>
<li id="about"><a href="about.php" title="about"></a></li>
<li id="meet"><a href="meet.php" title="meet"></a></li>
<li id="links"><a href="links.php" title="links"></a></li>
</ul>
</div>
Quirks Mode vs. Standards Mode [webmasterworld.com]
One thing you didn't mention -- which doctype are you using, and does your mark-up and css validate?
I used the HTML transitional doctype for a basic check, but was hoping to get it to validate to strict XHTML. Both of these, and the other 2 options, made that section disappear.
My CSS validates.
I haven't tried to validate the HTML because I wanted to a be happy with a doctype that would display everything correctly first! chicken/egg.
Will read about quirks now.
Thank you.
Have just used the w3c validator without putting the doctype in my document, so it defaulted to checking against the html transitional. Here are the results:
Line 34, column 8: ID "HOME" already defined
<ul id="home">
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hock for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).
1) Line 29, column 8: ID "HOME" first defined here
<h2 id="home">Home</h2>
2) Line 43, column 8: ID "HOME" already defined
<li id="home"><a href="index.php" title="Go to home page"></a></li>
3) Line 29, column 8: ID "HOME" first defined here
<h2 id="home">Home</h2>
I am confused. I knew that IDs had to be unique, but I thought that having h2#something and li#something WERE unique because h2 and li are different? Do I need to use h2#something and li#something_else? This is probably why that section isn't displayed properly with the doctype though... will give it a go.
Thanks Tedster for your help.
I thought my problem was because of the repeated ids.
I have now fixed all those so that the page validates to transitional HTML in the W3C validator when I add the necessary doctype.
BUT adding that doctype STILL makes the bottom section invisible.
Can anyone think of any other reasons why this might be?
Thanks, Katie
but I thought that having h2#something and li#something WERE unique
No, uniqueness (is that a word) is not determined by the element (li, h2) selector
an ID should be used to IDentify a unique area of a page, e.g. the header, navigation, footer etc.. the idea is that you can then directly anchor to such an identified area from another page. it's the #idname that uniquely identifies.
<div id="header"><p>heading text</p></div>
<div id="footer"><p>footer text</p></div>
You can then use the ID's in a specific selector order in order to target the elements inside those areas. e.g. for heading text red, footer text blue,
#header p {color: red;}
#footer p {color: blue;}
which cuts down of the amount of classnames you might need, becasue you've no need to assign different class names to the individual <p> elements you just use your already identified area to target with instead.
If you want you can use a classname mutliple times for a specific purpose in order to target many different elements, for example if you want to have all highlighted text to be lime green you would set up a class
.highlight {color: #0f0;}
then you can apply that class to ANY element (including ones with existing ID and class names) that you wish to be highlighted in that color.
Doctypes.. I would suggest sticking with an HTML Doctype first, if you can then validate that and the CSS and site is displaying OK, why not just leave it at that for now. using an XHTML Doctype is not necessarily "better" ;) but it is slightly different and many use it just to get into and maintain forward compatible coding practices.
XHTML involves a few slight changes in coding practices - it's case sensitive (everything lower case) and all elements must have closing tags, including self closing elements. e.g. <br />, <img />. Unless you need your pages to be XHTML (e.g. if you're using XML) there's nothing to say it has conform to an XHTML Doctype immediately.
If that's your goal, if you're trying to improve your coding practices by setting yourself the XHTML goal then it's possibly best to start with the XHTML Transitional Doctype and learn about what changes (from HTML) you will need to incorporate, than as a last move, if required move on to a Strict one. The difference between Transitional and Strict is very minor in a page coding sense, It tends to then just be a case of deciding which deprecated attributes you can/can't live without (e.g. the "target" attribute used on links is not allowed, and "name" is deprecated in favour of ID)
As you get closer to the goal the Validator errors will get less and less and the messages given by it will lead you the parts of the W3C recommendations that should explain the nuances, if not just ask here or the HTML forum if you're not sure about the messages. It is a nice feeling seeing the list reduce!
Suzy
try add in a high z-index to the navcontainer, there may be something else on the page covering it..
Suzy
I am in IE v 6.
I can see the nav section OK without the doctype, but when I add the doctype I can't see it anymore.
If something was covering it wouldn't it be covering it whether the doctype was there or not?
This is all so mysterious to me, just when you learn something new there's so much more of it!
Katie
>>If something was covering it wouldn't it be covering it whether the doctype was there or not?
You would think so wouldn't you ;)
IE without a Doctype is in Quirks Mode, but if you're using a correctly formed Doctype
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
that will be putting IE into Strict Mode, it could be that trigger that is causing IE to change the way it handles stacking order, (it's one of those things I just realised was connected to IE's many layout nuances) or it could be something else entirely!
however in saying that I'm still seeing the nav in IE with or without a Doctype, so I think I need a little more information, unless someone else knows off the top of their head..
Suzy
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Once I make it onle <html> - it works fine.
I hope it helps to find a solution,
M.Saulis
Using IE's zoom feature adding zoom:1 to the #content id seems to make it magically reappear.
[webmasterworld.com...]
Maybe its just a bug in your IE 6 that produces this error, or something else.
I automatically added some content into those links in navcontainer :( and then when I changed the background images on those links to colors (cos we don't have access to the images) they showed up so I missed the obvious doh... my bad
Once I removed the text again.. Yes the menu disappeared and it does so in all browsers, but it only does so in IE when the Doctype is used to switch to Strict Rendering Mode.
#navcontainer li
{display: inline;
list-style-type: none;
padding:10px;}#navcontainer li a:link, #navcontainer li a:visited, #navcontainer li a:active
{width: 56px;
height: 96px;}
Reason:
<a> is an inline element and according to the recommendations (which IE only invoke in Strict Mode) you cannot give an inline-element height or width, it ignores it.. then because there is no content in the links nothing is showing.
If you want to be able to size the links you have to make them {display: block;}. Now this will make them each take up a new line which I don't think you want.. so you have to line them up using float, instead of display: inline; in the <li> element.
Then you have to find a new way to center the list items because you can't center floats using margins or text align center.. they only either go left or right.. but you can centre the absolutely positioned container that holds them, with a little bit of counting..
Sorry for missing this first time around, this is one of those differences where it shows how it's best not to develop a site using IE, it's best to use a compliant browser like FireFox or Opera, but if you have to use it (wysiwyg preview?) then make sure it has that Strict Mode Doctype attached ;)
one solution...
by way of an apology.. see this code
#navcontainer {
/* margin: 0 auto; */ /* not required */
/* width: 100%; */ /* width not required as you can't centre floated divs like inline ones */
text-align: center;
position: absolute;
bottom: 0px;
left: 50%; /* center the div - but puts the left of the div to the center */
margin-left: -152px; /* Move the div half it's width back again to make it absolute center *~ I reckon this div is now 304px wide = 4 x 56px images and 10px padding around each */
background: #ffc; /* for visual resons only remove as necessary */
}#navcontainer ul {
padding: 0; /* zero the defaults to make sure there's no extra width applied */
margin: 0; /* zero the defaults to make sure there's no extra width applied */
list-style: none;
text-align: center;
}#navcontainer li {
display: block;
float: left; /* instead of display: inline; */
padding:10px;
}#navcontainer li a
{
display: block;
width: 56px;
height: 96px;
background: #dad; /* you replace with your images */
}#navcontainer li a:hover {
background: #eee; /* replace with your images */
}
Hope that helps, if not, ask away.. :)
Suzy
