By Paul_83uk on

Please help My navigation is getting thrown out, on random pages the positioning is getting messed up.

when looking at the source code everything looks fine:

<li class="solprod">
<a href="/en/solutions-and-products-overview">
<h4>Solutions & Products  | </h4>
</a>

but when using Firebug it shows this:

<li class="solprod">
<a href="/solutions-and-products-overview"/>
<h4>
<a _moz-rs-heading="" href="/solutions-and-products-overview">Solutions & Products  | </a>
</h4>
<a href="/solutions-and-products-overview"> </a>

this is the actual code behind it all if that helps

<li class="solprod"><a href="/en/solutions-and-products-overview"><h4>Solutions &amp; Products &nbsp;| </h4>
				<!--[if IE 7]><!-->
				</a>
				<!--<![endif]-->

				<table><tr><td>
					<ul>
						<li><strong>Business Solutions</strong></li>
						.......... list for navigation ........
						<li><a href="/en/report2web/">Report2Web</a></li>
					</ul>

				</td></tr></table>
				<!--[if lte IE 6]>
				</a>
				<![endif]-->
				</li>

I can't work out a pattern but it happens on certian PC's more than others? (all Windows + firefox 2)

⋅ Categories: Drupal 4.7.x

Comments

jp.stacey’s picture

jp.stacey commented

This looks like it's nothing to do with Drupal.

  1. Your original source is invalid HTML: you can't put <a> tags round block elements e.g. <h4>, <table>, <div> or <p>. You need to put them within the <h4> element.
  2. The "if IE 7" switch is broken (see How To Use IE Conditional Comments in "XHTML") but it wouldn't serve the purpose you want it to anyway, which would apparently be to have the whole table within a single <a> element in Firefox. Firefox knows that's broken HTML and typically just disables the link. Arguably you should only really use those non-standard "if IE" switches in your CSS links, as a workaround for IE's abysmal interpretation of the CSS standards: anything else reduces the accessibility of your pages.
  3. Firefox and Firebug together seem to be actually fixing your broken HTML for you. But it can only guess what you actually meant to a certain extent: it can't do it perfectly, and it tries to put the whitespace before and after the <h4> element in separate <a> elements too.
  4. Firebug might also be adding the _moz-rs-heading attribute when it tries to fix your HTML.

Fix your HTML (free online validator at http://validator.w3.org/), remove those unused "if IE" switches and disable Firebug, and see if this goes away. Firebug is a complex debugging tool: you shouldn't be surprised if it does weird things to your HTML, but if the problem isn't in the actual source then it's not strictly speaking Drupal's fault. It might of course be a faulty downloaded theme that's producing this bad HTML, in which case I'd complain to the theme maintainer.

(You also shouldn't be using tables for layout, incidentally, if that's what that <table> element is doing: use <div>s and appropriate CSS.)

--
J-P Stacey, software gardener, Magnetic Phield

Paul_83uk’s picture

Paul_83uk commented

Thanks for the help it was the <h4> tags being within the <a> tags i had validated the code earlier when i took over this project but when I messed up i backed up back to the previous guys code. (and forgot to change it again)

Thanks for the link with info on the conditionals