AOL Browser vs. FireFox vs. IE
Shan-Dysigns Apr 16, 2011 8:47 AMWithout 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.
This is on IE8
This is from AOL's browser (I think I'm running 9.5).
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.







