Improve company productivity with a Business Account.Sign Up

x
?
Solved

IE9 drop shadow problem

Posted on 2013-06-17
11
Medium Priority
?
511 Views
Last Modified: 2013-06-19
Hi devs,
I am not a dev but I am overseeing the re-design of our company website. I know a little about css and html to understand the lingo.  

What I've requested is that our site have a drop shadow aruond the main body element.  The company that is doing the redesign is saying they can't get it working in IE9.  It shows up in Safari on an iPhone and within Chrome in Windows 7.  If I open the the dev tools (F12) within IE9 and choose Document Mode: IE9 Standards it appears.  If Doc mode is set for Quarks it breaks.

Any ideas?  Keep in mind I don't have access to the full source code just whatever I can see from the dev tools.  I can download and use any other software that might help you if need be.
0
Comment
Question by:Vontech615
  • 5
  • 4
  • 2
11 Comments
 
LVL 1

Author Comment

by:Vontech615
ID: 39253095
Here's the site btw...
http://beta.westminstercompany.com/
0
 
LVL 22

Accepted Solution

by:
Kim Walker earned 2000 total points
ID: 39253174
The document needs a doctype. Add the following line to the beginning of the page before the <html> tag. It should be the very first thing in the file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Open in new window

This tells IE which version of HTML it's dealing with.
0
 
LVL 1

Author Comment

by:Vontech615
ID: 39253201
That's odd.  Why would a web company leave this out?  Even I know you need a doctype first thing.  Is there any reason I shouldn't request they add this?
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
LVL 22

Expert Comment

by:Kim Walker
ID: 39253212
Why would a web company leave this out?
I can't imagine a reputable web company that would leave this out.
0
 
LVL 1

Author Comment

by:Vontech615
ID: 39253244
Yeah, that's what I'm thinking.  I wasn't the person to choose the company unfortunately.

Anyway, I have them add this.  Do you think this is the cause of the issue or more so in their css coding?
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39253342
The CSS is very clean. I believe the doctype declaration will cause IE9 to behave in a more modern mode and render the box-shadow styling.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39253354
xmediaman is right about the doctype.
But just use
<!doctype html>

Without the doctype the browser drops into quirks mode and not standards mode.
0
 
LVL 1

Author Comment

by:Vontech615
ID: 39253377
Gotcha, thanks guys.  I've forwarded all of this to them.  I'll keep you posted.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39253385
@GaryC123, The HTML5 doctype increases the number of HTML errors from 12 to 70. I think it's best to stick with 4.01 Transitional. Especially considering the style of HTML coding in this page (it uses tables for layout).
0
 
LVL 58

Expert Comment

by:Gary
ID: 39253650
But we are only talking about mainly simple css fixes - which even using a loose doctype should be fixed
But anyway, leave it at that, your answer is correct.
0
 
LVL 1

Author Closing Comment

by:Vontech615
ID: 39259404
Thanks!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

606 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question