MMM717

I've setup a dummy page that is hosted to better demonstrate this problem. For whatever reason, the jpgs I added to it (which were just dark gray files with text to replace my actual pictures/buttons/etc.) aren't loading, but hopefully that shouldn't be a problem. The issue with text cutting off in IE 10 regular mode is still the same. See the link below: http://www.11fifty.c...page/index.html In addition, I've attached screenshots of when I run this dummy page locally - in Chrome where all displays correctly, and also in IE 10 regular mode where it doesn't.

I have text shadow on all my text. It's used subtly to make the text look better to my eye, and not to look shadowy. I saved the CSS I got thru IE10 and pasted the notepad text below. I don't know if there's anything there that will help, if there's something I should be looking for within it, doing otherwise, etc. I've heard the term parent element (and child element), but don't really know what to look for to be the parent (I'm guessing it's something that sets a definition of sorts for a page)? I said I was a novice at this... Is there something else you need to help? I can't get over the problem I'm having with this, and that it's only with IE 10 (in regular mode). /* Generated by F12 developer tools. This might not be an accurate representation of the original source file */html {font: 100%/1.4 "Century Gothic", CenturyGothic, AppleGothic, sans-serif; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-size-adjust: none; font-stretch: normal; background-color: rgb(201, 214, 160);}body {font: 100%/1.4 "Century Gothic", CenturyGothic, AppleGothic, sans-serif; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-size-adjust: none; font-stretch: normal; background-color: rgb(201, 214, 160);}ul {margin: 0px; padding: 0px;}ol {margin: 0px; padding: 0px;}dl {margin: 0px; padding: 0px;}h1 {color: rgb(174, 214, 217); line-height: 150%; padding-right: 16px; padding-left: 16px; font-size: 0.92em; margin-top: 0px; text-shadow: 0px 0px 1px #a2c8ca; -webkit-font-smoothing: antialiased;}h2 {color: rgb(174, 214, 217); line-height: 150%; padding-right: 16px; padding-left: 16px; font-size: 0.92em; margin-top: 0px; text-shadow: 0px 0px 1px #a2c8ca; -webkit-font-smoothing: antialiased;}h3 {color: rgb(174, 214, 217); line-height: 150%; padding-right: 16px; padding-left: 16px; font-size: 0.92em; margin-top: 0px; text-shadow: 0px 0px 1px #a2c8ca; -webkit-font-smoothing: antialiased;}h4 {color: rgb(174, 214, 217); line-height: 150%; padding-right: 16px; padding-left: 16px; font-size: 0.92em; margin-top: 0px; text-shadow: 0px 0px 1px #a2c8ca; -webkit-font-smoothing: antialiased;}h5 {color: rgb(174, 214, 217); line-height: 150%; padding-right: 16px; padding-left: 16px; font-size: 0.92em; margin-top: 0px; text-shadow: 0px 0px 1px #a2c8ca; -webkit-font-smoothing: antialiased;}h6 {color: rgb(174, 214, 217); line-height: 150%; padding-right: 16px; padding-left: 16px; font-size: 0.92em; margin-top: 0px; text-shadow: 0px 0px 1px #a2c8ca; -webkit-font-smoothing: antialiased;}p {color: rgb(174, 214, 217); line-height: 150%; padding-right: 16px; padding-left: 16px; font-size: 0.92em; margin-top: 0px; text-shadow: 0px 0px 1px #a2c8ca; -webkit-font-smoothing: antialiased;}a img {border: currentColor;}a:link {color: rgb(174, 214, 217); text-decoration: none;}a:visited {color: rgb(174, 214, 217); text-decoration: underline;}a:hover {text-decoration: none;}a:active {text-decoration: none;}a:focus {text-decoration: none;}.container {margin: 0px auto; width: 960px; overflow: auto; background-color: rgb(96, 59, 61);}.header {width: 960px; height: 200px; text-align: left; position: fixed; z-index: 1000; background-color: rgb(96, 59, 61);}.header img {float: left;}.header ul {list-style: none; margin: 5px 0px 0px 400px; text-align: center;}.header ul li {margin: 0px; width: 127px; float: left;}.content {margin: 186px 0px 0px; padding: 2px 0px; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-size: 1em;}.bigger {font-size: 91%;}.footer {background: rgb(96, 59, 61); margin: 0px 0px 0px -480px; padding: 10px 0px; left: 50%; width: 960px; height: 15px; bottom: 0px; position: fixed;}.fltrt {margin-left: 8px; float: right;}.fltlft {margin-right: 8px; float: left;}.clearfloat {height: 0px; line-height: 0px; clear: both; font-size: 1px;}body {color: rgb(174, 214, 217);}td {color: rgb(174, 214, 217);}th {color: rgb(174, 214, 217);}

I brought up my pages in IE10 and after hitting F12, I clicked on the find menu and then select element by click. Is this what I should be doing? If so, what should I be looking for and reporting back to you? I also tried looking for an external DOM inspector, but the ones I looked at seemed older than the IE10 browser. Considering that this is the only browser (so far) I can find a problem with my site running on, I'd imagine I need one that will show problems in my code that will occur in that browser. Do you have a recommendation? Or is that not needed with using what's built into IE10?

Does the page need to be live to do this? Or can it do things properly with the site only available locally on my computer?

Well, I put the code in a trial of Dreamweaver CS6, and it looked fine there. Is there some way for it to show errors only in IE10? Do you need something else from me to better diagnose the problem? Something else I should be doing here?

Thanks. The reason why I'm attributing this problem to text shadow is that when I remove that line of code, the text appears full. I don't have the page hosted online anywhere yet. Are you able to add some text and pictures to this code that shows the problem on your end? If not, I can possibly PM you something...

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 the following text-shadow CSS code: text-shadow: #A2C8CA 0 0 1.00px; 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.photobu...10.png:original When viewing the site in Chrome and Firefox, as well as switching to IE 7, 8, 9, or 10's compatibility mode within IE10, things look fine. See below: http://i1143.photobu...me.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 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-top: 0; /* 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-left: 16px; /* 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;overflow: auto;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;position: fixed;}.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;position: fixed;bottom: 0;left: 50%;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-left: 8px;}.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>