0

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

7
  • 1
    If you want to demonstrate these issues, it's nice to also create examples at jsfiddle.net in addition to posting the code here.
    – Marcin
    Apr 16, 2012 at 7:49
  • 1
    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.
    – Joonas
    Apr 16, 2012 at 8:00
  • hey can u see the live code of your navi Apr 16, 2012 at 9:00
  • 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
    Apr 16, 2012 at 9:34
  • Ok so I cleared the browsers' caches. Firefox worked well, but there's still that problem with chrome skipping the CSS code :|
    – Mae
    Apr 16, 2012 at 9:45

1 Answer 1

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.

3
  • Just yesterday someone posted an answer using CSS3 that renders quite differently on chrome and firefox.
    – Marcin
    Apr 16, 2012 at 7:49
  • 1
    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. Apr 16, 2012 at 7:51
  • 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
    – Mae
    Apr 16, 2012 at 7:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.