Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    28
    Thanks
    6
    Thanked 1 Time in 1 Post

    Cross-browser compatibility

    So obviously this is a pretty large topic.

    I've been coding mostly for Firefox and now that the site is live, I'm finding that it has a lot of bugs when viewed in other browsers.

    For the moment, I am aware of two solutions:

    -Use CSS Resets
    -Check for browser version, then include an appropriate CSS style sheet

    If it comes down to one of the two options above, which is the better option, and why?

    I'll be happy to answer any clarifications or share any code.

    The website can be found here:
    www.sfcrc.com

    Thank you!

    Edit: Regarding the drop menu positioning, I was an idiot and made their positioning relative, when it should have been absolute.
    Last edited by iksfcrc; 02-05-2013 at 11:28 PM.

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Have a look at the menu tutorial on my sig page. That menu is guaranteed cross-browser.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    28
    Thanks
    6
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Frankie View Post
    Have a look at the menu tutorial on my sig page. That menu is guaranteed cross-browser.
    Hi Frankie, thanks for your suggestion.

    I'm checking it out right now and I've encountered two issues that you might be able to help me with.

    The first is: in IE, the submenu doesn't seem to stay when I hover. It displays for a split second, then disappears. Any idea why?

    The second: It seems like the top of the submenu is partially obscured by the main menu. I've tried setting the z-index to the submenus to a high value, but that doesn't change anything in IE.

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Well for Cross-Browser computability - I almost always use a css reset.
    Something that may be of interest to you is Normalize - http://necolas.github.com/normalize.css/

    which helps things looking / acting the same cross browser.

    For IE you almost always have to do conditional stylesheets for versions lower than IE9 - like the PNG fix for IE6, various padding / margin issues in IE7 and IE8 -

    so for that take a look at
    http://www.quirksmode.org/css/condcom.html

    Possibly look into a css framework that is already "cross-browser" friendly. Bootcamp, Foundation, Skeleton, etc etc...

    Other than that, all I can say is read up on some proper techniques in some blogs like "CSS tricks" and keep on learning.

    Hope this helps

    Cheers

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 725 Times in 719 Posts
    The thing that will make the most difference cross-browser, not mentioned above, is to ensure your html validates - see my signature for a link. Invalid code will cause a lot of cross browser differences.

    Browsers have different standard settings on paddings and margins - so normalise these as suggested with:

    Code:
    *{margin:0;padding:0}
    I prefer to test in Firefox - use Firebug (see signature again) to help you. Once it's OK and validated in Firefox, check other browsers. Mostly, if you've done it right, it should be OK in Opera, Chrome and Safari. Occasionally Safari and Chrome will handle clearing floated elements slightly differently.
    IE9 should be OK as well.

    In most cases, IE8 is probably going to be OK, as well. Don't think I've written a conditional statement for IE8 yet....and should really only be a last resort.

    For IE7 it's a different ball game, and IE6 is even worse, if you need to support it. Conditional css is likely to be necessary here. If you need to worry about IE7 and under have a look at this now rather dated post.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #6
    New Coder
    Join Date
    Feb 2013
    Posts
    28
    Thanks
    6
    Thanked 1 Time in 1 Post
    Quote Originally Posted by aaronhockey_09 View Post
    Well for Cross-Browser computability - I almost always use a css reset.
    Something that may be of interest to you is Normalize - http://necolas.github.com/normalize.css/

    which helps things looking / acting the same cross browser.

    For IE you almost always have to do conditional stylesheets for versions lower than IE9 - like the PNG fix for IE6, various padding / margin issues in IE7 and IE8 -

    so for that take a look at
    http://www.quirksmode.org/css/condcom.html

    Possibly look into a css framework that is already "cross-browser" friendly. Bootcamp, Foundation, Skeleton, etc etc...

    Other than that, all I can say is read up on some proper techniques in some blogs like "CSS tricks" and keep on learning.

    Hope this helps

    Cheers
    Thanks AaronHockey! I will check those out.

    Quote Originally Posted by SB65 View Post
    The thing that will make the most difference cross-browser, not mentioned above, is to ensure your html validates - see my signature for a link. Invalid code will cause a lot of cross browser differences.

    Browsers have different standard settings on paddings and margins - so normalise these as suggested with:

    Code:
    *{margin:0;padding:0}
    I prefer to test in Firefox - use Firebug (see signature again) to help you. Once it's OK and validated in Firefox, check other browsers. Mostly, if you've done it right, it should be OK in Opera, Chrome and Safari. Occasionally Safari and Chrome will handle clearing floated elements slightly differently.
    IE9 should be OK as well.

    In most cases, IE8 is probably going to be OK, as well. Don't think I've written a conditional statement for IE8 yet....and should really only be a last resort.

    For IE7 it's a different ball game, and IE6 is even worse, if you need to support it. Conditional css is likely to be necessary here. If you need to worry about IE7 and under have a look at this now rather dated post.
    SB65, thanks for the suggestions. I have already validated my html and css. So those should okay. I will try resetting margins and padding.

    How does this CSS resetting work? Do I include the reset file at the very beginning, then include my own css after?

    The site largely works in IE, it just doesn't look great. Little things are out of place here and there, hopefully it's just a margin/padding thing.

    Thanks for the suggestion of Firebug. It's definitely a useful add-on, I will for sure be using it now! In fact, it just helped me solve a problem where my drop down menus were being made visible when it made the transition from absolute to fixed.

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by iksfcrc View Post
    Hi Frankie, thanks for your suggestion.
    I'm checking it out right now and I've encountered two issues that you might be able to help me with.
    The first is: in IE, the submenu doesn't seem to stay when I hover. It displays for a split second, then disappears. Any idea why?
    The second: It seems like the top of the submenu is partially obscured by the main menu. I've tried setting the z-index to the submenus to a high value, but that doesn't change anything in IE.
    The menu that my tutorial builds is absolutely cross-browser and error free. It has been tested over and over again, with every time the same result. Just make a new menu, start from scratch. It should take you no longer than half an hour. And your menu is a strange combination of javascript and html anyway. I wouldn't even know how to fix it.
    Last edited by Frankie; 02-06-2013 at 07:42 PM.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #8
    New Coder
    Join Date
    Feb 2013
    Posts
    28
    Thanks
    6
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Frankie View Post
    The menu that my tutorial builds is absolutely cross-browser and error free. It has been tested over and over again, with every time the same result. Just make a new menu, start from scratch. It should take you no longer than half an hour. And your menu is a strange combination of javascript and html anyway. I wouldn't even know how to fix it.
    I did start from scratch. I took your original code and made some basic edits (changing width of submenus, adding some gradients, and changing the subitem names). My result was that the submenu would show correctly, but when I attempt to select a subitem, the submenu disappears.

    I think it might have something to do with the way IE processes the onmouseover and onmouseout. I was able to fix my original menus, but I am having the same problem as your menu on mine. Perhaps it has something to do with the gradients? I don't know what the issue could be, but I appreciate your help regardless.

    This is the source code including my edits:
    Code:
    body { 
        font: normal .8em Verdana;
        }
        
    #navDiv ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        }
    #navDiv ul li {
        float: left;
        position: relative;
        background: -moz-linear-gradient(top, #64dbf8, #00b3ee, #0095da, #008bc6);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#64dbf8', endColorstr='#008bc6');
        line-height: 1.9em;
        }
    #navDiv ul li ul li {
        clear: left;
        }
    #navDiv ul ul {
        display: none;
        }
    #navDiv ul li:hover ul,
    #navDiv ul li.dynamicClass ul {
        display: block;
        position: absolute;
        }
    #navDiv a {
        display: block;
        padding: 0 10px 0 10px;
        color: white;
        text-decoration: none;
        }
        
    #navDiv #item1SubList a {
        width: 7em; /*  varies with main item width */
        }
        
    #navDiv #item2SubList a {
        width: 7em; /*  varies with main item width */
        }
        
    #navDiv #item3SubList a {
        width: 7em; /*  varies with main item width */
        }
        
    #navDiv a:hover {
        color: white;
        }
    p {
        width: 400px;
        }
    a img {
        border: 0;
        width: 88px;
        height: 31px
        }
    </style>
    </head>
    <body>
    <div id="navDiv">
        <ul>
            <li onmouseover="this.className+=' dynamicClass'" onmouseout="this.className=this.className.replace(' dynamicClass','')">
                <a href="#">Clinical Trials</a>
                    <ul id="item1SubList">
                    <li><a href="#">Alzheimer's Disease</a></li>
                    <li><a href="#">Migraine Headaches</a></li>
                    <li><a href="#">Post-Herpetic Neuralgia (Shingles)</a></li>
                </ul>
            </li>
            <li onmouseover="this.className+=' dynamicClass'" onmouseout="this.className=this.className.replace(' dynamicClass','')">
            <a href="#">About Us</a>
                <ul id="item2SubList">
                    <li><a href="#">Investigators</a></li>
                    <li><a href="#">Research Staff</a></li>
                    <li><a href="#">Facilities</a></li>
                </ul>
            </li>
            <li onmouseover="this.className+=' dynamicClass'" onmouseout="this.className=this.className.replace(' dynamicClass','')"><a href="#">Contact Us</a>
                <ul id="item3SubList">
                    <li><a href="#">Email Us</a></li>
                    <li><a href="#">Directions, Directions, Directions</a></li>
                    <li><a href="#">FAQs</a></li>
                </ul>
            </li>
        </ul>
    </div>

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    I did start from scratch. I took your original code and made some basic edits (changing width of submenus, adding some gradients, and changing the subitem names). My result was that the submenu would show correctly, but when I attempt to select a subitem, the submenu disappears.
    The code you are now giving is indeed my code, but it is not what I'm seeing online, behind the site you linked. There I see the following code:
    Code:
    <a onmouseout="javascript:subMenu(false,'CT');" onmouseover="javascript:subMenu(true,'CT');" class="top" href="clinicaltrials.html">Clinical Trials</a>
    with the subMenu not being a child <ul>, but a separate div, not being a child of anything. That is the weirdest menu I've even seen.

    However, assuming that you are now talking about a new menu that is not online yet, I tested your latest code, and indeed the filter seems to be the culprit. In IE7 there is no more dropdown, but if I outcomment the filter, everything work fine.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 725 Times in 719 Posts
    In IE7 there is no more dropdown, but if I outcomment the filter, everything work fine.
    That sounds like it might be a hasLayout issue with IE7. A link to the live site with the updated code would help.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #11
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by SB65 View Post
    That sounds like it might be a hasLayout issue with IE7.
    That's what I thought, too. But neither zoom:1 nor a defined width solves the IE7 problem. Aren't those always supposed to work? Only taking the filter out works.
    Last edited by Frankie; 02-07-2013 at 10:17 AM. Reason: Removed signature

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 725 Times in 719 Posts
    Well, those will set hasLayout on the element, not necessarily going to solve this issue, but it's always worth a try with IE7. The solution may be to provide a background image on the li, perhaps served just for IE7.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #13
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by SB65 View Post
    Well, those will set hasLayout on the element, not necessarily going to solve this issue, but it's always worth a try with IE7. The solution may be to provide a background image on the li, perhaps served just for IE7.
    That will indeed be the solution. And it may be a good idea to stick with background gradient images anyway for a while longer, for all browsers, as I found out the last couple of days.

    I had put a simple HTML5 web app online for my clients, with a CSS gradient in the <h5>, but even 2-year old Samsung smartphones (3G) will not render it with their default browser... And I've got 9 CSS background-related lines in the code...
    Last edited by Frankie; 02-07-2013 at 04:55 PM. Reason: 2-year old, not 2 year-old

  • #14
    New Coder
    Join Date
    Jan 2013
    Location
    India
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's Good point for website. Professional website should work in several web browsers like Chrome, Firefox, Safari & Internet Explorer. you use cross browser compatibility tool as CloudTesting tool that is widely used by web developer.
    This tool will test your site on

    Opera 9.6
    Internet Explorer 6, 7, 8
    Google Chrome Latest Version
    Apple Safari 3.2, 4.0, 5.0
    Mozilla Firefox 3, 3.5, 3.6

    gives you all issue so that you can easily solve them.

  • #15
    New Coder
    Join Date
    Feb 2013
    Posts
    28
    Thanks
    6
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Frankie View Post
    The code you are now giving is indeed my code, but it is not what I'm seeing online, behind the site you linked. There I see the following code:
    Code:
    <a onmouseout="javascript:subMenu(false,'CT');" onmouseover="javascript:subMenu(true,'CT');" class="top" href="clinicaltrials.html">Clinical Trials</a>
    with the subMenu not being a child <ul>, but a separate div, not being a child of anything. That is the weirdest menu I've even seen.

    However, assuming that you are now talking about a new menu that is not online yet, I tested your latest code, and indeed the filter seems to be the culprit. In IE7 there is no more dropdown, but if I outcomment the filter, everything work fine.


    I'm sure it's a pretty weird menu. I'm not a trained web designer. I learned some basic HTML/C++ when I was a kid, and I'm learning CSS and JS as I go on this project, so please excuse the noob.

    Yes, your code was not yet implemented on the live site, sorry I should have made that clear. I was just running it off my own workstation. I'll upload it so you can see what I meant.

    http://www.sfcrc.com/frankiemenu.html

    As far as IE compatibility goes, is there another way to apply a gradient to the menus other than filter:?

    If it will get in the way more often than not, then I'll just replace it with a solid color.

    Thanks for your help.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •