Member Avatar for tefflox

I have an anchor over an image, a subsequent <p>, and a seond image. I'm trying to validate xhtml transitional, and it says, for each of the three elements:

missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag...

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>").

the format is <a> <h3....><img /> <p> <h3....><img /> </a>

what is a good solution for this?

  • 3 Contributors
  • 5 Replies
  • 83 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by tefflox

Dani AI

Generated

The validator error comes from invalid nesting: an inline anchor cannot contain block-level elements in XHTML 1.0/HTML4. was correct to call out unclosed tags and bad structure — closing tags and proper nesting are the first fixes. Two practical approaches: (1) keep the anchor as an inline element inside a block-level container (put the <a> inside the <h3>/<p>/div rather than wrapping them), or (2) move to an HTML5 doctype (HTML5 allows anchors to wrap flow content). See the HTML anchor content model and block-vs-inline notes for details: MDN — a element and .

A simple valid structure example (XHTML/HTML4-friendly) is to keep each block element as the parent and place the anchor where needed:

<div class="item">
  <h3><a href="...">Title</a></h3>
  <p><a href="...">Description</a></p>
</div>

The dotted box you see in Firefox is the keyboard focus indicator. 's note about removing image borders addresses image borders only; tried disabling the outline in Firefox, but removing the focus indicator breaks keyboard accessibility. A better practice is to replace the default focus ring with a clear, visible focus style so keyboard users still have a cue (for example, a focused link can get a distinct glow or border). For accessibility and focus handling guidance, see MDN — outline and using tabindex responsibly: MDN — tabindex.

Recommended Answers

All 5 Replies

Member Avatar for tgreer

There isn't a "solution", per se. The structure you're trying to create isn't a valid structure, for several reasons. Your H3 tags aren't closed. Your paragraph tags aren't closed. You cannot place block-level elements, such as paragraphs, within inline elements, such as anchors.

You also can't wrap multiple elements inside of a single anchor.

Please describe what you're trying to do, as the code you posted as an example of your format is syntactically meaningless.

Member Avatar for tefflox

thanks for the reply. I used a class with centering and 0 padding for a <p> which includes the individual anchors, and validates okay...

is there a way to keep firefox from putting that box around the image anchor? that dotted line? it's really annoying me. thanks again.

Member Avatar for tgreer

You seem to be asking several questions. Please narrow your posts down to a single, specific question, and I'll try to answer it.

Paragraphs can contain anchors. Anchors cannot contain paragraphs, as in your original post.

With your latest post, I think you're referring to the border property? If you don't want a border, for your image or anchor, apply the "border-style: none" CSS property to those elements.

Member Avatar for FC Jamison

The CSS style you want to eliminate the border around images in an anchor tag is:

a img { border: none }

Member Avatar for tefflox

actually i have to use a {outline:none} for firefox, but i havent tried to use "a img {....}"

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.