Firefox not displaying image - Joomla ;

Hi there,

I customized the content module so the title of an article displays an image before the text and the text is displayed with two colors!!

The relevant part of the code is at follows:

<h2 class="title">
			<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
			<a href="<?php echo $this->item->readmore_link; ?>">
				<div><span class="image-title"></span>
				<?php 
				$titles = explode(" ",$this->item->title);
 
					for ($i=0; $i<count($titles)-1; $i++){
						echo '<div style="float:left;padding-left:7px;color:#303030;">'.$this->escape($titles[$i]).'</div>';
 
					}?> 
					<div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div></a>
					<div style="clear:both;height:0px;"></div>
			<?php else : ?>
				<div><span class="image-title"></span>
				<?php
					$titles = explode(" ",$this->item->title);
					for ($i=0; $i<count($titles)-1; $i++){
						echo '<div style="float:left;padding-left:7px;">'.$this->escape($titles[$i]).'</div>';
 
					}?> 
					<div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div>
					<div style="clear:both;"></div>
			<?php endif; ?>
		</h2>

In both IE and Google Chrome everything is displayed as wanted (apart from ie which has some positioning problem but i’m not focusing on that now)

In firefox, I can see the content loading correctly but just before the page finish loading the image disappears… I just can’t understand why!!

You can take a look at this url: Atlantico Invest - Home

Can anyone please help??

Thanks

This is 90% probably caused due to your poor HTML. Validate your HTML and go from there.

I noticed several times amoung the page you have invalid code. Especially near the problem HTML, you have an anchor wrapping around block level elements such as <div>

Work on that.

I notice that if you disable javascript then the image appears so I guess that the JS is manipulating the DOM and due to the incorrect structure of the h2 (as Ryan stated above) then I’m guessing the browser is a little confused.

The first thing to do is to use valid code to eliminate that as a cause.

Your H2 should look like this to be valid.


<h2 class="title">
    <a href="/joomla/"> 
        <span class="image-title"></span> 
        <span style="float:left;padding-left:7px;color:#303030;">Business</span> 
        <span style="color:#06cfef;float:left;padding-left:7px;">ABC</span>
    </a> 
</h2>

Of course the inline styles should be applied by classes and you will need to set the anchor to display:block.


.component-content h2.title a{display:block}

As that h2 is floated you also need to make sure that following content is cleared otherwise it will try to wrap. (Of course it seems you don’t really need to float that h2 anyway so remove the float form the h2 and add overflow:hidden to contain the floated spans instead.)

None of the above may fix the problem but until you have a valid structure we won’t know where else to look.

Hi Paul!!

Thanks for your detailed explanation!! It’s really important to me 'cause i’m just beggining in this css things…

I proceeded with the changes you recommended but the problem remais!!

I noticed that you said it could be from javascript code… Any other idea? Why is this only happening in FF?

Thanks

The code is still broken and I see this structure in your page and not the code I gave you above.


<h2 class="title">
    <div><span class="image-title"></span>
        <div style="float:left;padding-left:7px;color:#303030;">Business</div>
        <div style="color:#06cfef;float:left;padding-left:7px;">ABC</div>
    </div>
    </a>
    <div style="clear:both;height:0px;"></div>
</h2>

Until that is fixed then we can’t really look anywhere else for the problem.

When the page is run the Dom is changed and a script changes the above to this.


<h2 style="visibility: visible;" class="title"><span> Business</span> ABC </h2>

That means the styling and image are not appropriate any more.

You need to first fix the code and then see if it corrects the issue. If not then you need to work out why the script is changing the html.

What is that script doing?

You put it there so you should know what it’s for. It seems to be something to do with this:


    window.addEvent('domready', function() {
                var modules = ['rt-block'];
                var header = ['h3','h2','h1'];
                GantryBuildSpans(modules, header);
            });
        

Try de-activating the scripts one at a time until you find out which one is causing the issue. But first fix that html that I mentioned originally to rule that out as a cause.

Hi there!! Thanks for the reply.

I changed it to spans but still didn’t solve the issue.

By pointing me to that function I found that my joomla template was already spaning my titles and i didn’t know.

Thanks for your help!!!

Your page seems to be giving a rather large series of PHP errors at the moment.

It was my testing server… Thanks!!!