HTML and CSS RSS HTML and CSS RSS

Which browser do you design for?

Reply

•
•
Join Date: Feb 2002
Posts: 12,027
Reputation: cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light 
Solved Threads: 126
Administrator
Staff Writer
cscgal's Avatar
cscgal cscgal is offline Offline
The Queen of DaniWeb

Which browser do you design for?

 
0
  #1
Feb 25th, 2006
I have always developed in Internet Explorer and designed for Firefox. I also make sure that my site looks fine in Safari. However, there are a bunch of quirks and things that don't look too great in Opera, and I was wondering whether it is worth considering.

I know that Opera is just a small percentage of my visitors, but I would feel more comfortable knowing that things not displaying right are bugs in Opera and not bugs in my CSS that just so happen to not be noticable in IE or Firefox.

Is Opera known to display things a bit "off"?
Dani the Computer Science Gal
Follow my Twitter feed! twitter.com/daniweb
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2006
Posts: 50
Reputation: Esopo is an unknown quantity at this point 
Solved Threads: 1
Esopo Esopo is offline Offline
Junior Poster in Training

Re: Which browser do you design for?

 
0
  #2
Feb 26th, 2006
Hi,

Opera 8 is one of the best browsers out there (much better than IE, IMHO). They have really made the extra effort to clean up their act and thus far I haven't been able to come up with a script that breaks only Opera (so kudos to you

Since they went 100% free a few months ago they have gained a lot of ground. Opera always had the edge with the cool UI and now that it is free and being advertised as compliant (and fast) it has managed to regain most of the ground lost to FF. Further, they are growing tremendously in the mobile market as well.

This set of stats serves as a decent overview. I expect Opera to continue climbing:
http://www.w3schools.com/browsers/browsers_stats.asp

As for Opera displaying things a bit off, I haven't heard of it doing so any more than Firefox.

I personally code for Firefox, then validate, then fix for IE. after that all other browsers seem to get it right.

Is it worth it to fix for Opera?
I have never looked at it that way. Opera is usually as realiable as Firefox (usually). But I personally wouldn't spend too much effort fixing for it, if it ever came to that.

Safari has a similar market share but it is the main browser for Mac. Opera is a secondary browser in every platform (except some new mobile devices), my point being that anybody using Opera has to be aware that they are using a secondary browser.
Site admin at NetBulge.com, a place set out to improve the web 1 good article at a time :)
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2002
Posts: 12,027
Reputation: cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light cscgal is a glorious beacon of light 
Solved Threads: 126
Administrator
Staff Writer
cscgal's Avatar
cscgal cscgal is offline Offline
The Queen of DaniWeb

Re: Which browser do you design for?

 
0
  #3
Feb 26th, 2006
I know you probably think it's small, but if you scroll down to the bottom of the page, you'll see the grey container holding About Us / Contact Us / Advertising / etc links. This table is supposed to be left aligned and lined up with the main body content, but instead it is offset to the right. It works fine in every other browser.
Dani the Computer Science Gal
Follow my Twitter feed! twitter.com/daniweb
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2006
Posts: 50
Reputation: Esopo is an unknown quantity at this point 
Solved Threads: 1
Esopo Esopo is offline Offline
Junior Poster in Training

Re: Which browser do you design for?

 
0
  #4
Feb 27th, 2006
Nice problem!! :mrgreen:

Here is what's going on:

You have several nested blocks. the first one has its content centered with the deprecated but useful align="center". Three levels deeper is the class="login_l" div that needs to be left aligned, and the code you are using for that lies 2 levels back in the class="page" div styled with text-align:left.

This is causing an interpretation puzzle in which every browser does its best to provide a render but is left either guessing or using its own faulty propietary scheme (by the latter I mean IE).

As far as I know text-align - and the align attribute for that matter - are supposed to style inline elements and probably shouldn't style block elements.

Somewhere in there IE and FF do the equations to produce the result you want (although I suspect they are using different equations) and Opera's opinion differs. Opera is accepting your initial align=center as block-wide and disregarding your second text-align:left for block styling.


The solution (or at least how I fixed it):

1. Change the deprecated align=center to text-align:center

2. Add a centering style to the class=page div
(margin-left:auto; margin-right:auto )

The result is all browsers rendering the same (hopefully exactly the same you had initially).

Here is sample code that illustrates this whole thing, I added borders to the divs to show what I'm talking about. The first one is the original and the second one is the fix:

HTML and CSS Syntax (Toggle Plain Text) 
  1. <style>
  2. .login_l
  3. {
  4. 	background: #ECECEC;
  5. 	height: 32px;
  6. 	width: 697px;
  7. }
  8. .login_r
  9. {
  10. 	height: 32px;
  11. 	text-align: center;
  12. }
  13. </style>
  14.  
  15. <div align=center style="border:1px solid red">
  16. Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy
  17.   <div class="page" style="width:887px; text-align:left; border:1px solid blue ">
  18.     <div style="border:1px solid cyan; width:750px "><br />
  19.       <div class="login_l" style="clear:both; border:1px solid green; ">
  20.         <div class="login_r" style="border:1px solid yellow  ">
  21.           <form action="index.php" method="get">
  22.             <table cellpadding="5" cellspacing="0" border="0" width="100%" align="center" >
  23.               <tr>
  24.                 <td><div class="cp_heading"> <a href="/techtalkforums/faq.php?faq=daniweb_faq">About Us</a> - <a href="/techtalkforums/sendmessage.php">Contact Us</a> - <strong><a href="/mediakit/">Advertising</a></strong> - <a href="/techtalkforums/archive/">Archive</a> - <a href="/techtalkforums/faq.php?faq=privacy_policy">Privacy Statement</a> </div></td>
  25.                 <td align="right"><div class="cp_heading"> All times are GMT. The time now is <span class="time">05:53 AM</span>. </div></td>
  26.               </tr>
  27.             </table>
  28.           </form>
  29.         </div>
  30.       </div>
  31.       <br />
  32.       <div style="width:697px"> <span style="float:right"> <a href="#top" onClick="self.scrollTo(0, 0); return false;">Return To Top</a> </span> &copy;2003 - 2006 DaniWeb LLC
  33.         <div class="smallfont"> vBulletin Copyright &copy;2000 - 2006, Jelsoft Enterprises Ltd. </div>
  34.         <div class="smallfont"> </div>
  35.       </div>
  36.       <p> </p>
  37.     </div>
  38.   </div>
  39. </div>
  40.  
  41. <p>&nbsp;</p>
  42.  
  43. <div style=" text-align:center;border:1px solid red">
  44. Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy
  45.   <div class="page" style="width:887px; text-align:left; margin-left:auto; margin-right:auto ; border:1px solid blue ">
  46.     <div style="border:1px solid cyan; width:750px "><br />
  47.       <div class="login_l" style="clear:both; border:1px solid green; ">
  48.         <div class="login_r" style="border:1px solid yellow  ">
  49.           <form action="index.php" method="get">
  50.             <table cellpadding="5" cellspacing="0" border="0" width="100%" align="center" >
  51.               <tr>
  52.                 <td><div class="cp_heading"> <a href="/techtalkforums/faq.php?faq=daniweb_faq">About Us</a> - <a href="/techtalkforums/sendmessage.php">Contact Us</a> - <strong><a href="/mediakit/">Advertising</a></strong> - <a href="/techtalkforums/archive/">Archive</a> - <a href="/techtalkforums/faq.php?faq=privacy_policy">Privacy Statement</a> </div></td>
  53.                 <td align="right"><div class="cp_heading"> All times are GMT. The time now is <span class="time">05:53 AM</span>. </div></td>
  54.               </tr>
  55.             </table>
  56.           </form>
  57.         </div>
  58.       </div>
  59.       <br />
  60.       <div style="width:697px"> <span style="float:right"> <a href="#top" onClick="self.scrollTo(0, 0); return false;">Return To Top</a> </span> &copy;2003 - 2006 DaniWeb LLC
  61.         <div class="smallfont"> vBulletin Copyright &copy;2000 - 2006, Jelsoft Enterprises Ltd. </div>
  62.         <div class="smallfont"> </div>
  63.       </div>
  64.       <p> </p>
  65.     </div>
  66.   </div>
  67. </div>

I hope it makes sense.
Site admin at NetBulge.com, a place set out to improve the web 1 good article at a time :)
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2004
Posts: 764
Reputation: DaveSW is on a distinguished road 
Solved Threads: 17
DaveSW's Avatar
DaveSW DaveSW is offline Offline
Master Poster

Re: Which browser do you design for?

 
0
  #5
Feb 27th, 2006
I build my layout in IE5.5. Then I test in Moz and sometimes update. Then I add content and do a last minute testing round in Moz, Opera and IE6.
emdevelopments - accessible web design | HiJackThis

Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2005
Posts: 354
Reputation: Troy is an unknown quantity at this point 
Solved Threads: 5
Troy's Avatar
Troy Troy is offline Offline
Posting Whiz

Re: Which browser do you design for?

 
0
  #6
Mar 5th, 2006
Kudos to Esopo for such a thorough reply, excellent explanation of the issue, and even code to solve the problem!

I do my development with Firefox because I love the javascript tool for viewing the script errors. After adding much script or CSS, I stop and check in IE as well. I find if I stay compliant with FF, it's very likely to look and work well in IE. The reverse is less so. To my shame, I never check with Opera or any other browser. However, most of my development is for Intranets where the browser community is somewhat controlled.
Troy Wolf is the author of SnippetEdit. "Website editing as easy as it gets." IX Web Hosting
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2004
Posts: 764
Reputation: DaveSW is on a distinguished road 
Solved Threads: 17
DaveSW's Avatar
DaveSW DaveSW is offline Offline
Master Poster

Re: Which browser do you design for?

 
0
  #7
Mar 6th, 2006
I know what it's going to look like in Firefox, so I concentrate on old IE...
emdevelopments - accessible web design | HiJackThis

Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2004
Posts: 348
Reputation: paradox814 is an unknown quantity at this point 
Solved Threads: 4
paradox814's Avatar
paradox814 paradox814 is offline Offline
Posting Whiz

Re: Which browser do you design for?

 
0
  #8
Mar 12th, 2006
I design for firefox, but I have a little plugin that will automatically switch it back and forth to internet explorer so I can see what it looks like in either browser
http://www.brangle.com/
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form google griefers hackers hitcounter hover html ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping swf swf. textcolor timecolor titletags url urlseparatedwords visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC