I use something similar to the following HTML to create tabs on my website. When I convert the page to PDF, the selected tab only shows the background image to the left of the tab text. I was able to track down the issue to the text-shadow css style. If I remove it, the pdf renders correctly. With it I get the error. The page looks correct in Chrome, Firefox, and IE with the style enabled (IE doesn't show the shadow but it still shows the background).
Here's the tabs with the text-shadow style:
And here it is without:
The HTML for this page:
Code: HTML/ASPX
<!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>
<style type="text/css">
body { background-color: #373737;}
.mainnav-tabs ul { list-style-type: none; }
.mainnav-tabs li { float: left; }
.mainnav-tabs ul li { margin: 0 0 0 7px; position: relative; }
.mainnav-tabs ul li a,
.mainnav-tabs ul li a:active,
.mainnav-tabs ul li a:visited {
color: #fafafa !important;
text-decoration: none;
}
.mainnav-tabs ul li a {
background: url(navbar_tab_sprites.png) right top no-repeat;
display: block;
padding: 0 15px 0 0;
}
.mainnav-tabs ul li a span {
background: url(navbar_tab_sprites.png) left top no-repeat;
display: block;
padding: 0 0 0 15px;
}
.mainnav-tabs ul li.selected a {
background: url(navbar_tab_sprites.png) right -100px no-repeat;
color: #4d4d4d !important;
text-shadow: #666 1px 0px 1px; /* This line causes the issue */
}
.mainnav-tabs ul li.selected a span {
background: url(navbar_tab_sprites.png) left -100px no-repeat;
}
</style>
</head>
<body>
<div id="tabs">
<div class="mainnav-tabs">
<ul>
<li id="Home" class="selected"><a href="#tabs-1"><span>Home</span></a></li>
<li id="Tab2"><a href="#tabs-3"><span>Tab2</span></a></li>
<li id="Tab3"><a href="#tabs-2"><span>Tab3</span></a></li>
</ul>
</div>
</div>
</body>
</html>
and the sprite image used on the page:
