Brouser ,firefox,ie..etc...etc

10 replies
  • WEB DESIGN
  • |
I was wondering ?,

how do you make your web site compatable in all brousers ?.if thats possible.

Dos it matter if your site is fixed width or percentage..etc..?.
#brouser #firefox #ieetcetc
  • Profile picture of the author hanakuza
    try using
    validator(dot)w3(dot)org
    It easily finds all the issues with your website which is also important for the SEO for your site. You should try to make your site 100% passing without any errors.
    {{ DiscussionBoard.errors[5171502].message }}
    • Profile picture of the author Johnny Optimo
      CSS Browser Selector

      that lets you write browser-conditional css so you can tweak the site for other browsers. There's also a tool called css3pie which enables css3 features for older versions of internet explorer.

      Also, avoiding using too much relative positioning in your css helps keep things neater across browsers.

      Using a fixed width is easier to keep the look consistent across browsers/resolutions, but it's not the only way.
      Signature
      Warriors,
      I'm a web developer and iOS app developer - I'll make you a website or app! http://949web.com
      {{ DiscussionBoard.errors[5171805].message }}
  • Profile picture of the author nagakaca
    Use CMS (content management system), many kind of CMS have compatible with all browser now..
    {{ DiscussionBoard.errors[5172242].message }}
  • Profile picture of the author Trivium
    There are benefits to both fixed-width and percentage. Percentage allows your page to scale to whatever resolution screen the client has. The extent of this however will be limited by the content, and whether that scales also. Varying screen sizes would result in the amount of text per line changing, and this can affect the layout considerably depending on how its implemented.

    Fixed width means you have a uniform layout, but if you fix the width at a size larger than the resolution of the client's screen, then they need to scroll both across as well as down to view your content, and this can be incredibly frustrating. To be safe, just pick a width of 800px, as usually standard screens in use these days are 800x600 or larger.
    Signature
    Wired Up - Computer guides and software reviews
    {{ DiscussionBoard.errors[5174922].message }}
    • Profile picture of the author PPCampaigns
      Many problems you run into can be "fixed" by using a "fallback". For example, I wasn't able to get css gradient background to display in IE9. To fix it, I just added:
      Code:
       background-color:#4C8DBF;
      as a fallback for browsers that don't support support gradients. Here is the full code to give you a better idea.

      Code:
      /*fallback background */
      background-color:#4C8DBF;
      /* Safari 4-5, Chrome 1-9 */
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4C8DBF), to(#7EB3DD));
        /* Safari 5.1, Chrome 10+ */
        background: -webkit-linear-gradient(top, #7EB3DD, #4C8DBF);
        /* Firefox 3.6+ */
        background: -moz-linear-gradient(top, #7EB3DD, #4C8DBF);
        /* IE 10 */
        background: -ms-linear-gradient(top, #7EB3DD, #4C8DBF);
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, #7EB3DD, #4C8DBF);
      {{ DiscussionBoard.errors[5175063].message }}
      • Profile picture of the author aeroturner
        Originally Posted by PPCampaigns View Post

        Many problems you run into can be "fixed" by using a "fallback". For example, I wasn't able to get css gradient background to display in IE9. To fix it, I just added:
        Code:
         background-color:#4C8DBF;
        as a fallback for browsers that don't support support gradients. Here is the full code to give you a better idea.

        Code:
        /*fallback background */
        background-color:#4C8DBF;
        /* Safari 4-5, Chrome 1-9 */
          background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4C8DBF), to(#7EB3DD));
          /* Safari 5.1, Chrome 10+ */
          background: -webkit-linear-gradient(top, #7EB3DD, #4C8DBF);
          /* Firefox 3.6+ */
          background: -moz-linear-gradient(top, #7EB3DD, #4C8DBF);
          /* IE 10 */
          background: -ms-linear-gradient(top, #7EB3DD, #4C8DBF);
          /* Opera 11.10+ */
          background: -o-linear-gradient(top, #7EB3DD, #4C8DBF);

        Thanks for sharing the codes..this may help a lot..but however some again comes in trouble with all versions of IE
        Signature
        {{ DiscussionBoard.errors[5175621].message }}
  • Profile picture of the author TwinDragon
    CSS Browser Selector

    Cool, something I can use to check my sites. I was wondering the same thing.
    Signature

    Seeking my teeth into all this great information.

    {{ DiscussionBoard.errors[5175636].message }}
    • Profile picture of the author alan9187
      Thanx, every one this realy helps,

      Should i be worried about IE if at has constant issues compaired to the others ?. Is IE that widley used as it use to be?, Or is mainly older versions of IE that suffer the problems.

      Ref: Gradiants, would a graphic be better, shorley all brousers dispaly a graphic the same way , Don't they ?

      Thanx fo the code PPCampaigns. Do you use this as standard on the site you create?.
      Signature

      Give everyone a chance

      {{ DiscussionBoard.errors[5177465].message }}
  • Profile picture of the author down
    This ie collection should help you testing your code on multiple cross browser.

    Utilu IE Collection - Utilu.com
    {{ DiscussionBoard.errors[5177546].message }}
  • Profile picture of the author michaelcook2003
    Hello,
    There are some steps you should keep in mind in order to make your website compatible to multiple browsers:
    1. Validate CSS using W3C CSS Validator.
    2. Check website in all browsers: Mozilla, IE, Chrome, Opera, Safari.
    3. If you encounter a bug, search the cause and fix it
    Good luck!
    {{ DiscussionBoard.errors[5189410].message }}

Trending Topics