Search code examples
javascriptcsswordpresswidgetprettyphoto

Wordpress display difference between Chrome and Firefox

I hope someone can assist me please. I am using a "pullout" widget in Wordpress to display a an inline "link" to open certain text in prettyPhoto box which needs to include scrollbars.

This is working perfectly in Google Chrome, however when I display the page in Firefox, it includes all the text of the textbox inside the pullour tab, and does not hide it until the link is clicked?

In the css I have used:

.hide
{
display:none;
}

Here is the code for my widget:

<a href="#inline-1" rel="prettyPhoto" >Link</a>
    <div id="inline-1" class="hide">
        <p>Text to appear in prettyPhoto textbox when the Link is clicked



</p></div>
    </div>

Any assistance would be greatly appreciated

thank you

Solution

  • Please check the CSS rule for the element #inline-1, if any. If display:block; is set on #inline-1, it will override the display:none; of the .hide class, because CSS rules by ID have more specificity than rules by class.

    To do this you can use a tool such as Firebug for Firefox.

    Furthermore, the prettyPhoto plugin may be modifying the display of the #inline-1 div, causing it to show.