1

I am styling a custom menu bar with media queries so that it is responsive, and it works in chrome and safari but not firefox. I have tried using the class, the id, a hierarchy of classes, but firefox does not want to show it properly no matter what I do.

You can see the issue here: http://wanagogo.com (inspect element to see the html)

These are the queries that are currently working in chrome:

@media (max-width: 1200px) {
.kidsnav {
width: 900px;
}}
@media (max-width: 1024px) {
.kidsnav {
width: 700px;
}}
@media (max-width: 800px) {
.kidsnav {
width: 520px;
}}
@media (max-width: 600px) {
.kidsnav {
width: 97%;
}}
@media (max-width: 480px) {
.kidsnav {
width: 90%;
}}

Am I missing something? Any guidance would be appreciated!

dippas
  • 58,591
  • 15
  • 114
  • 126
Dan Wolner
  • 21
  • 3
  • Works for me in Firefox 34. – showdev Jan 14 '15 at 18:57
  • so when you go to that link, the orange/yellow menu at the top sizes correctly as you shrink your browser width? – Dan Wolner Jan 14 '15 at 20:26
  • I stand corrected. The top menu does not resize in Firefox. However, it works if I add add `.kidsnav img { width:100%; }` to your existing CSS. – showdev Jan 14 '15 at 20:48
  • Possibly related to [Bug 975632](https://bugzilla.mozilla.org/show_bug.cgi?id=975632). – showdev Jan 14 '15 at 21:01
  • Also, possible duplicate of [Responsive images in tables](http://stackoverflow.com/questions/18846744/responsive-images-in-tables-bootstrap-3/1885903) and/or [Why do Firefox and Opera ignore max-width](http://stackoverflow.com/questions/2923710/why-do-firefox-and-opera-ignore-max-width-inside-of-display-table-cell). – showdev Jan 14 '15 at 21:06

1 Answers1

2

It is because you are using 2 Selectors to declare the Table:

1st:

table#Table_01 on line 563

and then

.kidsnav on lines 560, 567, 571, 575 & 579 (repeated due to your media queries).

So It is all related to Specificity, Check it HERE and HERE for more info

Edit

to make your menu responsive you have to do at least 2 things in your CSS:

1st: add .kidsnav img {width:100%}

2nd: change speel width, instead of .speel {width:172px} change to .speel {width:100%} `

dippas
  • 58,591
  • 15
  • 114
  • 126
  • sorry, I had just added that as an attempt to correct it as I was writing this question. adding it doesnt work, removing it doesnt work. it is now removed. although, you may be right that it has to do with specificity. will investigate. – Dan Wolner Jan 14 '15 at 20:25