problem with <a> encapsulated DIVs

  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

Hi,

It was to my understanding that i could encapsulate DIV elements in links, but apparently I can't (according to W3C validation). This poses as a problem, since I'm about 50% done my site, and my entire navigation/theme depends on this.

Here is what W3C complains about:

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

Code: [ Select ]
<a href="link.htm">
<div class="button">BUTTON</div>
</a>
  1. <a href="link.htm">
  2. <div class="button">BUTTON</div>
  3. </a>

Quote:
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").


Um, how exactly can I "fix" this? That is, how can I make the buttons work effectively the same way, without compromising W3C compliance? The doctype is XHTML 1.0 Transitional.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Change the display to block for those <a> elements via CSS.

You can target them as descendants of a container, or assign them a className & target them by that.

CSS Code: [ Select ]
#container a:link, a:link.special
{
   display: block;
}
  1. #container a:link, a:link.special
  2. {
  3.    display: block;
  4. }
  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

I tried the following:

Code: [ Select ]
a:link.special {
display: block;
}

a:visited.special {
display: block;
}

a:hover.special {
display: block;
}
  1. a:link.special {
  2. display: block;
  3. }
  4. a:visited.special {
  5. display: block;
  6. }
  7. a:hover.special {
  8. display: block;
  9. }


Code: [ Select ]
<a href="link.htm" class="special">
<div class="button">BUTTON</div>
</a>
  1. <a href="link.htm" class="special">
  2. <div class="button">BUTTON</div>
  3. </a>


Doesn't work. Any ideas?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

First try

HTML Code: [ Select ]
<a href="link.html" class="button special">BUTTON</a>


Next try

Code: [ Select ]
<a href="link.html" class="special">
   <span class="button">BUTTON</span>
</a>
  1. <a href="link.html" class="special">
  2.    <span class="button">BUTTON</span>
  3. </a>


Make sure ".button" doesn't specificly target <div> elements "div.button". If it does, change it to "span.button".
  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

Um, I'm not quite sure I understand your reasoning for "button special".

Just so I can line this up in my head... what makes you think that the code I posted above doesn't work? I mean, clearly it doesn't, but what is your reasoning as to why?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Does either of the second suggestions work ?
  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

I just converted them all to span, with no special attributes for the a tags. Works.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

I was wondering if the childNode of the <a> could be omited, that was the reasoning behind both class names being applied to the <a> element. I didn't want to mention altering the CSS again unless what was there already was working.

I figured the <div> only existed for the built-in block display and maybe some border or other styles from the button class.
  • Drake
  • Beginner
  • Beginner
  • User avatar
  • Posts: 47
  • Loc: Canada

Post 3+ Months Ago

joebert wrote:
I was wondering if the childNode of the <a> could be omited, that was the reasoning behind both class names being applied to the <a> element. I didn't want to mention altering the CSS again unless what was there already was working.

I figured the <div> only existed for the built-in block display and maybe some border or other styles from the button class.

I don't even know what a childNode is.

Yes, the div was only there for styling, and the default linebreak after each "button". I wasn't aware you can make a span into a div by giving it a display: block attribute.

To be honest, I'm not entirely certain of the functional difference between a span and a div. I just tend to use span for modifying small lines of text, and div for actual layout elements, which is why I opted for div in the first place for the buttons.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Hopefully this makes sense, I can't explain it any better. :)

Code: [ Select ]
<parentNode>
<childNode/>
</parentNode>
  1. <parentNode>
  2. <childNode/>
  3. </parentNode>

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 21 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.