browser compatibility

Discussion in 'Web Design and Development' started by webbyman, Oct 7, 2009.

  1. webbyman macrumors newbie

    Joined:
    Oct 7, 2009
    Location:
    UK, The North
    #1
    hey all,

    just a quick question, well only if it is quick :p

    I am a student new to web design and currently designing my own website however when viewing the site in firefox it is perfect to my requirements however in safari it is not. How can I overcome this issue?

    Many Thanks
     
  2. Consultant macrumors G5

    Consultant

    Joined:
    Jun 27, 2007
    #2
    Every browser render things differently.

    google: browser compatibility website design
     
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    To answer the OP's question as to how to overcome said problems, high level view...

    How is complex, here are the basics:

    Start out by learning about standards, specifically W3C standards. Meaning, learn HTML and CSS properly, i.e. which attributes are cross browser supported and the proper syntax. For reference use sites like W3CSchools.com, for example. The next thing you always do is validate your code and resolve all errors and heed all warnings. This step, alone, will teach you most of what you need to know. Finally, do a little research on browser quirks, especially in the CSS realm, and consider installing reset.css scripts which fix many CSS issues and do your best to minimize CSS conditionals which are browser proprietary and can be quite confusing.

    When you think you got most of this down, consider coding in XHTML transitional, then eventually to XHTML strict which by current W3C standards will render the page more similarly than other types, although far from perfect.

    Knowing all this comes from experience, and even the most guru developers still look things up and validate and fix, and attend Google University. Which is to say, use Google to find solutions to common problems as Consultant wisely mentioned earlier. Just bear in mind someone's code from a blog might not be strict compliant, but experience will help you recognize this.

    If you use frameworks to assist in development, make sure they follow W3C standard compliancy, and for Javascript frameworks in particular - follow DOM standards. JQuery is one such JS framework of many.

    Start using good tools like the developer toolbar for FFox to help you debug issues and easily link to the validation sites.

    I'm sure others will chime in with observations and suggestions. Hope this helps you get started with the high level view of things.

    Cheers.

    -jim
     
  4. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #4
    The first step to cross-browser compatibility is valid HTML and CSS.

    Have you validated your code?
     
  5. mrbw, Dec 19, 2010
    Last edited: Dec 19, 2010

    mrbw macrumors newbie

    mrbw

    Joined:
    Dec 19, 2010
    #5
    Just getting my start in web design and loving it so far. Completely self taught so far using some books and google university as you said. I've run into a bit of a snag. I already have the top area where I want it, a drop down menu made from modified from resources that works in all the major browsers. That's fine. But when I go to make a basic test area to start putting body content into place it displays in all browsers besides safari. I've learned so far just from the drop down menu that the browsers have different specifications towards css, and also leading to me hating IE more than I already did before. Any thoughts on what could cause something to not display properly with this browser?
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Need to see the site or at minimum the code to be able to help. It's just guessing otherwise.
     
  7. Apple OC macrumors 68040

    Apple OC

    Joined:
    Oct 14, 2010
    Location:
    Hogtown
  8. mrbw, Dec 19, 2010
    Last edited by a moderator: Dec 19, 2010

    mrbw macrumors newbie

    mrbw

    Joined:
    Dec 19, 2010
    #8
    my html

    PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Meritage Research Investigations</title>

    <
    link type="text/css" rel="stylesheet" href="style.css" media="screen" />
    <
    script type="text/javascript" src="dropmenu_ie.js" ></script>
    </head>

    <body>
    <div id="top_container">
        <div id="logo_bar_top"></div>
        <div id="logo"></div>
        <div id="logo2"></div>
        <div id="menu">
        <ul>
            <li>
                <div class="dwn_arw">   Main Menu</div>
                <ul>
                    <li><a href="#" title="Home">Home</a></li>
                    <li><a href="#" title="Services">Services</a>
                        <ul>
                            <li><a href="#" title="!!!">!!!</a></li>
                              <li><a href="#" title="!!!">!!!</a></li>
                            <li><a href="#" title="!!!">!!!</a></li>
                        </ul>        
                    </li>
                    <li><a href="#" title="About Us">About Us</a></li>
                    <li><a href="#" title="Order">Order</a></li>
                    <li><a href="#" title="News">News</a></li>
                    <li><a href="#" title="Contact">Contact</a></li>
                </ul>
            </li>
        </ul>
        </div>
    </div>    
    <div id="main_container">
        <div class="content1_home">
            <h3></h3>
            <p>This is a test!!!</p>    <<<<crazy enough this is the only thing i've had a problem with. it wont display. even opera will do it.
        </div>
        <div id="logo_bar_btm"></div>
    </div>
    </body>
    </html>

    css

    PHP:
    @charset "utf-8";
    /* CSS Document */

    htmlbody{
    background:#fcff97;
    border:0;
    margin:0;
    padding:0;
    height:100%;}
        
    #top_container{
        
    height:126px;
        
    position:relative;
        
    border-bottom:double 2px #000;}
            #logo_bar_top{
            
    backgroundurl(../../Meritage%20Research%20&%20Investigation,%20Inc/img/logo_bar1.gifrepeat-x;
            
    height:36px;
            
    width:auto;}
            
    #logo{
            
    position:absolute;
            
    top:36px;
            
    left:102px;
            
    backgroundurl(../../Meritage%20Research%20&%20Investigation,%20Inc/img/logo.gifno-repeat;
            
    background-color#fcff97;
            
    margin-top:0;
            
    height90px;
            
    width376px;}
            
    #logo2{
            
    height:90px;
            
    width:650px;
            
    position:absolute;
            
    top:36px;
            
    right:0;
            
    backgroundurl(../../Meritage%20Research%20&%20Investigation,%20Inc/img/logo2.gifno-repeat;}
        
    #main_container{
        
    background: -moz-linear-gradient(top#ffff99, #b98631);
        
    background: -webkit-gradient(linear00%, 0100%, from(#ffff99), to(#b98631));
        
    filterprogid:DXImageTransform.Microsoft.gradient(startColorstr=ffff99end Colorstr=#b98631);
        
    -ms-filter"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff99, endColorstr=#b98631)";    
        
    height:100%;
        
    position:relative;}        
            
    #content_home{
                
    position:relative;
                
    height:500px;
                
    width:500px;
                
    z-index:500px;}
            
    #logo_bar_btm{
            
    position:absolute;
            
    bottom:0;
            
    width:100%;
            
    height:36px;
            
    backgroundurl(../../Meritage%20Research%20&%20Investigation,%20Inc/img/logo_bar0.gifrepeat-x;}        
    #menu{
        
    position:absolute;
        
    top:36px;
        
    left:0;
        
    padding-top:71px;    
        
    width103px;
        
    background#b98631;
        
    floatleft;
        
    background:#b98631;
        
    background: -moz-linear-gradient(top#ffff99, #b98631);
        
    background: -webkit-gradient(linear00%, 0100%, from(#ffff99), to(#b98631));
        
    filterprogid:DXImageTransform.Microsoft.gradient(startColorstr=ffff99end Colorstr=#b98631);
        
    -ms-filter"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff99, endColorstr=#b98631)";
        -
    moz-shadow:inset 0px 0px 1px #edf99ff;
        
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
        
    text-shadow#666666 5px 5px 5px;}
        #menu li .dwn_arw{
        
    padding-right:21px;
        
    backgroundurl(../../Meritage%20Research%20&%20Investigation,%20Inc/img/strt_arw.gifno-repeat right 4px;}
        
    #menu li:hover .dwn_arw{background: url(../../Meritage%20Research%20&%20Investigation,%20Inc/img/drp_arw.gif) no-repeat right 7px;}
        #menu ul{
        
    list-stylenone;
        
    margin0;
        
    padding:0;
        
    width:103px;
        
    floatleft;}
        
    #menu a{
        
    text-align:center;
        
    fontbold 11px/16px arialhelveticasans-serif;
        
    displayblock;
        
    border-width1px;
        
    border-stylesolid;
        
    border-color#ccc #888 #555 #bbb;
        
    margin0;
        
    padding2px 3px 0 0;
        
    color#000;
        
    background:#b98631;
        
    background: -moz-linear-gradient(top#ffff99, #b98631);
        
    background: -webkit-gradient(linear00%, 0100%, from(#ffff99), to(#b98631));
        
    filterprogid:DXImageTransform.Microsoft.gradient(startColorstr=ffff99end Colorstr=#b98631);
        
    -ms-filter"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff99, endColorstr=#b98631)";
        
    text-decorationnone;}
        
    #menu a:hover {
        
    color#a00;
        
    background:#b98631;
        
    background: -moz-linear-gradient(top#b98631, #ffff99);
        
    background: -webkit-gradient(linear00%, 0100%, from(#b98631), to(#ffff99));
        
    filterprogid:DXImageTransform.Microsoft.gradient(startColorstr=b98631end Colorstr=#ffff99);
        
    -ms-filter"progid:DXImageTransform.Microsoft.gradient(startColorstr=#b98631, endColorstr=#ffff99)";}
        
    #menu li {position: relative;}
        #menu ul ul {
        
    positionabsolute;
        
    z-index500;}
        
    #menu ul ul ul {
        
    positionabsolute;
        
    top0;
        
    left100%;}
        
    div#menu ul ul,
        
    div#menu ul li:hover ul ul,
        
    div#menu ul ul li:hover ul ul
        
    {displaynone;}
        
    div#menu ul li:hover ul,
        
    div#menu ul ul li:hover ul,
        
    div#menu ul ul ul li:hover ul
        
    {displayblock;}
    .
    content1_home{
        
    position:absolute;
        
    top:300px;
        
    left:300px;
        
    background:#FFFFFF;
        
    height:200px;
        
    width:200px;}
    .
    content_home>h2{}
    .
    content_home>p{}
    .
    content_home>.sub{}
    learning as I go so most likely more than few unnecessary things in it. Any help would be awesome. Been looking into the topic and so far have come up with nothing.
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    I copied and pasted the code into a new local page and it displayed the same in Firefox and Safari. I don't have the script file that you declare though, so perhaps it does something bad for Safari. That would be the only real difference. I have Safari 5.0.3. Also be sure to clear your cache in Safari.
     
  10. mrbw, Dec 19, 2010
    Last edited by a moderator: Dec 19, 2010

    mrbw macrumors newbie

    mrbw

    Joined:
    Dec 19, 2010
    #10
    PHP:
    startList = function() {
    if (
    document.all&&document.getElementById) {
    navRoot document.getElementById("menu");
    for (
    i=0i<navRoot.childNodes.lengthi++) {
    node navRoot.childNodes[i];
    if (
    node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" drop";
       }
        
    node.onmouseout=function() {
        
    this.className=this.className.replace (" over""");
       }
       }
      }
     }
    }
    window.onload=startList;
    thought I should of added it, it's the only thing I've found to make the drop down work in IE.

    I tried clearing the cache and it still did the same.
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    Adding that had no effect. One other difference for me is that I don't have the images referenced in the CSS. You also use a comma and a space in the files names, which could be part of the problem.

    Example:
    Code:
    ../../Meritage%20Research%20&%20Investigation,%20Inc/img/drp_arw.gif
    The %20 stands for a space. You should also avoid the & in file names as those are used in URLs for parameters. I'd be willing to be this is the source of your problem. Don't uses space, commas, or ampersands in file/folder names for the web.
     
  12. mrbw macrumors newbie

    mrbw

    Joined:
    Dec 19, 2010
    #12
    Those images that are attributed to those file names display just fine. But the advise is well noted. I use linux, that shouldn't of slipped by me. Windows is making me lazy. Mainly what I see is that on the other browser i'm testing in, rockmelt, firefox, opera and IE show the 200 by 200 px box in front of the gradient in display and in safari it doesn't. I'll switch the file names around and change those values.
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    Attached is what I see for reference. I shrunk it a little just to reduce file size, but shows what you describe.
     

    Attached Files:

  14. mrbw macrumors newbie

    mrbw

    Joined:
    Dec 19, 2010
    #14
    hmmmm... yeah I got nothing, I have it on win 7 so maybe its a problem with that. Mainly just downloaded it so if anyone using a mac saw the site they could see the content. Glad to hear it showed up. Thanks for all the help. :D
     

Share This Page