A and P tags not playing Nice in FF

Firefox appears to be downloading the HTML incorrectly - or changing it...

[DrKuron]

Hi - This is my first post, so be nice...or don't.

I recently built [a page where] the formatting is incorrect in Firefox, but just fine everywhere else (chrome, IE7/8, Safari have been checked).

When I look in Firebug, it appears as though the HTML is not the same as what exists on the server, or what downloaded on other browsers.

Specifically, the content of the final LI tag under the "subnav" element is entirely differnt.

This is how the source HTML file is coded (notice in particular, an A tag with P tags inside it):

<div id="subnav">
 <ul>
 ...
 <li>
 <a class="iconTest mapIcon" href="mapping.html"><em>Mapping</em>
 <p class="first-child">
  Floor plans
 </p>
 <p>
  Exhibition hall maps
 </p>
 <p>
  Local guides
 </p>
 </a>
 </li>
 </ul>
</div>

However, this it was Firebug shows me:

<div id="subnav">
 <ul>
 <li>
 <a href="mapping.html" class="iconTest mapIcon"><em>Mapping</em>
 </a>
 <p class="first-child">
 <a href="mapping.html" class="iconTest mapIcon">Floor plans</a>
 </p>
 <a href="mapping.html" class="iconTest mapIcon"></a>
 <p>
 <a href="mapping.html" class="iconTest mapIcon">Exhibition hall maps</a>
 </p>
 <a href="mapping.html" class="iconTest mapIcon"></a>
 <p>
 <a href="mapping.html" class="iconTest mapIcon">Local guides</a>
 </p>
 <a href="mapping.html" class="iconTest mapIcon"></a>
 </li>
 </ul>
</div>

Is there something obvious I'm missing? Is it something to do with <P> tags inside of <A> tags? Or more specifically, block elements inside of inline elements?

Thanks in advance,
DK

[edited by: tedster at 6:00 am (utc) on Mar 25, 2010]
[edit reason] no personal links, please [/edit]

[lavazza]

Is it something to do with <P> tags inside of <A> tags?

Probably...

A is an inline element and should not contain block level elements such as P

See Google: html block-level elements [google.com]

[g1smd]

Run the page through the W3 HTML validator [validator.w3.org...] and fix all of the listed errors.

Delete, all the <p> tags. Make each link a <li> list item.

Additionally, observe this simple rule for CSS: 'if you are repeating something over and over again in the HTML, move it to the parent element and declare it once'.

That is, apply the class name to the <ul> tag. and style the list item links using:

ul.class li a {style: value;}

[penders]

When I look in Firebug, it appears as though the HTML is not the same as what exists on the server, or what downloaded on other browsers.

This is probably Firefox's interpretation of your HTML - since the actual HTML is invalid. Chrome and other browsers will do similar - but their interpretation of invalid markup can be different.

[drhowarddrfine]

but their interpretation of invalid markup can be different.

Which is the exact reason why valid markup is critically important.

[DrKuron]

Awesome, thanks so much for all the help. You guys are great!