XHTML troubles

[Gorion]

Righty, I have a bit of a problem with xhtml and the w3c validator.

Context:  Menu bar with an image linking to a page.  Image has normal/hover/active variants and uses z-index in order to switch between the images/buttons.  All the stuff is located in an external .css file.

So, this is the actual coding:

         
• 
                 
  
              

      

This is the error:

"document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag"

Putting the anchor/link inside the div solves the error, but removes the "linking" from the button - making it useless.

Like so:

      
• 
                 
  
              
   

      

Does anyone have an idea how to solve the "error" while still leaving the button working properly?

[ArithonUK]

I can't remember the exact rule, but basically you can't have a DIV inside an anchor.

I had this problem and used instead of

.

• 
  
  

So the CSS might read...

div.menu { ... }
div.menu span.home-button {...}
div.menu span.forum-button {...}

etc.

Hope that makes sense and works for what you want.

[Gorion]

Gave it a go, but the moment I change div to span; the button vanishes (never used span before).

Here's the menu and button css just in case they do a difference.

#menu
{
   background-color:#330A06;
   margin:auto;
   clear:both;
   height:30px;
   width:935px;
   padding-top:5px;
}

#Home_button
{
   background-image:url("buttons/home_yellow.png");
   background-repeat:no-repeat;
   width:105px;
   height:45px;
   z-index:1;
}

#Home_button:hover
{
   background-image:url("buttons/home_white.png");
   background-repeat:no-repeat;
   width:105px;
   height:45px;
   z-index:1;   
}

#Home_button:active
{
   background-image:url("buttons/home_black.png");
   background-repeat:no-repeat;
   width:105px;
   height:45px;
   z-index:1;
}

[Dewey]

Try using a .class instead of a div.

[A Twig]

Best explanation I found is here, I have unashamedly copied it below:
http://stackoverflow.com/questions/3722528/xhtml-placing-divs-in-a-tags

Code Select Expand

Is it alright to place div tags inside anchor tags?

Yes, if:

You are using HTML5/XHTML5; and
The anchor tag is not in an inline context. i.e. a descendant of an element that only allows phrasing content.
Otherwise no.

In HTML5/XHTML5 the <a> element in not simply an inline element as it is in HTML4/XHTML1. Instead it has a transparent content model, which means that the validation rules are the same as if it wasn't there.

So for example

<div>
   <div>Hello World</div>
</div>
is valid, so

<div>
   <a href=#&quot;>
      <div>Hello World</div>
   </a>
</div>
is too.

But

<p>
   <div>Hello World</div>
</p>
is not valid, so

<p>
   <a href=&quot;#&quot;>
      <div>Hello World</div>
   </a>
</p>
isn't either.


For the site I built I used this:

Code Select Expand

• 
  
  

You may need to add display:block to the css though, can't remember if I did. The site I built using this layout can be seen http://www.bathstudent.com/summerball2011/home/]here[/URL] if that helps

[Gorion]

Unfortunately I'm bound to xhtml1.0 (has to pass the verification).  I uploaded the button, html and .css in question.  If anyone can solve this problem I'll be grateful.  New to directly coding css and xhtml myself; this bloody button is driving me insane.

[ArithonUK]

Gorion, the solution is actually simpler. No need for DIV at all for what you were doing.

Page code

   

CSS Script

#homeBtn
{
    background:url("buttons/home_yellow.png") no-repeat;
    display: block;
   width:105px;
   height:45px;
}
#homeBtn:hover { background:url("buttons/home_white.png") no-repeat; }
#homeBtn:active { background:url("buttons/home_black.png") no-repeat; }

In fact, I'd combine the 3 (65KB) PNG files into a single (7KB) GIF per button, and use background offset on the hover and active properties to "scroll" the image, so all the images are loaded with the page.

CSS would then be

#homeBtn
{
    background: url("buttons/home.gif") no-repeat 0 0;
    display: block;
    width: 105px;
    height: 45px;
}
#homeBtn:hover { background-position: 0 -44px; }
#homeBtn:active { background-position: 0 -88px; }

[Gorion]

Thanks a million, it finally works and is XHTML1.0 verified.

Finished the whole bloody website in less time than that menu bar.

If we ever meet, you'll be getting free beer or whatever you like to drink.

[A Twig]

Gorion, the solution is actually simpler. No need for DIV at all for what you were doing.

Oh look, it's exactly what I said!

[Gorion]

Doh, didn't realise that.

Sorry bout that, new to this and some things are pretty much chinese.