Member Avatar for dipunm

I just finished a wordpress theme and all was ok.

Problems only started once we added more articles...

I don't know if this is firefox or what, but here is what happens..

<li id="post-83">
	<a class="block" href="" rel="bookmark">
		<h2>British Refurb</h2>
		<div class="subtext">
			WRITTEN BY: Name <br>
			POSTED ON: 28/09/09
		</div>
		<img alt="thumbnail" src="http://www.website.com/wp-content/uploads/wp-post-thumbnail/gbr-1_Odk8R.jpg" height="106" width="225">
		<div class="partial">
			Money is a sore subject for anyone, even more so with the credit crunch. But what's worse is the state of our climate. The unpredictable weather, disappearing sea levels and habitats of many iconic ... <span class="more-link">READ MORE</span>	
		</div>
	</a>
</li>
<li id="post-72">
	<a class="block" href="http://www.website.com/earth-hour/2009/" rel="bookmark"></a>
	<h2><a class="block" href="http://www.website.com/earth-hour/2009/" rel="bookmark">Earth Hour</a></h2>
	<a class="block" href="http://www.website.com/earth-hour/2009/" rel="bookmark">					</a>
	<div class="subtext">
	<a class="block" href="http://www.website.com/earth-hour/2009/" rel="bookmark">
		WRITTEN BY: Name						
		<br>
		POSTED ON: 28/09/09					
	</a>
	</div>
	<a class="block" href="http://www.website.com/earth-hour/2009/" rel="bookmark">					
		<img alt="thumbnail" src="http://www.website.com/wp-content/uploads/wp-post-thumbnail/eh-1_Hjuu6.jpg" height="106" width="225">
	</a>
	<div class="partial">
		<a class="block" href="http://www.website.com/earth-hour/2009/" rel="bookmark">													I dug this up from last year's November issue of Campaign. It was an idea that evolved around pursuading people in Sydney to switch off their lights for 60 minutes, saving 24.86 tonnes of CO2 emissions, ... <span class="more-link">READ MORE</span>
		</a>
	</div>
	<a class="block" href="http://www.website.com/earth-hour/2009/" rel="bookmark">				</a>
</li>

As you can see, one looks ok, and the other seems to have split the anchor tag all over the place. This is what was generated when I chose to read source from selection...

The source, however, what comes from the server, is here:

<li id="post-83" >
	<a class="block" href="" rel="bookmark">
		<h2>British Refurb</h2>
		<div class="subtext">
			WRITTEN BY: Name	<br />
			POSTED ON: 28/09/09					
		</div>
		<img alt="thumbnail" width="225" height="106" src="" />
		<div class="partial">
			Money is a sore subject for anyone, even more so with the credit crunch. But what's worse is the state of our climate. The unpredictable weather, disappearing sea levels and habitats of many iconic ... <span class="more-link">READ MORE</span>
		</div>
	</a>
</li>
<li id="post-72" >
	<a class="block" href="" rel="bookmark">
		<h2>Earth Hour</h2>
		<div class="subtext">
			WRITTEN BY: Name	<br />
			POSTED ON: 28/09/09
		</div>
		<img alt="thumbnail" width="225" height="106" src="" />
		<div class="partial">
			I dug this up from last year's November issue of Campaign. It was an idea that evolved around pursuading people in Sydney to switch off their lights for 60 minutes, saving 24.86 tonnes of CO2 emissions, ... <span class="more-link">READ MORE</span>
		</div>
	</a>
</li>

This only happens on firefox... on pc, and also, the client noticed it a few times on firefox for mac.

This change of code makes firefox render the code wrong... also, the page is rendered in standards mode, and the output is w3c valid when i run the webpage thought it

Any help appreciated

PS. this problem is kinda random and not random at the same time: The problem occurs occasionally but not all the time, also it happens in different places but usually the same different places... the example i am giving is one of those places.

Edited by dipunm because: added notes
  • 3 Contributors
  • 3 Replies
  • 123 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by dipunm

Dani AI

Generated

A few clarifications and practical fixes that follow from the thread.

was correct for HTML4: anchors were restricted to inline content. In HTML5 the rules changed and a single <a> may wrap block-level children. See the spec and summary on MDN for the current rules and best practices: MDN: <a> element.

If the goal is a clickable “card” without duplicate visible link text, the simplest robust approach today is to wrap the whole card in one anchor and place the visible “READ MORE” inside that same anchor, then position it with CSS. Keep one descriptive link for accessibility and SEO (for example add a hidden, screen-reader-only phrase that names the article). Example patterns:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

<a class="card" href="/post/slug">
  <h2>Article title</h2>
  <p class="excerpt">Short excerpt...</p>
  <span class="more">READ MORE</span>
  <span class="sr-only">Read full article: Article title</span>
</a>

.card { display:block; position:relative; }
.card .more { position:absolute; right:12px; bottom:12px; }

If old Firefox (or any legacy browsers) must be supported and block anchors cause rendering bugs, use a single semantic link for content and a small unobtrusive JS fallback that makes the whole container behave like a link—ensuring keyboard handling (Enter/Space) and role="link" per the WAI-ARIA guidance.

Troubleshooting tips tied to the original reports: inspect the live DOM with DevTools rather than relying on “selection source”; test with extensions disabled (ad/network injectors can modify DOM); validate output with the W3C validator (validator.w3.org); and prefer one descriptive link per article for accessibility and search engines instead of visually duplicating “READ MORE.” For keyboard/accessibility details see the WAI-ARIA authoring practices.

Recommended Answers

All 3 Replies

Member Avatar for Troy III

you've placed heavy block elements inside inline tags -that is: links!
You say your code is validated - but seeing this I don't quite believe that.
+
-Are you hosting advertisements in your pages through iframes and similar?

Edited by Troy III because: n/a
Member Avatar for urolicious

could you post up the CSS?

Member Avatar for dipunm

Hey guys,

Thanks for your replies.

I used the doctype of html 5... which allows for block links (ie links are now block and can contain block elements). I did some research, and it seems this is a firefox bug. Its ok, I worked around it now. I put the link after the text and positioned it over the whole area... I guess I just got excited about block links in HTML5 and because it worked in ie 7, I thought it would work anywhere... The only thing now is, the link is empty. I could put "read more" inside it, but it would never be positioned correctly so I would need to hide it (using negative indent or something)... the only thing is that for text readers (google bot etc.) they would read "READ MORE" twice!! (because I need read more there visually, even though, the whole thing is the link).

What do you guys think?

Edited by dipunm because: n/a
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.