Advice on CSS Browser Compatibility Issues

Question

My dad asks me to fix some CSS browser compatibility issues on an existing web application they are creating but I only know the basics of CSS.

I've read that IE usually has the most issues on this, and most people advice to have a CSS first for "standard-compliant" browsers such as Firefox and Opera, then add a conditional comment to specify style sheets for various IE versions. And this is what I'm actually planning to do.

But aside from the minor IE problems, I also encountered a problem on Google Chrome. Is it advisable if I create another style sheet especially for Google Chrome?

Image of how it should look like and how it looks like on Firefox:

Example 1

How it looks like on Google Chrome:

Example 2

Here is some of the CSS code:

#MenuMain-content {
 background : transparent url(image/mainmenu.png) repeat-x center top;
 height : 27px;
 font-size : 11px;
}
#MenuMain-content .Menu {
 height : 25px;
 margin : 0 0 0 10px;
}
#MenuMain-content .Menu A {
 font : normal 11px Verdana;
 color : #bfd7ff;
 display : block;
 padding : 5px 7px 7px 7px;
}
#MenuMain-content .Menu A:hover {
 color : #ffffff;
 padding : 5px 7px 7px 7px;
}
#MenuMain-content .Menu .Selected {
 color : #ffffff;
}
#MenuMain-content .Menu .Selected:hover {
 color : #ffffff;
}
#MenuSub-content {
 background : url(image/submenu.png) no-repeat center top;
 height : 20px;
}
#MenuSub-content .Menu {
 height : 20px;
 margin-left : 15px;
}
#MenuSub-content .Menu A {
 color : #cccccc;
 height : 17px;
 display : inline-block;
 margin-top : -1px;
 padding : 2px 7px 0 7px;
}
#MenuSub-content .Menu A:hover {
 background-color : #999999;
 color : white;
 height : 16px;
 margin-top : -2px;
}
#MenuSub-content .Menu .Selected {
 background-color : #336699;
 color : white;
 height : 16px;
 margin-top : -2px;
 padding-top : 2px;
}
#MenuSub-content .Menu .Selected:hover {
 background-color : #204674;
 color : white;
 height : 16px;
}

And here's some of the html code:

 <div id="MenuMain-content">
 <asp:Menu ID="MainMenu"
 runat="server" 
 MaximumDynamicDisplayLevels="0" 
 Orientation="Horizontal" 
 CssClass="Menu">
 <StaticSelectedStyle CssClass="Selected" />
 </asp:Menu>
 </div> 
 <div id="MenuSub-content">
 <asp:Menu ID="SubMenu" 
 runat="server" 
 Orientation="Horizontal" 
 CssClass="Menu">
 <StaticSelectedStyle CssClass="Selected" />
 </asp:Menu> 
 </div>

I don't think I can post more code snippets since I wasn't the one who created this. Any advice? Should I just create a separate CSS for Google Chrome? Thanks in advance! :)

• Marcin: If you want to demonstrate these issues, it's nice to also create examples at jsfiddle.net in addition to posting the code here.
• Joonas: I never really use conditional comments. There's usually a solution that works for all browsers ( ..meaning all the major brosers and ie7+ ). What I think you should do is get/use firebug for firefox and also use chromes dev tools to inspect the elements and the css that they have and then figure out what to do next.
• Rohit Azad Malik: hey can u see the live code of your navi
• Mae: Thanks for the comments guys! I've seen the live code (is it the one, where you right click then "inspect element"?) in both FF and GC. Apparently, Firefox reads a wrong CSS, probably an old one. But even if I save the new CSS many times and load the application, firefox still reads the old CSS. There's no other CSS file with the same name and I double checked the HTML to see which CSS it uses and I can't still find the reaseon behind this. Also, I found out google chrome skips the CSS codes I posted above, which causes the different look. Now I don't know what to do @_@
• Mae: Ok so I cleared the browsers' caches. Firefox worked well, but there's still that problem with chrome skipping the CSS code :|

Answer 1

I think you should not use uppercase for your elements on the CSS:

// Don't do this
#MenuMain-content .Menu A {}
// Do this instead
#MenuMain-content .Menu a {}

I don't know if this is the cause of your problem (never saw this issue before), but it's a good advice. Furthermore what your screenshots shows it's pretty weird, Firefox and Chrome tend to behave the same way according to CSS rendering.

• Marcin: Just yesterday someone posted an answer using CSS3 that renders quite differently on chrome and firefox.
• Juan G. Hurtado: Well, CSS3 is out of scope on this discussion. It is not a W3C standard yet, and browsers are just experimenting with it, each one on it's own way. Usually Firefox and Chrome behaves the same way with standard CSS.
• Mae: I wasn't the one who originally created this that's why I don't know why it's in capital. But thanks for the advice! I'll change that :) I also thought Firefox and Chrome should behave similarly with CSS. That's why I'm really not sure what to do right now -_- Thanks again! :D