[Solved] div not displaying in firefox

[jamesblack91]

Hey guys,

Not sure why the ‘soon’ div doesn’t show up at all in ff. Any thoughts?

http://codepen.io/anon/pen/MYppPo

(and yes, the wrapper display is set to none; I have JQuery taking care of that).

Ps: it shows up in firefox in codepen, but not on my actual site.

Thanks in advance :)

[Paulie_D]

I don’t understand the question.

If you have display:none set nothing should show up including the child elements. That’s what it does.

Anyway, if it works in Codepen then the code is, logically, correct…so there must be something else going on on your site.

I’d suggest that THAT is what we need to see.

[jamesblack91]

Hi Paul,

yes, as explained, JQuery displays the div for me.

Please see screenshots for what happens.

https://dl.dropboxusercontent.com/u/30380409/Screen%20Shot%202015-01-14%20at%2011.51.33%20pm.png

(what it’s supposed to look like)

https://dl.dropboxusercontent.com/u/30380409/Screen%20Shot%202015-01-14%20at%2011.51.52%20pm.png

(How it looks in firefox).

[Paulie_D]

Images are no use..we can’t diagnose code from images.

I understand that Jquery displays the div for you (show perhaps?) but until the display none is removed (via JQ or some other means) the children will still not be visible.

Anyway, we need to SEE it NOT working on a live site otherwise we can’t help.

Perhaps you could explain what is is you are trying to do as well.

[jamesblack91]

Thanks Paul – I didn’t want to upload until I had it working but please see here:

http://www.rozenau.com.au

Basically I want the logo to fade in, fade out and be replaced with the text. On my chrome is works perfectly (as per screenshot) but in firefox, the ‘Soon’ just doesn’t display. I’ve even tried manually doing some javascript into the url to get it to and just nup.

I have updated my original codepen with my full code. Even if I comment out the display:none in codepen, it still doesn’t display in firefox but it does in chrome.

Thanks again.

Joel

[Paulie_D]

Float the element (#soon) left.

Also, use proper text elements inside your divs to hold the text.

Text nodes are poor practice.

[Shikkediel]

Weird little issue that somehow has to do with overflow: hidden.
Using a span inside the other div works on all browsers though :

Logo fade pen

Edit – made them inline-block <p> elements like Paulie_D suggested.

[jamesblack91]

Thank you both. Working great :)

[Author]

Posts