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="http://www.website.com/great-british-refurb/2009/" 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="http://www.website.com/great-british-refurb/2009/" 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="http://www.theideacollector.com/wp-content/uploads/wp-post-thumbnail/gbr-1_Odk8R.jpg" />
		<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.theideacollector.com/earth-hour/2009/" 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="http://www.theideacollector.com/wp-content/uploads/wp-post-thumbnail/eh-1_Hjuu6.jpg" />
		<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.

Recommended Answers

All 3 Replies

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?

could you post up the CSS?

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?

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.