We help IT Professionals succeed at work.

ie7 workaround for :before and :after pseudo-elements

phillystyle123
on
1,098 Views
Last Modified: 2012-05-08
http://artspan-join.cjehost.com/join_ie7.php

see the quotes in the right column - they work great in the lastest ff and ie8. however, ie7 doesn't support these pseudo-elements.

i found a work around that seems to come highly recommended here:

http://juicystudio.com/article/fixing-ie-quotes.php

unfortunately, i can't get it to work  -i'm sure it's just my lack of js knowledge - can you take a look at my code and let meknow where i'm going wrong??

thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta name="description" content="Artspan.com members have an online gallery in which to market their artwork.  Sign up and you can begin art marketing online today!" />
<meta name="keywords" content="Contemporary art, oil paintings, acrylics, watercolors, photography, art marketing, artist websites, international artists, fine art, murals, pastels, sculpture, photorealism, /images, buy art online, contemporary artists, contemporary art gallery online" />
<meta name="description" content="Contemporary artist websites featuring works by established and emerging international artists, photographers, and artisans" />
<link rel="shortcut icon" href="https://www.artspan.com/favicon.ico">
<title>Artspan - Online artist website member application form</title>
<link href="/css/artspan/june_2008.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/artspan/craig_nov_2009_ie7.css" rel="stylesheet" type="text/css" media="screen" /> 
<script language="JavaScript" type="text/javascript">
function fixIEQuotes()
{
  var objQuotes = document.getElementsByTagName('q');
  var strOpen, strClose; 
  for (var i=0; i<objQuotes.length; i++)
  {
    if (isNested(objQuotes[i]))
    {
      // Double-quotes
      strOpen = document.createTextNode('\u2018');
      strClose = document.createTextNode('\u2019');
    }
    else
    {
      // Single-quotes
      strOpen = document.createTextNode('\u201c');
      strClose = document.createTextNode('\u201d');
    }
    // Insert quotation marks around quote
    objQuotes[i].parentNode.insertBefore(strOpen, objQuotes[i]);
    objQuotes[i].appendChild(strClose);
  } 
  objQuotes = null;
} 
function isNested(objElement)
{
  var objParent = objElement;
  do // Check if nested quote
  {
    objParent = objParent.parentNode;
    if (objParent.tagName && objParent.tagName.toLowerCase() == 'q')
      return true;
  } while (objParent.parentNode); 
  return false;
}
</script> 

</head> 
<body>
<!--[if !IE]>  
	entirePage is centered, and contains mainLayout and adLayout, horizontally positioned
	BEGIN ENTIREPAGE :: /entirePage <![endif]-->
	<div id="entirePage"> 
		<!--[if !IE]>  
		mainLayout is the frame that contains everything important (excludes ads)
		BEGIN MAINLAYOUT  :: /entirePage/mainLayout <![endif]-->
		<div id="mainLayout">
			
			<!--[if !IE]>  pageHeader includes logo, background image and top right navigation
			BEGIN PAGEHEADER :: /entirePage/mainLayout/pageHeader <![endif]--> 
			<div id="pageHeader">
				
				<div id="logoBackground">
					<img id="pageHeaderIMG" width="800" height="89" src="/images/mainSite/pageHeader_BG.jpg" alt="Page heading background" title="Artspan - Artist Websites for Contemporary Artwork">
					
					<div id="logo">
						<div id="logo_artspan">
							<a href="/"><img id="logo_artspan_img" width="155" height="43" src="/images/mainSite/Artspan_mainLogo.gif" alt="Artspan Logo" title="Artspan is Contemporary Art" border="0"></a>						</div> 
						<div id="logo_contemporary"> 
							contemporary art						</div>
					</div> 
					<div id="topNavigation">
							<ul class="pipeList darkPipeList">
								<li class="first"><a href="http://www.artspan.com">HOME</a></li>
								<li><a href="https://www.artspan.com//become_mbr.php">JOIN</a></li>
								<li><a href="/Category/">DIRECTORIES</a></li> 
								<li><a href="/community/">FORUM</a></li>
								<li><a href="/portal_directory.php">PORTALS</a></li>
								<li><a href="/FAQ.php">FAQ</a></li>
								<li><a href="/about_us.php">ABOUT</a></li>
								<li><a href="/contact.php">CONTACT</a></li>
								<li><a href="https://www.artspan.com//memberAdmin">LOGIN</a></li>
							</ul>
					</div>
					
				</div>
				
				<!--[if !IE]>  END LOGOBACKGROUND <![endif]-->
				
				
				
			</div>
			<!--[if !IE]>  END PAGEHEADER :: /entirePage/mainLayout/pageHeader <![endif]-->
			
			<!--BEGIN NEW JOIN PAGE CODE-->
			<div id="greenBanner">
				<h1 class="txtColor3">Complete Website Packages for Artists, Artisans, Photographers & Jewelers</h1>
			</div>
			
			<div id="signUp">
				<img src="images/signup_thumbs.jpg" alt="Sign Up Today, Be Online Tonight"  titlt="Sign Up Today, Be Online Tonight" />
				<div id="signUpText">
				<h1 class="txtColor4">Sign up Today <span class="txtColor1">&middot;</span> Be Online Tonight</h1>
				<h3 class="txtColor6">For a Limited Time</h3>
				<h2 class="txtColor5">No Set Up Fee<br />Free First Month</h2>
				</div>
			</div>
			<div id="twoCol">
				<div id="leftCol">
					<h1 class="txtColor2">Why Artspan?</h1>
					<table border="0" cellpadding="0" cellspacing="0" class="quadWrap">
					<tr>
						<td class="quad">
							<h2 class="txtColor7">It's Easy to Build Your Site.</h2>
							<img src="images/site-screenshot1.jpg" alt="Build your own website!" title="Build your own website!" align="left" />Login to your Control Panel and start building your site today!
							<br /><br />
							<a href="#" class="linkStyle1">See the Control Panel</a>
						</td>
						<td class="quad">
							<h2 class="txtColor7">Do It Yourself.</h2>
							You can make all your own changes. Add new images, arrange them in distinct galleries, add pages and text, change the site design, add a shopping cart and much more.
							<br />It's easy!
						</td>
						</tr>
						<tr>
						<td class="quad">
							<h2 class="txtColor7">More Traffic.</h2>
							Your site (and every image) is optimized for Google and the other search engines. Your site is also part of Artspan.com - a major internet ranked #1 by Google for "contemporary art." Your work will be featured in our directories, features and portals.
						</td>
						<td class="quad">
							<h2 class="txtColor7">Best Value.
							<br />Most Features.<br />
							Least Cost.</h2>
							Plans from US13.95 to 19.95/month<br />
							(10% off for annual pay).<br />
							<a href="#" class="linkStyle1">View plan details.</a><br />
							Since 1999, Artspan has been the leader. We do more for less.
						</td>
						</tr>
					</table>
					<div class="new">
						<img src="images/new.png" alt="New!" titlt="New!" align="left" />
						Now you can integrate your own personal shopping cart into your site! And, coming this month, PRINTS-ON -DEMAND... Visitors select an image, and then choose the size, mat & frame.  The print is shipped directly to them.
					</div>
					<div class="startHere">
						<div id="startHereLeft">
							<h1 class="txtColor2">Start Here!</h1>
							<h2 class="txtColor6">For Your<br /> Free Month</h2>
						</div>
						<div class="startHereRight">
						
							<form>
								<input type="text" name="username" value="username" class="txtInput" />
								<input type="text" name="password" value="password" class="txtInput" />
								<input type="text" name="password_confirm" value="password" class="txtInput" />
								<input type="text" name="email address" value="email" class="txtInput" />
								<input type="submit" value="SUBMIT" class="submit" />
							</form>
							
						</div>
					</div>
					<div id="flashWrap">
						<h1 class="txtColor4">See why Artspan is for artists, artisans & photographers</h1>
						<div class="vid"><img src="images/flash_placeholder.jpg" /></div>
					</div>
					
				</div>
				<div id="rightCol">
				
					<div class="rightColItem">
						<div class="goldQuote">
							<blockquote><span class="quoteLineHeightFirst">I am loving 
 this site.</span></blockquote>
						</div>
						<div class="quoteSig">- B. Staum</div>
					</div>
					
					<div class="rightColItem">
						<a href="#"><img src="images/site-screenshots2.jpg" alt="Artspan.com"  title="Artspan.com" border="0" /></a>
						<div class="rightColLinks"><a href="#" class="linkStyle1">View a variety of sample sites</a></div>
					</div>
					
					<div class="rightColItem">
						<div class="orangeQuote">
							<blockquote><span class="quoteLineHeightTheRest">I was so thrilled building my website on Artspan.com.  I am not at all a computer expert and yet I can deal<br /> with it on my own.</span></blockquote>
						</div>
						<div class="quoteSig">- C. Feng</div>
						<div class="rightColLinks"><a href="#" class="linkStyle1">see more of this and other testimonials</a></div>
					</div>
					
					<div class="rightColItem">
						<h1 class="txtColor2">Features! Let's list 'em</h1>
						<ul>
							<li><span class="txtColor6">An elegantly designed website.</span></li>
							<li><span class="txtColor6">Unlimited images (Professional plus site).</span></li>
							<li><span class="txtColor6">Unlimited pages - add and update when you like.</span></li>
							<li><span class="txtColor6">Choose your own colors, fonts and design layouts.</span></li>
							<li><span class="txtColor6">Optional built-in Shopping Cart that's just for your site.</span></li>
							<li><span class="txtColor6">Pages and images optimized for Google.</span></li>
							<li><span class="txtColor6">Your images are included in our searchable database and will also be listed in our varied directories.</span></li>
							<li><span class="txtColor6">Email marketing tool.</span></li>
							<li><span class="txtColor6">Prints-on-demand option for your site.</span></li></ul>
<p class="txtColor6">And more!</p>
						
					</div>
					
					<div class="rightColItem">
						<div class="blueQuote">
							<blockquote><span class="quoteLineHeightTheRest">Artspan has been an invaluable tool for<br /> marketing my work...</span></blockquote>
						</div>
						<div class="quoteSig">- S. Flood</div>
					</div>
					
					<div class="rightColLast">
						<div class="brownQuote">
							<blockquote><span class="quoteLineHeightTheRest">I wanted to let you know<br /> that I just closed a deal generated by the Artspan site.  The clients called the site 'beautiful' a number of times.</span></blockquote>
						</div>
						<div class="quoteSig">- L. Jones</div>
					</div>
					
				</div>
			</div>
			
			<!--END NEW JOIN PAGE CODE--> 
							<!--[if !IE]>   
				ip_mainSection is the area of internal page where all the page content is shown... it optionally has a right column that displays the portal links
				BEGIN IP_MAINSECTION  :: /entirePage/mainLayout/ip_mainSection <![endif]-->
							<!--[if !IE]> END IP_MAINSECTION  :: /entirePage/mainLayout/ip_mainSection <![endif]-->
                            <!--[if !IE]>
			BEGIN FOOTER :: /entirePage/mainLayout/footer <![endif]-->
<div id="pageFooter">	
				
				<div id="pageFooter_navList1">
					<ul class="pipeList lightPipeList">
						<li class="first"><a href="http://www.artspan.com">HOME</a></li>
						<li><a href="https://www.artspan.com//become_mbr.php">JOIN ARTSPAN</a></li>
						<li><a href="/Category/">DIRECTORIES</a></li>
						<li><a href="/community/">FORUM</a></li> 
						<li><a href="/portal_directory.php">PORTALS</a></li>
						<li><a href="/about_us.php">ABOUT</a></li>
						<li><a href="/contact.php">CONTACT</a></li>
						<li><a href="https://www.artspan.com//memberAdmin">LOGIN</a></li>
					</ul>					
				</div> 

				<div id="pageFooter_navList2">
					<ul class="pipeList darkPipeList">
						<li class="first"><a href="/article_display.php">ARTICLES</a></li>
						<li><a href="/calendar/">ART CALENDAR</a></li>
						<li><a href="/d/index.php">NON-ARTSPAN SITES</a></li>
						<li><a href="/d/submit.php">SUBMIT A SITE</a></li> 
						<li><a href="/portal_directory.php">PORTALS MENU</a></li>
						<li><a href="/news.php">ARTSPAN NEWS</a></li>
						<!--<li><a href="/sitemap.php">SITE MAP</a></li>-->
					</ul>
				</div> 
				<div id="pageFooter_copyrightText">
					&copy; 2008 Artspan &trade; LLC, All rights reserved
				</div> 
		  </div>
			<!--[if !IE]> END FOOTER  :: /entirePage/mainLayout/footer <![endif]--> 

			
			
				 
				 
		</div>
		<!--[if !IE]>  END MAINLAYOUT :: /entirePage/mainLayout <![endif]--> 

		<!--[if !IE]>  BEGIN ADLAYOUT :: /entirePage/adLayout <![endif]-->
		<!--[if !IE]>  END ADLAYOUT :: /entirePage/adLayout <![endif]-->
    </div>
	<!--[if !IE]>  END ENTIREPAGE :: /entirePage <![endif]--> 
 

<!--Google Analytics Code--> 
<script src="https://ssl.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-1082684-1";
urchinTracker();
</script>
<!--END Code--> 

</body>
</html>

Open in new window

Comment
Watch Question

David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

Commented:
It seems to not be working for two reasons. I don't see a call to the function anywhere.  Also you're using a "blockquote" element, not a "q" element.

Try using this instead:
function insertAfter(el,newEl){
  if(el && newEl){
    if(el.nextSibling) return el.parentNode.insertBefore(newEl,el.nextSibling);
    else return el.parentNode.appendChild(newEl);
  }
}
function fixIEBlockQuotes()
{
  var d=document, strOpen, strClose;
  var objQuotes = d.getElementsByTagName('blockquote'); 
  for (var i=0; i<objQuotes.length; i++)
  {
    strOpen = d.createElement('span');
    strOpen.appendChild(d.createTextNode('\u201c'));
    strClose = d.createElement('span');
    strClose.appendChild(d.createTextNode('\u201d'));
   
    // Insert quotation marks around quote
    objQuotes[i].parentNode.insertBefore(strOpen, objQuotes[i]);
    insertAfter(objQuotes[i],strClose);
  } 
  objQuotes = null;
}
window.onload = function(){ /* quick and dirty onload event handler */
  fixIEBlockQuotes();
}

Open in new window

Author

Commented:
that's pretty cool - thanks!

check out:

http://artspan-join.cjehost.com/join_ie7.php

if you check it out in ie8 or the latest FF- you'll see the curly quotes in all their glory.

now, if you check them out in ie7 you'll see extremely tiny quotes - is there a way to make the ie7 quotes look more like the curly quotes in ie8 and FF?
Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
thanks  - much appreciated. still sort of buggy and not flexible enough though - but i'm not going to pursue it because i just don't think it's going to look as good as the css version - hopefully ie7 will go away soon...

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.