Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If there are browser compatibility issues with the newest versions of different browsers then something may be wrong with the HTML of your site. Run the Webpages that have the issue through the W3C validator to explore this http://validator.w3.org/
thank you! i didn’t know about this tool.
indeed i see errors but they are connected with slider and fonts (which 1st: i implemented using additional plugins and 2nd: they seem not to be related with my problem)
so there is still sth missing, but thanks for validator!
There are some things in the css for that menu that produce weird results. It becomes more predictable when you get rid of things such as absolute positioning (<- often means trouble).
A start <i>might</i> be to remove the following:
#site-navigation-wrap {position: absolute; right: 0; top: 50%; height: 20px; margin-top: 20px;}
.sf-menu, .sf-menu * {margin-top: 100px;}
#site-navigation .dropdown-menu ul a {margin-top: 90px;}
And change the following:
#site-navigation .dropdown-menu ul a {text-align: right;}
#site-navigation .dropdown-menu ul li {height: 25px;}
.main-navigation: float: right;
(Only quickly tested with Chrome webdev tools)
Firefox is much more sensitive to syntax errors than other browsers, so if you see something strange looking in Firefox, chances are that there’s a syntax error that’s causing the rules after the syntax error not to be followed. You can see this when you inspect the site-navigation-wrap element. When you inspect the element in Chrome DevTools, you’ll see this CSS rule:
#site-navigation-wrap {
position: absolute;
right: 0; top: 50%;
height: 20px;
margin-top: -20px;
font-family:'Duru Sans';
font-size:12px;
}
However, when you inspect the same element using Firebug, you don’t see the same rule being applied. This indicates that there’s some sort of syntax error before this particular rule in your CSS file.
If you scroll up through your CSS, you’ll see this line in the logo section:
#logo img { display: block; max-width: 100%; margin: 0 auto; margin-top:-50px;"}
That stray double quote mark at the end (“) is what is causing the problem with Firefox. Take out that double quote and your menu should look good (plus the rest of your CSS should also work).
it was really this double quote problem!! thank you all so much!
CrouchingBruin – how did you find it? which tools you use?
I use Firebug, which is a free extension for Firefox, and Chrome Developer Tools, which comes built-in with Chrome. Both work very similarly: you right-click on an element that you want to look at and choose Inspect element from the pop-up menu. In both cases, the debugging window will open up in the bottom half of the browser. The left pane will display the code structure, with the element that is being inspected highlighted. The right pane displays the CSS rules which affect that particular element. If you click on the source file link that’s associated with the rule, the view changes to the file inspector, which will allow you to see where the rule is in your CSS file.
When you inspect the same element in both Firefox and Chrome, the same CSS rules should apply. As I mentioned earlier, when I inspected the site-navigation-wrap element in both browsers, the rule that styles that element showed up in Chrome DevTools but not in Firebug, so it was easy to deduce that there was something wrong with the CSS file somewhere above where the rule for that element was defined.
So all I did was to scroll up the CSS file maybe 10 rules at a time, pick a CSS rule, and inspect an element in each browser to see if that rule was being applied. I would keep going until I found a rule that was being applied in both browsers, and then I knew that the syntax error was somewhere below/after that point. Then it’s must a matter of looking at the CSS to see where the error was. If you’re familiar with reading CSS, it’s fairly easy to pick out. Usually it’s something like a missing right brace, or an unclosed comment.
That’s a nice catch indeed 🙂 Lot less work. (But I’m still wondering if the page is not better of without the absolute positioning..)
thank you both very much for all advices!
CrouchingBruin – thank you for amazing ‘article’ about useful tool, i will check them all! 🙂
Funkphenomenon – thank you for tip about positiong… in free time i will try to get rid of it in code and we will see results 🙂
Absolute positioning isn’t necessarily bad as long as you understand how to use it correctly. For example, the parent element should have it’s positioning set to relative, and you need to realize that setting an element’s position to absolute takes it out of the “normal document flow” so other elements behave like it’s no longer there and can fill up the space beneath it. So, yes, absolute positioning can be tricky, but as long as you understand why you need it for a particular situation, and how to use it, it doesn’t necessarily have to be avoided. I use absolute positioning to hide mobile menus off the side of the page, for example, and then slide it onto the page over the content when the mobile menu button is clicked. For your particular situation, Funkphenomenon’s suggestion to float it to the right, instead of using absolute positioning, is a good suggestion.
