7 Replies Latest reply: Apr 16, 2011 1:08 PM by SnakEyez02 RSS

    AOL Browser vs. FireFox vs. IE

    Shan-Dysigns Community Member

      Without going into detail about how much I hate dealing with AOL's browser (or AOL users in general that actually use AOL's browsers), I have a layout issue that only seems to be affected with AOL's browser. As far as I know, AOL uses IE as their browser and maybe has some of their own wrapper rules appended. I have a website in which a horizontal row of "tabs" look different across the above 3 browsers. The tab names begin with "In Stock" and end with "Laser Engraving".

       

      This is on FireFox.

      ff.jpg

       

      This is on IE8

      ie.jpg

       

      This is from AOL's browser (I think I'm running 9.5).

      aol.jpg

       

      AOL goes crazy with the padding of these tabs (from what I can guess). Here is the html for those tabs: (I hope the code displays this time)

       

      <input name="inStockTab" type="button" class="inStockTab" onclick="switchTabs(this);" value="In Stock" />
      <input name="customOrderTab" type="button" class="customOrderTab" onclick="switchTabs(this);" value="Out of Stock - Custom Order Only" />
      <input name="typeOfWood" type="button" class="customOrderOptionsTab" title="...::: Wood Samples :::..." onclick="window.open('custom-order-options.php#typeOfWood', 'typeOfWood')" value="Wood Samples" />
      <input name="styleOfStopper" type="button" class="customOrderOptionsTab" title="...::: Stopper Styles :::..." onclick="window.open('custom-order-options.php#styleOfStopper', 'styleOfStopper')" value="Stopper Styles" />
      <input name="laserEngraving" type="button" class="customOrderOptionsTab" title="...::: Laser Engraving :::..." onclick="window.open('custom-order-options.php#laserEngraving', 'laserEngraving')" value="Laser Engraving" />

       

      and here is the basic css:

       

      .inStockTab,
      .customOrderTab,
      .tabSelected,
      .customOrderOptionsTab { /*olive background, white lettering*/
          position:relative;
          left:38px;
          width:auto;
          height:24px;
          /*background:#abab81;*/
          background:#6e0000;
          border:1px solid #867763;
          font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
          font-size:12px;
          line-height:12px;
          color:#fff;
          padding:0px 6px;
          -moz-box-shadow:1px -1px 2px #968671;
          -webkit-box-shadow:1px -1px 2px #968671;
          box-shadow:1px -1px 2px #968671;
          cursor:pointer;
          z-index:200;
      }

       

      I've bolded what I think is the culprit, but why is AOL showing differently than IE? I don't make it a habit to accomodate for AOL beyond what I may accomodate for IE, because I thought they were basically using the same engine.

        • 1. Re: AOL Browser vs. FireFox vs. IE
          SnakEyez02 CommunityMVP

          The only article I can find says that the AOL Desktop runs off of Webkit like Safari and Chrome ( http://en.wikipedia.org/wiki/AOL_Desktop ).  Is the user base even that much for the AOL browser?  I can't even seem to find any suggestions on the browser at all and if the only issue is that spacing and you aren't planning on expanding that section anymore, I think you should be ok.

           

          If you want us to look farther into the code the only way we will be able to do this is to see the page live or all of the code from the page.

          • 3. Re: AOL Browser vs. FireFox vs. IE
            Shan-Dysigns Community Member

            JoeyD

            Pointless reply. Why did you even bother? My issue is NOT that I want a website to look or expect it to look exactly the same across all browsers. I was merely asking if padding was rendered differently with AOL than IE.

             

            SnakEyez02

            My screenshot came from AOL 9.5 (not Desktop), but I would assume the results would be the same. Like I said before, I don't design with AOL in mind, but since my client asked, I thought I would at least look into it. I've already told him and tried to educate him on AOL's browsers just being the worst, and based on what reports (although it's been a while) say about AOL usage, I can't imagine anyone actually putting much thought into AOL in general) - why do you think AOL no longer charges for their service? I think they are having a hard time giving it away now, haha...

             

            I don't think seeing the whole website code would shed any light because those elements have nothing to do with anything other than the code I pasted.

            • 4. Re: AOL Browser vs. FireFox vs. IE
              JoeyD1978 CommunityMVP

              I think there's a perfectly valid point to my reply. Who cares if a minor detail renders differently in browser that no one uses? The extra padding isn't even breaking the layout. Tell your client there's about 40 other browsers that might have minimal differences as well and they need not waste yours or their own time worrying about it.

               

                    Chrome 10.0
                    Chrome 11.0
                    Chrome 12.0
                    Chrome 5.0
                    Dillo 0.8
                    Dillo 2.2
                    ELinks 0.12
                    Epiphany 2.22
                    Epiphany 2.30
                    Firefox 1.0
                    Firefox 2.0
                    Firefox 3.0
                    Firefox 3.5
                    Firefox 3.6
                    Firefox 4.0
                    Firefox 5.0
                    Flock 2.6
                    Galeon 2.0
                    Iceape 1.1
                    Iceweasel 2.0
                    Iceweasel 3.0
                    Iceweasel 3.5
                    Kazehakase 0.5
                    Konqueror 3.5
                    Konqueror 4.2
                    Konqueror 4.5
                    Links 2.0
                    Lynx 2.8
                    Minefield 3.6
                    Minefield 3.7
                    Minefield 4.2
                    MSIE 8.0
                    MSIE 9.0
                    Navigator 9.0
                    Opera 10.0
                    Opera 10.60
                    Opera 11.0
                    Opera 11.10
                    Opera 9.63
                    Opera 9.80
                    Safari 5.0
                    SeaMonkey 1.1
                    SeaMonkey 2.0
                    Shiretoko 3.5
                    Avant 11.7
                    Chrome 10.0
                    Chrome 11.0
                    Chrome 1.0
                    Chrome 2.0
                    Chrome 3.0
                    Chrome 8.0
                    Chrome 9.0
                    Firefox 2.0
                    Firefox 3.0
                    Firefox 3.5
                    Firefox 3.6
                    Firefox 4.0
                    Flock 2.6
                    Flock 7.0
                    K-Meleon 1.5
                    Minefield 3.7
                    MSIE 6.0
                    MSIE 7.0
                    MSIE 8.0
                    Navigator 9.0
                    Netscape 8.1
                    Opera 10.50
                    Opera 10.63
                    Opera 11.1
                    Opera 11.10
                    Opera 7.54
                    Opera 8.54
                    Opera 9.27
                    Opera 9.50
                    Opera 9.51
                    Opera 9.52
                    Opera 9.60
                    Opera 9.61
                    Opera 9.62
                    Opera 9.63
                    Opera 9.64
                    Opera 9.80
                    Safari 4.0
                    Safari 5.0
                    SeaMonkey 1.1
                    SeaMonkey 2.0
                    Shiretoko 3.5

              • 5. Re: AOL Browser vs. FireFox vs. IE
                Shan-Dysigns Community Member

                Jesus, even more of a useless reply. I don't know what school of professional design you came from, but you don't simply tell a client "sorry, your issue isn't worth looking into". I don't give a damn if the client was using AOL version 1 - if there is a significant difference in layout rendering , I would at least like to find the reason (whether there is a solution or not). The purpose of my post was not really a matter of browser usage, it's more a matter of inquisition as to 'why'. If you don't feel the topic is relative to what you consider a client may or may not feel important, then DON'T REPLY! Just because the issue isn't breaking layout doesn't mean there might come a time when the client wants another tab added. At that point, my client 'may' have a problem with AOL's browser displaying differently regardless of how many users he may feel uses it, so I'm simply inquiring what might be going on. I've already explained to my client about the lesser importance of AOL's browsers compared to all others, but sometimes the client just needs to be "appeased" by some type of answer (again whether it's a solution or not).

                 

                By the way, did you just randomly copy/paste your list of browsers? Some of them are duplicated up to 3 times (same version releases and all).

                • 6. Re: AOL Browser vs. FireFox vs. IE
                  JoeyD1978 CommunityMVP

                  That's awesome dude, are you going to mow your clients lawn and walk their dog when you're done with their website? Why don't you try setting your tabs up in an unordered list with list items instead of configuring it in such a goofy manner to start.

                  • 7. Re: AOL Browser vs. FireFox vs. IE
                    SnakEyez02 CommunityMVP

                    Shan-Dysigns wrote:

                     

                    JoeyD

                    Pointless reply. Why did you even bother? My issue is NOT that I want a website to look or expect it to look exactly the same across all browsers. I was merely asking if padding was rendered differently with AOL than IE.

                     

                    SnakEyez02

                    My screenshot came from AOL 9.5 (not Desktop), but I would assume the results would be the same. Like I said before, I don't design with AOL in mind, but since my client asked, I thought I would at least look into it. I've already told him and tried to educate him on AOL's browsers just being the worst, and based on what reports (although it's been a while) say about AOL usage, I can't imagine anyone actually putting much thought into AOL in general) - why do you think AOL no longer charges for their service? I think they are having a hard time giving it away now, haha...

                     

                    I don't think seeing the whole website code would shed any light because those elements have nothing to do with anything other than the code I pasted.

                     

                    Shan, what I am trying to get at is looking at your tab system more.  It is not Spry code from Dreamweaver, nor any common extension I have come across before and is using input fields from a form and javascript triggers.  The inherit properties of the form elements could be causing an issue with the AOL browser.  Only other thing I would look into is the validation to make sure there everything is validating because sometimes even the smallest things can lead to unexpected results in specific browser versions.  http://validator.w3.org/unicorn/