I'm working on putting together a site for a business I'm going to launch. To help get the desired look on the page, I've coded my text with (among other enhancements) the following text-shadow CSS code:
When viewing the site in Internet Explorer 10 (standard mode), much of the text on the right side of the page is cutoff/not showing (including text in my footer). See the sample linked below:
http://i1143.photobucket.com/albums/n631/MartinMelucci/TextexampleinChrome.png:original
I'm not sure why text-shadow CSS would cause this. I've read that text-shadow is supposed to be supported in IE10. Is there some sort of conflict with the rest of my code? To confirm, I've pasted it at the bottom of this post, though with
all content replaced with generic type as I'm not ready to have that public at the moment.
I previously posted this over in the Microsoft Community Forum, and received a reply noting my question was better posed here. Before posting, I did a search and didn't come across anything directly related, though I'm wondering if the problem in this thread relates here somehow (I can't seem to get this post with the link, so I'm only including the thread title from this forum's archives):
"IE 10 CSS box shadow working randomly"
I appreciate your assistance. I'm basically a novice at website building.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #C9D6A0;
margin: 0;
padding: 0;
color: #000;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero
padding and margin on lists. For consistency, you can either specify the
amounts you want here, or on the list items (LI, DT, DD) they contain. Remember
that what you do here will cascade to the .nav list unless you write a more
specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin- /* removing the top margin gets around an issue where
margins can escape from their containing div. The remaining bottom margin will
hold it away from any elements that follow. */
padding-right: 16px;
padding- /* adding the padding to the sides of the elements
within the divs, instead of the divs themselves, gets rid of any box model
math. A nested div with side padding can also be used as an alternate method.
*/
text-shadow: #A2C8CA 0 0 1.00px;
-webkit-font-smoothing: antialiased;
color: #AED6D9;
font-weight: 495;
font-size: .92em;
line-height: 150%;
}
a img { /* this selector removes the default blue border displayed in some
browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the
group of selectors that create the hover effect. ~~ */
a:link {
color: #AED6D9;
text-decoration: none; /* unless you style your links to look extremely
unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #AED6D9;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard
navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
background-color: #603B3D;
margin: 0 auto; /* the auto value on the sides, coupled with the width,
centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your
layout. It contains an image placeholder that should be replaced with your own
linked logo ~~ */
.header {
height: 200px;
width: 960px;
background-color: #603B3D;
text-align: left;
}
.header img {float: left;}
.header ul {
margin: 5px 0 0 400px;
text-align: center;
list-style: none;
}
.header ul li {
width: 127px;
margin: 0px;
float: left;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements
within this div have padding on their sides. This saves you from any "box model
math". Keep in mind, if you add any side padding or border to the div itself,
it will be added to the width you define to create the *total* width. You may
also choose to remove the padding on the element in the div and place a second
div within it with no width and the padding necessary for your design.
*/
.content {
margin: 186px 0 0;
padding: 2px 0;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 1em;
}
.bigger { font-size:91%; }
/* ~~ The footer ~~ */
.footer {
height: 15px;
width: 960px;
margin: 0 0 0 -480px;
padding: 10px 0;
bottom: 0;
background: #603B3D;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The
floated element must precede the element it should be next to on the page. */
float: right;
margin-
}
.fltlft { /* this class can be used to float an element left in your page. The
floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final
element following the last floated div (within the #container) if the #footer
is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
body,td,th {
color: #AED6D9;
}
-->
</style>
</head>
<body>
<div class="container">
<div class="header"><img src="XXX" width="443" height="186" alt="XXX"><ul>
<li><a href="XXX"><img src="XXX" width="127"
height="90" alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127"
height="90" alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127"
height="90" alt="XXX"></a></li>
</ul></div>
<div class="content">
<p> </p>
<p> </p>
<CENTER><p> </p>
<p style="font-size:1.6em;"><STRONG>XXX</STRONG></p></CENTER>
<p style="font-size:1.05em;"><em>XXX</em></p>
<p> </p>
<p> </p>
<p><SMALL>XXX</SMALL> (change date)</p>
<p><br>
XXX</p>
<p> </p>
<p>XXX</p>
<p> </p>
<p>XXX</p>
<CENTER>
<p>XXX
</p>
</CENTER>
<p><SMALL>XXX <strong><a target="_blank" href="XXX">XXX</a></strong> XXX
(including photos) XXX <strong>HERE</strong> XXX</SMALL> XXX</p>
<br>
<strong>
<!-- end .content -->
</strong></div>
<div class="footer">
<CENTER><p><span class=bigger><a target="_blank" href="XXX">XXX <img
src="XXX" width="15" height="15" alt="XXX"></a>, <a target="_blank"
href="XXX">XXX <img src="XXX" width="15" height="15" alt="XXX"></a>, <a
target="_blank" href="XXX">XXX <img src="XXX" width="15" height="14"
alt="XXX"></a></span></p></CENTER>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>