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:

How it looks like on Google Chrome:

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! :)

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.