getting validation error on id's

[ipecac]

Hi,

I'm getting an error when trying to validate my document as xhtml 1.1, stating that I already defined the CSS id "menu_item_title". I have several menu item titles and each one uses the id mentioned, but the validator doesn't seem to accept that I define an element with this id more than once. At least that's what the validator returns:

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 hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Does that mean that I will have to create individual ID (that visually look exactly the same but have a different id-title), in order to soothe the validator, or is there a workaround for this? The suggestion is that I use classes instead, but when I use classes it doesn't produce the same visual results as when using an id.

I guess this post is somewhat borderline css, so I'm sorry if I'm posting this in the wrong section.

Any thoughts on this?

Thanks!

[garann]

Trust the validator. :) An ID, by definition, is unique. If you use it more than once, it ceases to be of any value.

When you convert from IDs to classes, are you changing your CSS and your HTML? If you're updating both, you should see these elements displaying exactly the same way. If you are changing both and still seeing inconsistencies, maybe you could post a little of the CSS and HTML?

[ipecac]

Hi, thanks for replying :)

Well, I tried using classes instead of id's, but it doesn't look the same. Worth mentioning I'm not the sharpest tool in the shed :)

here's the css in question:

[b]#menu_item_title[/b] {
margin-bottom: 4px;
padding: 0px 3px 1px 3px;
border: 3px double #FFFFFF;
background-color: #a8360e;
text-align: right;
font-variant: small-caps;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
}

and the html used:

<div class="menu_item">
[b]<div id="menu_item_title">TITLE HERE</div>[/b]
<?php some_php_here;?>
</div>

When using classes, the background-color and border is restricted to only the width of the text, but when using id's the whole background and borders are stretched to the full width of my menu, which is 170px wide. While I tried adding width: 170px when making it a class, it still didn't stretch out like I wanted.

I'd like my pages to be standars compliant, but I don't know how to achieve the desired effect when using classes. In fact, I don't care what I use as long as the code is valid and that the menu titles are as wide as my menu's width.

Sorry, I'm having a hardt time explaning - hope you get what I'm trying to describe.

Thanks :)

[garann]

When using classes, the background-color and border is restricted to only the width of the text, but when using id's the whole background and borders are stretched to the full width of my menu, which is 170px wide. While I tried adding width: 170px when making it a class, it still didn't stretch out like I wanted.

That's a little weird, isn't it? Does it work if you change the id in the HTML back to a class and change your CSS like this?

.menu_item_title {
[b]position:relative;
display:block;
width:170px;[/b]
margin-bottom: 4px;
padding: 0px 3px 1px 3px;
border: 3px double #FFFFFF;
background-color: #a8360e;
text-align: right;
font-variant: small-caps;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
}

If that doesn't do it, I got nothing... You'd probably need to post all of your CSS.

[ipecac]

That's just beautiful! Workes like a charm, validates and looks good in the major browsers, except for IE (shockingly enough - not), as it won't display

border: 3px double #FFFFFF;

, instead there is no border - is that possible to fix?

Superthanks Garann, I really appreciate it :)

[Julez]

That style works fine for me 'as is' in IE 6/Windows. Post a link here or a cut-down version like the one below if you're still having problems. Does this look OK for you? I set the page background to black because the border is white:

<!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>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.menu_item_title {
position:relative;
display:block;
width:170px;
margin-bottom: 4px;
padding: 0px 3px 1px 3px;
border: 3px double #FFFFFF;
background-color: #a8360e;
text-align: right;
font-variant: small-caps;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
}
</style>
</head>
<body style="background-color: #000">
<div class="menu_item">
<div class="menu_item_title">TITLE HERE</div>
</div>
</body>
</html>

[ipecac]

Your example works fine in IE 6, displays the double border and everything, but I guess that's due to the fact that the background is black. If I change the background-color in your example to white, it doesn't show. It's only logical, since the both the border and background are set to white. However, in Opera 8.5, the border is visible no matter what color my background is.

So, which browser is displaying the CSS correctly: Opera or IE? I kinda tend to think IE usually gets it wrong, but that might not be the case here (for once) :)

[Julez]

I see what you mean.

Should the space between the double border be the background colour of the bordered element (as Opera/Mozilla) or the parent element (as IE)? We can probably guess what the spec says, but how do we get it to work the same in all? Use nested divs and set the background color on the parent and the border on the child:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.menu_item {
background-color: #a8360e;
width:170px;
margin-bottom: 4px;
}
.menu_item div {
padding: 0px 3px 1px 3px;
border: 3px double #fff;
text-align: right;
font-variant: small-caps;
font-size: 13px;
font-weight: bold;
color: #fff;
}
</style>
</head>
<body>
<div class="menu_item"><div>TITLE HERE</div></div>
<div class="menu_item"><div>TITLE HERE</div></div>
</body>
</html>

[ipecac]

I didn't get your example to work, but strangely enough, this code seems to do it:

.menu_item_title {
position: relative;
display: block;
padding: 2px 3px 3px 3px;
margin-bottom: 4px;
border: 3px double #FFFFFF;
background-color: #a8360e;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #FFFFFF;
text-align: right;
text-transform: uppercase;
letter-spacing: 1px;
}

Why it suddenly appears correct in IE is a mystery to me, because it's basically the same code I used earlier, but it doesn't really matter as long as it gets the job done :)

Thanks for leading me to the solution :)

[ipecac]

I know what kills the double border in IE.
It's the css

width

element.
Whenever I add it, the double border
disappears, and upon removing it, it's
there again.