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 21
  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts

    Best way to cross-browser a site?

    Hello, I need to make my site cross-browser compatible but do not know where to start. I have read some tutorials but I'm still none the wiser.

    Wondering if you guys could possibly give me some tips on the best way to achieve this.

    Regards,

    LC.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    keep in mind following point while making site:

    1. Use standard HTML/CSS code
    2. keep Firefox, Opera, Chrome and IE openned while coding and keep checking in all browsers after each module of CSS/HTML code, It will make debugging faster.
    3. Use firebug, it will make debugging faster.
    4. If still you will face any challenge , we at Codingforums are here to help you

    Al the best

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    My list (much in line with the previous):

    1) Code valid HTML/CSS (use the strict doctype of whatever standard you choose unless there is some very compelling reason not to do so - the exception being HTML 5 which has only one doctype anyway)
    2) Develop in Firefox (using firebug to make life easier)
    3) Once your layout is completely finished in Firefox, then and only then do you check in IE and make any necessary adjustments to get IE to match
    4) Once Firefox and IE match go ahead and visit browsershots.org to test any number of possible browser and OS combinations with/without javascript and with/without flash

    And then, if you're really thorough...

    5) start poking around the world of developing for handheld devices to work up a "smart phone" version of your website
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by Rowsdower! View Post
    2) Develop in Firefox (using firebug to make life easier)
    3) Once your layout is completely finished in Firefox, then and only then do you check in IE and make any necessary adjustments to get IE to match
    4) Once Firefox and IE match go ahead and visit browsershots.org to test any number of possible browser and OS combinations with/without javascript and with/without flash
    I’m going to challenge this:

    Don’t wait until you’re finished to check out the page/layout in IE (and/or other browsers), do it during development. My suggestion for an approach is basically this: Once you have your (semantic) HTML code write a line of CSS or a CSS rule and check the result right after this in various browsers. Write a CSS rule, check in browsers, write another rule, check in browsers. It goes back and forth like this. That way you see it right away if something is screwing up and you can fix it right away and don’t end up wondering why it only looks great in Firefox and start adding a lot of IE hacks/fixes.

    Likewise, it’s not wise to finish your layout and then check it out without JS/Flash/whatever, you should get it working without these in the first place and then add JS/Flash/whatever as enhancement.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Rowsdower! View Post
    3) Once your layout is completely finished in Firefox, then and only then do you check in IE and make any necessary adjustments to get IE to match
    Well, with all the respect, but upon my experience I found that another approach could be more beneficial. Check the layout in IE from time to time, better whenever you finish a definite and autonomous part of the code, otherwise, in the end, you will risk to get too many bugs and errors, and trying to repair one of them might create another one, or aggravate the others...

    But probably it is up to the developer's habit, after all

    EDIT: I see I am not alone in this! Stephan has the same opinion
    Last edited by Kor; 09-09-2011 at 02:23 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Thanks for all the wise words guys, I will keep it all in mind. The part of which I don't understand is how do you write different css depending on the browser? I have the following browsers: Opera, IE 8, Firefox, Chrome, Safari but have been developing with use of Safari.

    Does it require JavaScript to get the desired effect?

    Appreciate the help thus far,

    Regards,

    LC.

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Really? I've been out-voted but I don't generally have any trouble getting IE to fall in line at the end of the project and I personally find it to be not worth my time to juggle between browsers while I am writing code.

    That said, there isn't any *harm* in checking it often. I just don't recommend wasting the time on it until the end. I think of it kind of like sweeping up the woodshop floor while you still have some boards to cut. Sure, it'll keep the place prettier while you work, but you're just going to have to sweep again later once you finish.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by Rowsdower! View Post
    Really? I've been out-voted but I don't generally have any trouble getting IE to fall in line at the end of the project and I personally find it to be not worth my time to juggle between browsers while I am writing code.

    That said, there isn't any *harm* in checking it often. I just don't recommend wasting the time on it until the end. I think of it kind of like sweeping up the woodshop floor while you still have some boards to cut.
    It really depends on the experience you have. I, for example, can style a page completely with only checking in one browser and it will most likely look good in others as well, because I just know what works and what doesnt. This comes with experience and routine. As a beginner its certainly advisable to check often.

    Quote Originally Posted by LearningCoder View Post
    The part of which I don't understand is how do you write different css depending on the browser? I have the following browsers: Opera, IE 8, Firefox, Chrome, Safari but have been developing with use of Safari.
    If you write clean and semantic HTML you dont even need to write different CSS for different browsers because most of the time it all looks the same. The only browser that is usually causing problems is IE (version 7 and earlier) but even there, with proper HTML and a little experience of its bugs and quirks (speak of hasLayout) you can work around most of the issues without extra CSS.

    For everything else there are conditional comments where you can include a separate stylesheet for IE.

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by VIPStephan View Post
    Likewise, its not wise to finish your layout and then check it out without JS/Flash/whatever, you should get it working without these in the first place and then add JS/Flash/whatever as enhancement.
    True, I made a leap in logic. I should affirm that I believe a website should look right and work right without anything other than HTML and CSS. I wasn't commenting on semantic development or progressive enhancement - just on cross-browser display. My method applies even if we're making a javascript-generated, table-based layout with paragraph elements used to make lists - which we know we shouldn't do. But if we're adding that aspect then I would of course agree with what you have there.

    I don't even add the javascript and flash until the layout is done and tested compatible with the browsers I have available. I will add the containers for them at the appropriate size, when needed, but the actual addition of js and flash comes after the layout is done.

    My trip to browsershots just confirms 1) that the layout works (sans js and flash) in browser and OS combinations I don't have, and 2) that the js and flash appear as intended in browser and OS combinations that I don't have.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by VIPStephan View Post
    It really depends on the experience you have. I, for example, can style a page completely with only checking in one browser and it will most likely look good in others as well, because I just know what works and what doesnt. This comes with experience and routine. As a beginner its certainly advisable to check often.
    True. I'm in much the same boat so I don't usually have much cleanup to do, but a new coder might need more checking for better results.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,141
    Thanks
    7
    Thanked 257 Times in 256 Posts
    Quote Originally Posted by LearningCoder View Post
    Thanks for all the wise words guys, I will keep it all in mind. The part of which I don't understand is how do you write different css depending on the browser? I have the following browsers: Opera, IE 8, Firefox, Chrome, Safari but have been developing with use of Safari.
    I'd say that since IE7 or IE8, there has been very little need to use any "special" coding to make a site compatible with all the browsers. Sure, if you need to support older browsers, you may need to have a few tweaks in there, but all the modern browsers are very consistent as long as they have well-written, standards compliant code given to them. I haven't used a conditional comment for at least 5 years.[1]

    Dave

    [1] I am lucky to not be doing this for business purposes, so while I test my sites in the relevant browsers, I don't spend *any* cycles on IE6, for example.

  • #12
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Rather than create a new thread, i'll post my other question regarding compatibility.

    What is the best way to make my websites compatible depending on monitor size/screen resolution?

    Problem is, I have an image as my menu. My menu has the links: home, news, members, forum, server and links. To create a hover effect, I had to create individual images of the menu links, change their color and position them behind their respective names. I've sent the site to my friend and when he opened it up, the individual images were misplaced and in the wrong position. Can this be done with JavaScript?

  • #13
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by LearningCoder View Post
    ...Can this be done with JavaScript?
    Well even when the answer is "yes" it is probably best to ask yourself first whether it *needs* to be done in javascript. The answer is usually "no" for things like basic menus. And -generally speaking - if it doesn't need to be done with javascript, then why do it with javascript at all?

    If we can see your specific page we can better answer the question.

    CSS3 has something called "media queries" which looks pretty handy for just such a thing:
    http://webdesign.about.com/od/css3/a...ia-queries.htm
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #14
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    Here is my code:-

    HTML

    Code:
    <!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>
         <title>[A!B] Attitude Brothaz Homepage</title>
    	 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
         <link rel="stylesheet" type="text/css" href="styles.css" />
         <script type="text/javascript" src="jquerylibrary.js"></script>
         <script type="text/javascript" src="matrix.js"></script>
    	 
    <script type="text/javascript">
         $(function() {
    	     
    	     $('a img').hover(function() {
    		     $(this).stop().animate({'opacity' : 1});
    		 }, function(){
    		     $(this).stop().animate({'opacity' : 0});
    		 });
    	 });
    </script>
    <script type="text/javascript">
    $(function() {
    $('#hidden7').hide();
    $('#matrix').hide();
    });
    
         $(function() {
         $('#oh').click(function() {
    	     $('#hidden7').fadeIn(500);
    	     $('#matrix').fadeIn(3000);
    	     
    	 });
    
    });
    </script>
    <script type="text/javascript">
    
    
    </script>
    
    </head>
    
    <body>
    <div id="mainheaddiv">
    <div id="container">
         <img src="images/abwgununlit.png" id="logo" width="800px" alt="[A!B]" height="290px" usemap="#logomenu" border="0" />
    	 
    	 <map name="logomenu" id="logomenu">
    	 <area shape="rect" coords="34,109,120,131" id="home" alt="home" href="index.htm" />
    	 <area shape="rect" coords="145,109,220,131" id="news" alt="news" href="news.htm" />
    	 <area shape="rect" coords="248,109,378,131" id="members" alt="members" href="members.htm" />
    	 <area shape="rect" coords="406,109,500,131" id="forums" alt="forums" href="forums.htm" />
    	 <area shape="rect" coords="574,109,657,131" id="server" alt="server" href="server.htm" />
    	 <area shape="rect" coords="689,109,748,131" id="links" alt="links" href="links.htm" />
    	 <area shape="rect" coords="513,68,573,106" id="oh" alt="monkey" href="#" />
    	 </map>
    
         <a href="">
         <img src="images/home2.png" alt="home2" id="hidden1" title="home2" width="73px" height="11px" border="0" /></a>
         <a href="">
         <img src="images/news2.png" alt="news2" id="hidden2" title="news2" width="63px" height="9px" border="0" /></a>
         <a href="">
         <img src="images/members2.png" alt="members2" id="hidden3" title="members2" width="118px" height="12px" border="0" /></a>
         <a href="http://www.ab-clan.com/forums" target="_blank">
         <img src="images/forums2.png" alt="forums2" id="hidden4" title="forums2" width="84px" height="11px" border="0" /></a>
         <a href="">
         <img src="images/server2.png" alt="server2" id="hidden5" title="server2" width="73px" height="9px" border="0" /></a>
         <a href="">
         <img src="images/links2.png" alt="links2" id="hidden6" title="links2" width="52px" height="11px" border="0" /></a>
         
    	 <img src="images/monkeyseparate.png" alt="monkey" id="hidden7" title="monkeyGun" />
    </div>
    </div>
    
    <div id="matrix">WARNING! Aimbot Activated</div>
    
    <div id="leftSide"></div>
    <div id="main">
         <h3 id="subHead">Welcome to [A!B] Attitude Brothaz</h3>
    	 <p id="hist1">The Brotherhood of Triad is by far the oldest clan of the Deus Ex Multiplayer scene. The founders wanted to 
    	              create a new clan that was unlike any others in the game and started planning Triad and its architecture in 
    				  late 2001. The clan was officially established on 25th of January, 2002, when the first website and forums 
    				  were also publicly launched. The name was later on changed to The Brotherhood of Triad to emphasize the fraternal
    				  unity of the clan, the equality of its members and the autocratic governing structure. The members of tBoT were 
    				  to revolutionize how the game was played, being zealous pioneers who endlessly and nearly scientifically 
    				  developed new strategies, methods and techniques to beat their opponents. From a new prospect tBoT quickly grew 
    				  to become a semi-secret society, an elite club for the few and selected, which was to dominate the servers.
         </p>
    	 <p id="hist2">For the fact that tBoT was technically far more advanced and ahead of others, the clan was admired and hated, 
    	               in one case to the extent that a lesser clan started an anti-[3] campaign to ban all the [3] members from 
    				   servers. They never succeeded as tBoT was too strong and united and just kept on growing. At its peak tBoT was 
    				   practically a giant conglomerate, nearly a monopoly of skill, having as many as 14 active members on the 
    				   roster at one point. He incomprehensibly united spirit of [3] that cannot be understood by an outsider held 
    				   the clan together at all times. Some of its members have carved their names among the most legendary of DXMP 
    				   history. Most of today's effective playing styles and techniques along with bio optimization and augmentations
    				   usage have been influenced by triad members who embraced pure skill and aimed at the ultimate
         </p>
    	 
    	 <hr noshade="noshade" id="hr1" />
    	 
    	 <h3 id="newsHeading">News/Updates</h3>
    	 <div class="show1"><p>MTL Update</p></div>
    	 <div class="hide1"><p>MTL UpdateMTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
    	                 MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
    					 MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
    					 </p>
    	 </div>
    	 <div class="show2"><p>MTL Update</p></div>
    	 <div class="hide2"><p>MTL UpdateMTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
    	                 MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
    					 MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
    					 </p>
    	 </div>
    	 <div class="show3"><p>MTL Update</p></div>
    	 <div class="hide3"><p>MTL UpdateMTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
    	                 MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
    					 MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update MTL Update
    					 </p>
    	 </div>
    	 
    	 
    </div>
    <div id="rightSide"></div>
    <hr noshade="noshade" id="hr2" size="1" />
    
    </body>
    </html>
    CSS:

    Code:
    html, body {margin: 0px;
                width: 100%;
    			background: #F7852C;}
    			
    p {font-family: Century Gothic;
       font-size: 12px;
       color: white;}
    
    #container {width: 800px;
    			height: 290px;
    			margin: auto;}
    
    #mainheaddiv {width: 100%;
                  border-bottom: 2px solid gray;
    			  background: #A6A6A7;}
    
    #logo {position: absolute;}
    
    #hidden1 {position: absolute;
              top: 25.8%;
    		  left: 14.0%;}
    
    #hidden2 {position: absolute;
              top: 26.3%;
    		  left: 25.3%;
    		  padding-right: 0px;}
    
    #hidden3 {position: absolute;
              top: 25.7%;
    		  left: 35.6%;
    		  padding-right: 0px;}
    		  
    #hidden4 {position: absolute;
              top: 25.8%;
    		  left: 51.1%;
    		  padding-right: 0px;}
    		  
    #hidden5 {position: absolute;
              top: 26.4%;
    		  left: 67.9%;
    		  padding-right: 0px;}
    		  
    #hidden6 {position: absolute;
              top: 25.8%;
    		  left: 79.3%;
    		  padding-right: 0px;}
    		  
    #hidden7 {position: absolute;
              top: 30.8%;
    		  left: 55.0%;
    		  padding-right: 0px;}
    		 
    .matrix {font-family: Lucida Console; 
             font-size: 10pt; 
    		 text-align: center; 
    		 width: 10px; 
    		 padding: 0px; 
    		 margin: 0px;}
    		 
    #matrix {position: absolute;
             top: 158px;
    		 left: 130px;}
    
    #leftSide {border-right: 1px solid gray;
               border-bottom: 1px solid gray;
               background: #a6a6a7;
    		   width: 10.1%;
    		   height: 900px;
    		   float: left;}
    		   
    #main {background: #F7852C;
    	   width: 74.9%;
    	   height: 850px;
    	   float: left;
    	   margin: 2%;}
    	   
    #subHead {text-align: center;
              font-family: Century Gothic;
    		  color: gray;
    		  text-decoration: underline;}
    		  
    #hist1, #hist2 {text-align: center;}
    
    #hist1:first-letter, #hist2:first-letter {font-size: 20px;
                                              color: gray;
    					                      font-weight: bold;}
    
    #rightSide {border-left: 1px solid gray;
                border-bottom: 1px solid gray;
                background: #a6a6a7;
    		    width: 10.1%;
    		    height: 900px;
    		    float: right;}
    			
    #update {border: 2px solid black;
             width: 30%;
    		 height: 200px;
    		 clear: right;}
    
    #newsHeading {font-family: Century Gothic;
                  color: gray;
    			  text-decoration: underline;}
    			  
    .show1, .show2, .show3 {border: 1px solid gray;
                            width: 20%;
    		                padding: 0px;
    		                text-align: center;
    		                background: #a6a6a7;
    		                color: green;}
    		
    .hide1, .hide2, .hide3 {border: 1px solid gray;
                            width: 100%;
    		                height: 80px;
    		                background: #a6a6a7;}
    		
    #hr1 {color: gray;}
    	
    #hr2 {clear: both;
          margin-bottom: 100px;
    	  color: gray;}
    Ok, so the first image is IE9 which is the desired effect. The second is Safari and as you can see, the images are not aligned very well at all!

    Any help would be greatly appreciated.

    Regards,

    LC.

    PS- Thanks for the site, i'll give that a read now! ty.
    Attached Thumbnails Attached Thumbnails Best way to cross-browser a site?-ie.jpg   Best way to cross-browser a site?-safari.jpg  
    Last edited by LearningCoder; 09-09-2011 at 10:16 PM.

  • #15
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    You should probably look into http://wellstyled.com/css-nopreload-rollovers.html

    (Note: Contrary to the example in the tutorial, I prefer to place the image sprites below one another, that’s easier to handle if the width of each item is different (while the height is usually the same).)


  •  
    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
    •