Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Jacob Roman
Jacob Roman
22,640 Points
Posted by Jacob Roman
Jacob Roman
22,640 Points

Firefox display: inline-block; issue.

Hello Everyone,

Building this site for a friend and I am having trouble debugging an inline issue within firefox. I have googled around and can't seem to find anything. Wondering if someone else had a similar issue before.

So if you visit: http://jacobroman.com/elaine/

If you view it in Chrome and click on either Info or Galleries the menu drops down fine. If you view in Firefox, they stack wrong.

Oddly enough, if you inspect it and go to the .sub-menu class and disable the position:absolute; and than re-enable it, everything is fine.

Any suggestions???

4 Answers

Chris Wiley
Chris Wiley
11,327 Points
Chris Wiley
Chris Wiley
11,327 Points

Have you tried adding that extra code that works under the -moz prefix designation for Firefox?

Jacob Roman
Jacob Roman
22,640 Points
Jacob Roman
Jacob Roman
22,640 Points

Is this the code you are talking about?

display: -moz-inline-stack;
Chris Wiley
Chris Wiley
11,327 Points

Yes, that is what I had envisioned without seeing the code.

Jacob Roman
Jacob Roman
22,640 Points
Jacob Roman
Jacob Roman
22,640 Points

I have tried that and it does not work. Currently uploaded to the site with the code added.

Chris Wiley
Chris Wiley
11,327 Points
Chris Wiley
Chris Wiley
11,327 Points

I wasn't able to see if you were running and @media for the larger viewport. When I opened the code up the viewport narrowed and showed the styling to be block. So Firefox may not be seeing the right viewport size similar to what happens with the mobiles, iOs? And the meta line needs to be entered in the html, like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sorry, my backtick key seems to not be responding at the moment.

Chris Wiley
Chris Wiley
11,327 Points

meta name="viewport" content="width=device-width, initial-scale=1.0" the above line inside a tag.