This is an article discussion thread for discussing the SitePoint article, “Build Your Site Navigation With CSS”
I think this is an excellent article that explains clearly how to set up navigation using CSS.
However, if you omit the xml statement (<?xml version=“1.0” encoding=“UTF-8”?>) in a XHTML page (which I do in order to prevent IE to move into Quirks mode), the top and bottom borders and/or padding gets deformed (actually hardly any border/padding remains).
How can I use the CSS code and still not have IE move into Quirks mode? (in other words, what am I doing wrong?)
Thanks in advance!!
I’m not sure what you mean? Do you have an example as both the examples I looked at within the article don’t use the XML declaration before the Doctype.
If taking the browser out of quirks mode causes you problems then there’s obviously something not quite right in your code and possibly some kind of conflict somewhere.
If you can post the code I’m sure I or somebody else will be able to help.
the top and bottom borders and/or padding gets deformed
I haven’t looked specifically at the problem but usually you will need to add position:relative to inline elements in order for the fulll padding and borders to show. Otherwise the height:1% hack may be needed.
Try position:relative first 
paul
Thanks for the reaction guys!!
csswiz: what I meant is that I have copied the CSS code from the article for use in another site I am buidling for a friend of mine. Normally I use the official XHTML document setup that comes with the XML statement. I earlier had some problems with someone to enter text in my Guestbook on a live site that uses a script provided by my provider. He was using IE, and I tried to solve the problem by removing the XML statement at the beginning of the XHTML document (as it is not obligatory…) It didn’t help, but it keeps IE out of quirks mode.
Now, I have used the code from the article to set up the navigation in a new site, and omitted the XML statement in my XHTML code. It still works fine in Opera or Netscape, but the top margins and bottom margins become very small in IE (6), which poses a problem.
I’ll try Pauls’ solution first, and it that doesn’t solve the problem, I’ll post the code.
Thanks again!!
CSSwiz and Paul: It doesn’t work: When I use Pauls’ suggestion, the top and bottom borders disappear altogether.
Here’s the code from the page:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title></title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<meta name=“description” content=“” />
<meta name=“keywords” content=“” />
<meta name=“author” content=“Swier Miedema” />
<meta name=“generator” content=“AceHTML 5 Pro” />
<link type=“text/css” rel=“stylesheet” href=“css/first.css” />
<!-- Created on: 2-2-2005 –>
</head>
<body>
<!-- navigation –>
<a href=“index.html” class=“button”
title=“Wie en wat is Equitad”>Wie zijn wij?</a>
<a href=“Wat_Equitad.html” class=“button”
title=“Wat doet Equitad”>Wat doen wij?</a>
<a href=“Hoe_Equitad.html” class=“button”
title=“Hoe doet Equitad zijn werk”>Hoe doen we dat?</a>
<a href=“Ervaringen_Equitad.html” class=“button”
title=“Wat zijn onze Ervaringen”>Ervaringen?</a>
<a href=“Contact_Equitad.html” class=“button”
title=“Contact met Equitad”>Contact?</a>
</body>
</html>
And the CSS code (copied from Larisa Thomasons article):
body
{
background-color: #FFFFCC;
}
a.button:link
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-style:outset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:navy;
}
a.button:visited
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-style:outset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:navy;
}
a.button:active
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-style:inset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:maroon;
}
a.button:hover
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-style:inset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:maroon;
}
What am I doing wrong?
This works for me:
a{position:relative}
However I don’t think thats a very sematic way to build a menu. It would be much better structured using lists.
Paul
I was probably getting overly enthousiastic. I can’t get it to work properly. I’ll leave it for now and stick with a list. That’s worked before and is quite reliable.
Thanks for the quick reaction Paul!!
Swier.
I should also point out that an anchor is an inline element and therefore will not accept widths unless you are using ie5/5.5. (or ie6 in quirks mode).
Other browsers will not apply dimensions to inline elements as per the specs. Therefore you will need to change the design if you wish to accomodate other browsers.
You can define the anchors as block level and then dimensions will take effect but you will then need to float them to line them up side by side.
Paul
Okay, Now I understand! I removed the XML statement from the XHTML header to prevent it to move into quirks mode, and that’s what causes the problem. Thanks for the explanation, now at least I understand why. I will proceed with this later, when I’m a little more experienced.
Swier.
Paul,
It looks as if my editor is a little slow in using saved files. I have saved the changed files a few times now and suddenly the top and bottom margins started to appear!!
So your solution works for me now too!!
Sorry about the confusion!
Swier.
Yes you need to refresh the browser a few times when you change the css.
I always test locally with the css in the head of the document and never have a problem. I only remove the css to an external file once i’ve finished debugging it.
Paul
Thanks for the tip!!
Hey. Nice little how-to. One question, though. On the first example of the horizontal links, wouldn’t you have to include the ‘button’ class trigger to the actual CSS tags? Ex: a.button:link
Sorry. Just looked back at the example shown. They are there. Boy, I feel stupid now. 
Amazing - puts a new light on navs!