SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    Code:
    <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

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,823
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code:
    <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.

    Code:
    .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.
    Last edited by Paul O'B; Jun 6, 2011 at 12:52. Reason: typo

  4. #4
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Quote Originally Posted by Paul O'B View Post
    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 elimimate that as a cause.

    Your H2 should look like this to be valid.

    [code]
    <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.

    Code:
    .component-content h2.title a{display:block}
    As that h2 is floated you also need to make sure that floowing 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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,823
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jribeiro View Post
    Hi Paul!!

    I proceeded with the changes you recommended but the problem remais!!
    The code is still broken and I see this structure in your page and not the code I gave you above.

    Code:
    <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.

    Code:
    <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:

    Code:
        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.

  6. #6
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,823
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Your page seems to be giving a rather large series of PHP errors at the moment.

  8. #8
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Your page seems to be giving a rather large series of PHP errors at the moment.
    It was my testing server... Thanks!!!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •