XHTML validation

theMAD2

theMAD2

theMAD2

Associate
Joined
2 Aug 2005
Posts
680
I've just run a watchfire validation on a site that I am building and I've come across a little problem. Is this sort of code ok?

<div id="buttonspacel"></div>
<a href="../index.php" id="button1" title="Home"></a>
<a href="../retro.php" id="button2" title="Retro"></a>

...and a list of other links to main sections of the site. These links are stored inside a div and all links are pictures as defined in my CSS. This is failing the watchfire under "3.1 Create link phrases that make sense when read out of context.". Does anyone know a good way for me to fix this?

Any advice appreciated.
 
It's specified in my CSS as

#buttonspacel,#buttonspacer {
width:12px;
}

and

#buttonspacel { background-image:url(images/buttonspacel6.gif); }

It's basically to make my html code only information and keep all formatting and style information in the style sheet. Do you know how I can get the A tags to validate?
 
They should be validating ok like that. Is your site uploaded yet?

edit: Is watchfire an accessability validator?
 
Last edited:
Put some text in the link, then hide it with CSS. That way users with CSS disabled can still read the text links.

To hide the text, look at some image replacement techniques; the easiest, I find, is to do:

Code: 
#navigation a {
    display:block;
    width:80px;
    height:15px;
    text-indent:-5000px;
    overflow:hidden;
    background:url(./path/to/image.png) no-repeat bottom left;
}
 
theMAD2 said:
would that be valid?
Click to expand...
It would, but there are certain problems with that. A number of screenreaders will see that rule, and interpret it as it is - don't 'display' this section i.e. don't read it out to the user.

The text-indent trick or absolutely positioning a couple of thousand pixels to the left ensures the text is still being actively displayed, but not visible in the available viewport.
 
Unless maybe I setup an aural stylesheet and enabled the text. It sounds easier to go with the indent option though. Thanks everyone :)
 
theMAD2 said:
Unless maybe I setup an aural stylesheet and enabled the text.
Click to expand...
True, you could, but then the user-agent may not support the aural stylesheet or the user may be using an external screenreader program e.g. a user may be using IE6 and running a screenreader program that just reads the text that is present on the page as it is rendered by the CSS :).
 
theMAD2 said:
Good point mate. I'll use the text indent. Hopefully no one's got a monitor THAT big so they won't see the text :)
Click to expand...
The line overflow: hidden; means that it won't be visible no matter how much screen real estate the user has. This particular method is called the Phark Image Replacement technique, and although there have been a number of revisions over the years, the principle has always remained the same.

On a completely unrelated note, your "buttonspacel" div looks a bit strange. You shouldn't purposely alter your HTML (aside from adding id and class references) for style purposes. Have you not heard of the margin and padding CSS attributes? You should place all the navigation links in a <div> (An unordered list would be better, but it's awfully difficult to explain) and give that a margin, rather than putting a div in just to use as a spacer. I must admit, I've never seen someone doing that before; you'd be better off going back to transparent image spacers than using that! :p
 
I've got a set of rollover buttons at the bottom of the page, and the whole site has a 10px margin around it. The spacers just seperate the buttons from the side. I did this because the buttons are the same graphics on every page but the background changes, so the style for the buttonspace is set in the head of the html. Is there another way I could do this?

You mentioned the menu, do you mean set it up as a list with display:inline; ?
 
Last edited:
theMAD2 said:
I've got a set of rollover buttons at the bottom of the page, and the whole site has a 10px margin around it. The spacers just seperate the buttons from the side. I did this because the buttons are the same graphics on every page but the background changes, so the style for the buttonspace is set in the head of the html. Is there another way I could do this?
Click to expand...
Presuming the background image for the page continues behind the buttons, you could ditch the spacer divs and change #buttons in your CSS to the following:
Code: 
#buttons {
  height: 51px; 
  margin: 0 12px;
}
That would put a margin of 12px on each side of the #buttons div, and as margins are transparent, the background should show through.

theMAD2 said:
You mentioned the menu, do you mean set it up as a list with display:inline;
Click to expand...
Something along those lines. Making your navigation an unordered list is more semantically correct, but it's a pain to work the CSS out and, to be honest, it seems fine as it is right now :)
 
You must log in or register to reply here.
Back
Top Bottom