Which browser do you design for?

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.

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.

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:

<style>
.login_l
{
	background: #ECECEC;
	height: 32px;
	width: 697px;
}
.login_r
{
	height: 32px;
	text-align: center;
}
</style>

<div align=center style="border:1px solid red">
Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy
  <div class="page" style="width:887px; text-align:left; border:1px solid blue ">
    <div style="border:1px solid cyan; width:750px "><br />
      <div class="login_l" style="clear:both; border:1px solid green; ">
        <div class="login_r" style="border:1px solid yellow  ">
          <form action="index.php" method="get">
            <table cellpadding="5" cellspacing="0" border="0" width="100%" align="center" >
              <tr>
                <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>
                <td align="right"><div class="cp_heading"> All times are GMT. The time now is <span class="time">05:53 AM</span>. </div></td>
              </tr>
            </table>
          </form>
        </div>
      </div>
      <br />
      <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
        <div class="smallfont"> vBulletin Copyright &copy;2000 - 2006, Jelsoft Enterprises Ltd. </div>
        <div class="smallfont"> </div>
      </div>
      <p> </p>
    </div>
  </div>
</div>

<p>&nbsp;</p>

<div style=" text-align:center;border:1px solid red">
Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy text Dummy textDummy text Dummy
  <div class="page" style="width:887px; text-align:left; margin-left:auto; margin-right:auto ; border:1px solid blue ">
    <div style="border:1px solid cyan; width:750px "><br />
      <div class="login_l" style="clear:both; border:1px solid green; ">
        <div class="login_r" style="border:1px solid yellow  ">
          <form action="index.php" method="get">
            <table cellpadding="5" cellspacing="0" border="0" width="100%" align="center" >
              <tr>
                <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>
                <td align="right"><div class="cp_heading"> All times are GMT. The time now is <span class="time">05:53 AM</span>. </div></td>
              </tr>
            </table>
          </form>
        </div>
      </div>
      <br />
      <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
        <div class="smallfont"> vBulletin Copyright &copy;2000 - 2006, Jelsoft Enterprises Ltd. </div>
        <div class="smallfont"> </div>
      </div>
      <p> </p>
    </div>
  </div>
</div>

I hope it makes sense.

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.

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. :)

I know what it's going to look like in Firefox, so I concentrate on old IE...

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