Browser Quirks – here's what I did… https://www.hereswhatidid.com/ The Development Blog of Gabe Shackle Mon, 05 May 2014 12:51:59 +0000 en-US hourly 1 https://wordpress.org/?v=5.4.2 Be careful with your CSS identifiers (AdBlock is watching!) https://www.hereswhatidid.com/2014/05/careful-css-identifiers-adblock-watching/ Fri, 02 May 2014 15:52:08 +0000 https://www.hereswhatidid.com/?p=557 If you notice that page elements are missing from browser to browser with no obvious source, verify that AdBlock is installed and then check that the offending element does not meet the criteria of being an advertisement.  Here is a list of the classes, IDs, and various other selectors that AdBlock currently looks for:

#advert1,
#advert2,
#advertise,
#advertisement1,
#advertisetop,
#advertising_wrapper,
#advtop,
#adwrapper,
#banner-ad,
#bannerAd,
#bannerAdWrapper,
#banner_topad,
#bannerad,
#bigAd,
#bigad,
#body_ad,
#bottom_ad,
#centerads,
#cmn_ad_tag_head,
#companionAd,
#content-header-ad,
#contentAd,
#content_ads,
#content_adv,
#contentad,
#dart-container-728x90,
#dfp_ad_Entry_728x90,
#dfp_ad_Home_728x90,
#divAd,
#div_prerollAd_1,
#download_ad,
#featuread,
#featured-ads,
#featuredAds,
#footer_ad,
#footer_ads,
#game-ad,
#google_ads_frame,
#google_ads_frame1_anchor,
#google_ads_frame2,
#googlead,
#head-ad,
#header-ads,
#headerAd,
#headerAdContainer,
#header_ad,
#homead,
#ka_adRightSkyscraperWide,
#leaderAd,
#leaderBoardAd,
#leaderboard-ad,
#left_ads,
#leftad,
#leftads,
#logoAd,
#logo_ad,
#mainAd,
#main_ad,
#mpu2,
#mpu2_container,
#mpu_container,
#msad,
#myAd,
#player_ads,
#pre_advertising_wrapper,
#prerollAd,
#promo-ad,
#publicidad,
#reklama,
#rh-ad,
#right_ads,
#right_adsense,
#searchAd,
#search_ads,
#sideAd,
#side_ads,
#sidebar-ads,
#sidebar_ads,
#skybox-ad,
#sponsorAdDiv,
#sponsoredlinks,
#sponsors-home,
#takeover_ad,
#top-ad,
#topAd,
#topAdSpace,
#topAdSpace_div,
#topAdvert,
#topBannerAd,
#top_ad,
#top_ads,
#topad,
#topbannerad,
#videoAd,
.ADBAR,
.AdBody:not(body),
.AdBox,
.AdInfo,
.AdTitle,
.AdvertContainer,
.HomeAds,
.RelatedAds,
.SponsoredContent,
.ad-300x250,
.ad-banner,
.ad-block,
.ad-border,
.ad-btn,
.ad-button,
.ad-cell,
.ad-display,
.ad-enabled,
.ad-holder,
.ad-img,
.ad-inner,
.ad-item,
.ad-leader,
.ad-leaderboard,
.ad-left,
.ad-links,
.ad-right,
.ad-section,
.ad-served,
.ad-sidebar,
.ad-square,
.ad-stack,
.ad-text,
.ad-top,
.ad-unit,
.ad-unit-300-wrapper,
.ad-vertical-container,
.ad-wide,
.ad-wrap,
.ad-wrapper,
.ad160,
.ad300,
.ad728,
.ad90,
.adBlock,
.adBottomBoard,
.adBox,
.adContent,
.adDiv,
.adElement,
.adFrame,
.adFrameCnt,
.adHead,
.adHeader,
.adHeaderblack,
.adHeadline,
.adHolder,
.adHoldert,
.adImg,
.adItem,
.adLink,
.adMiddle,
.adMod,
.adModule,
.adOverlay,
.adPanel,
.adResult,
.adRight,
.adRotator,
.adSpace,
.adSpot,
.adText,
.adTitle,
.adTopHome,
.adWidget,
.adWrap,
.ad_1,
.ad_160,
.ad_160x600,
.ad_2,
.ad_3,
.ad_728x90,
.ad_Right,
.ad_body,
.ad_container,
.ad_description,
.ad_global_header,
.ad_head_rectangle,
.ad_header,
.ad_item,
.ad_leaderboard,
.ad_line,
.ad_middle,
.ad_outer,
.ad_promo,
.ad_slug_table,
.ad_space,
.ad_text,
.ad_title,
.ad_trick_header,
.ad_wrap,
.ad_wrapper,
.ad_zone,
.adarea,
.adbanner,
.adbar,
.adbottom,
.adbutton,
.adcolumn,
.adcont,
.addiv,
.adframe,
.adheader,
.adholder,
.adinfo,
.adlink,
.adlist,
.admain,
.admiddle,
.adright,
.adrow1,
.adrow2,
.ads-area,
.ads-col,
.ads-header,
.ads-holder,
.ads-inline,
.ads-item,
.ads-section,
.ads-title,
.ads-top,
.ads1,
.adsBlock,
.ads_catDiv,
.ads_div,
.ads_top,
.ads_wrapper,
.adsbottombox,
.adsbox,
.adsbygoogle,
.adscontainer,
.adshome,
.adside,
.adslot_blurred,
.adspace,
.adtile,
.adtop,
.adv_300,
.advert-block,
.advert-box,
.advert-container,
.advert-content,
.advert-horizontal,
.advert2,
.advertColumn,
.advertContainer,
.advertLink,
.advertText,
.advert_container,
.advert_list,
.advertbox,
.advertisement-1,
.advertisement-swimlane,
.advertiser,
.advertising_block,
.advertisment,
.advertorial,
.adverts,
.adverttext,
.adwords,
.afs_ads,
.after-post-ad,
.article_ad,
.banner-ads,
.banner300,
.bannerAd,
.banner_728x90,
.banner_ad,
.bannerad,
.block-ad,
.blog-ads,
.bottom-ad,
.bottom-ads,
.bottom-left-ad,
.bottomAds,
.bottom_ad_block,
.box-ads,
.boxad,
.can_ad_slug,
.category-ad,
.change_AdContainer,
.container_ad,
.container_row_ad,
.contentAd,
.content_ads,
.cp-adsInited,
.displayAd,
.featuredAdBox,
.flash-advertisement,
.footer-ad,
.footer-ads,
.footerad,
.forumAd,
.gallery-ad,
.google-sponsored,
.googleAdSense,
.googleAds,
.header-ad,
.headerAd,
.header_ad,
.header_ad_center,
.header_advert,
.headerad,
.headerads,
.home-ad,
.homeAd,
.homead,
.homepage-ad,
.homepage_ads,
.horizontal_ad,
.image-advertisement,
.imgad,
.inner_ad,
.innerad,
.interstitial_ad_wrapper,
.ipsAd,
.item-container-ad,
.leaderboard-ad,
.leaderboard-ads,
.leftAd,
.leftad,
.list-ad,
.logo-ad,
.marketing-ad,
.mid_ad,
.middle_AD,
.module-ad,
.newsAd,
.oasad,
.openx,
.page_ad,
.pfAd,
.player_ad,
.player_hover_ad,
.pm-ad,
.post-ad,
.post_ad,
.post_ads,
.postad,
.premiumAdOverlay,
.premiumAdOverlayClose,
.promoAd,
.publicidad,
.rbRectAd,
.rectangle_ad,
.refreshAds,
.region-top-ad-position,
.reklam,
.reklama,
.reportAdLink,
.right-ad,
.rightAd,
.right_ad,
.right_ads_column,
.rightad,
.rightadv,
.sb_adsNv2,
.searchAds,
.searchad,
.searchads,
.showAd,
.side-ad,
.side-bar-ad-position1,
.single-ad,
.singleAd,
.sky_ad,
.skyscraperAd,
.smallAd,
.small_ad,
.smallads,
.sponsor-box,
.sponsoredLinks,
.sponsorlink,
.text-ad,
.textad,
.textads,
.top-ad,
.topAds,
.top_ad,
.top_ad_div,
.top_ad_wrap,
.top_ads,
.topads,
.tower-ad,
.type_ads_default,
.wideAd,
.withAds,
.wp_bannerize,
.yom-ad,
a[href^="http://ad-emea.doubleclick.net/"],
a[href^="http://ad.doubleclick.net/"],
a[href^="http://adultfriendfinder.com/p/register.cgi?pid="],
a[href^="http://marketgid.com/"],
a[href^="http://mgid.com/"],
a[href^="http://pubads.g.doubleclick.net/"],
a[href^="http://us.marketgid.com/"],
a[href^="http://www.fbooksluts.com/"],
a[href^="http://www.fleshlight.com/"],
a[href^="http://www.google.com/aclk?"],
a[href^="http://www.liutilities.com/"],
a[href^="http://www.socialsex.com/"],
a[href^="http://www.yourfuckbook.com/?"],
a[id^="mg_add"],
div[id^="MarketGid"],
div[id^="div-gpt-ad-"],
iframe[src^="http://ad.yieldmanager.com/"]
]]> Update: CSS3 Pie still pretty rough https://www.hereswhatidid.com/2011/06/update-css3-pie-still-pretty-rough/ Fri, 24 Jun 2011 19:19:22 +0000 https://www.hereswhatidid.com/?p=259 After attempting to use the CSS3 Pie method for achieving some CSS3 support in IE browsers I’ve unfortunately come to the conclusion that it is still far too buggy for any kind of use other than for testing or demonstrations.  It has a pretty significant issue with the way that IE8 and lower hand page zooming in that any background image that you have will remain at it’s fixed size and simply tile.  Here’s a screenshot showing what my tabbed quotes example looks like after zooming:

Here are a few other issues that I’ve run into as well:

  1. Noticeable delay on style rendering when page first loads. When you first load a page using the CSS3 Pie fix there is a small delay before those CSS3 properties are put in place.  This delay increases with every element that has some type of CSS3 style applied to it.  So if you wanted to round the corners on 100 divs on a single page you could be seeing nearly a full half-second delay before those are rendered on the screen.  It appears to be affected purely by machine speed so even people with a very fast internet connection will experience a delay unless they’re on a powerful machine.
  2. Many “position: relative” hacks required on more complex layouts. The more complex your styling gets the more you have to utilize the “position: relative” fix that is recommended on their site to trigger the proper layout method in IE.  This becomes extremely cumbersome as you go on with a layout as it isn’t necessarily used in the same elements every time, which leads to a lot of wasted time hunting down the particular element which needs the style applied to it.
  3. Sometimes it just doesn’t work. Occasionally a page will load and the CSS3 Pie will not load at all this leaving it in the default styles.  This happens infrequently but the fact that it happens at all seals the deal on whether or not I would feel safe using this method for anything other than a proof of concept or demonstration site.

I’m sure the problems with CSS3 Pie are purely related to having to work around the huge amount of shortcomings within the IE browser and I applaud the author for getting it this far.  For now, though, I would still recommend against using this for any type of production work.

]]> Use CSS3 PIE for enabling CSS3 in IE https://www.hereswhatidid.com/2011/02/use-css3-pie-for-enabling-css3-in-ie/ https://www.hereswhatidid.com/2011/02/use-css3-pie-for-enabling-css3-in-ie/#comments Sat, 12 Feb 2011 14:44:45 +0000 https://www.hereswhatidid.com/?p=191 I recently ran across this Internet Explorer CSS3 workaround that uses a HTC file to solve the majority of my CSS3 woes when it comes to developing cross-browser layouts.  Rounded corners, drop shadows, gradients, rgba, multiple backgrounds and even PNG transparency support are all solved with a simple (mostly simple) bit of CSS and the HTC file they’ve developed.The official site for this fix is here:

http://css3pie.com//

I’ve set up a working demo of the code described below here:

View Demo

Download Source Files

I tried this out on a new project that involved creating a tab-style content box with rounded corners.  Normally this would involve either using image sprites or living with the fact that IE-based browsers will not be able to render the corners as the designer wanted them.

Here’s a screenshot of the basic tabbed content boxes as they are rendered in Internet Explorer 6 and Internet Explorer 7/8.  I lumped 7 and 8 together since they were nearly identical except for some very minor font anti-aliasing differences.

Before CSS3 PIE

Internet Explorer 6

IE 6 Before CSS3 PIE

Internet Explorer 7 & 8

IE 7 & 8 Before CSS3 PIE

After CSS3 PIE

Internet Explorer 6

IE 6 After CSS3 PIE

Internet Explorer 7 & 8

IE 7 & 8 After CSS3 PIE

Implementation

There are a few things to watch out for when using CSS3 PIE.  A few of the CSS3 properties have to be done using the “-pie” prefix in order to trigger the proper rendering in Internet Explorer.  For example, to achieve this same multiple background declaration in CSS3 PIE:

background-color: #ccc;
background-image: url(quote-open.png), url(quote-close.png);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
background-color: #ccc;	background-image: url(quote-open.png), url(quote-close.png);  background-position: left top, right bottom;  background-repeat: no-repeat, no-repeat;

You will need to add the CSS3 PIE specific declaration for backgrounds:

-pie-background: #ccc url(quote-open.png) no-repeat left top, url(quote-close.png) no-repeat right bottom;

Also, when you’re using JavaScript to manipulate styles on your page you need to add the following bit to your CSS to tell CSS3 PIE to “listen” to that element and watch for updates to it’s ancestors.

-pie-watch-ancestors: 1;

Finally, the last semi-tricky thing with CSS3 PIE is that for some elements you will have to apply the following CSS to their ancestor to get the CSS3 PIE to take effect. The symptom of needing to apply this fix is if the element you’re expecting to be styled disappears from the screen upon rendering:

position: relative;
z-index: 1;

All in all, I’ve found this system well worth the 2-3 minor tricky parts. In my opinion it’s a much better solution than letting the unsupported CSS3 elements degrade for those that are still using Internet Explorer 6-8.

]]> https://www.hereswhatidid.com/2011/02/use-css3-pie-for-enabling-css3-in-ie/feed/ 3 301 Redirection Codes https://www.hereswhatidid.com/2010/11/301-redirection-codes/ Sun, 14 Nov 2010 04:28:48 +0000 http://hereswhatidid/?p=52 A collection of the most common methods for performing 301 redirects:

Redirect with .htaccess and Mod_Rewrite

301 Redirect: xyz-site.com to www.xyz-site.com

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} !^www.xyz-site.com$ [NC]
RewriteRule ^(.*)$ http://www.xyz-site.com/$1 [L,R=301]

301 Redirect: www.xyz-site.com to xyz-site.com

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} !^xyz-site.com$ [NC]
RewriteRule ^(.*)$ http://xyz-site.com/$1 [L,R=301]

301 Redirect: Redirecting Individual pages

Redirect 301 /previous-page.html http://www.xyz-site.com/new-page.html

* These scripts should be placed in the .htaccess file.

Redirect with PHP

<?php
Header( "HTTP/1.1 301 Moved Permanently" );
Header( "Location: http://www.xyz-site.com/" );
exit(0);
?>

* This script should be the first piece of code on the page to function correctly.

Redirect with classic ASP

<@ Language=VBScript %>
<%
Response.Status="301 Moved Permanently" Response.AddHeader "Location",
" http://www.xyz-site.com/"
%>

* This script should be the first piece of code on the page to function correctly.

Redirect with ASP.NET

<script>
private void Page_Load(object sender, System.EventArgs e)
{
Response.Status = "301 Moved Permanently";
Response.AddHeader("Location","http://www.xyz-site.com/");
}
</script>

* This script should be the first piece of code on the page to function correctly.

Redirect with ColdFusion

<cfheader statuscode="301" statustext="Moved permanently">
<cfheader name="Location" value="http://www.new-xyz-site.com/">

* This script should be the first piece of code on the page to function correctly.

Redirect with Perl

[perl]
$q = new CGI;
print $q->redirect(" http://www.new-url.com/ ");
[/perl]

* This script should be the first piece of code on the page to function correctly.

]]> Classic ASP Recordset values disappearing… https://www.hereswhatidid.com/2010/11/classic-asp-recordset-values-disappearing/ Tue, 09 Nov 2010 04:27:37 +0000 http://hereswhatidid/?p=48 Or just plain acting strange? Check your connection string. Recently had a Classic ASP site that I was converting from running off of Access to using a SQL2005 database and the values in recordsets were behaving very oddly. Anytime a row column was accessed it would clear the rest of the values. For example, if I called up the value of

[vb]rsTemp.Fields("FieldOne")[/vb]

Any other fields in that particular row would come up blank. After quite a bit of searching the solution came down to the fact I was using this as my connection string:

Driver={SQL Server}; Server=DBServer; Database=DBName; Uid=DBUserName; Pwd=DBPassword;

Changing the driver portion of the connection string immediately fixed all the strange behaviors I was getting:

Provider=SQLNCLI; Server=DBServer; Database=DBName; Uid=DBUserName; Pwd=DBPassword;

]]> Display inconsistencies between FireFox and other browsers? https://www.hereswhatidid.com/2010/11/display-inconsistencies-between-firefox-and-other-browsers/ Sat, 06 Nov 2010 04:26:56 +0000 http://hereswhatidid/?p=46 Double check your syntax. FireFox is more forgiving of errors than IE when it comes to the CSS code. For example:
[sourcecode language=”css”]background:transparent url(images/check.gif)no-repeat 0 6px;[/sourcecode]

Will work as intended within FireFox but not IE even though there is no space between the URL declaration and the “no-repeat” parameter. Change that code to:
background:transparent url(images/check.gif) no-repeat 0 6px;
And it will work fine all around.

]]>