1

I'm at wit's end here and looking for help. I have a SharePoint 2007 page that uses some home-made JavaScript CEWPs and custom CSS files. When I open the page in IE10 and push it back to IE7 using the developer tools, the formatting looks similar to IE10. But when I open the same page in actual IE7 on a virtual machine I've set up, the styling doesn't show. I've been careful to use custom IDs and classes, and my rules are pointing to them, but I can't seem to budge the browser.

What's really odd is that the background image I define in the custom CSS does show, but when I add any rules to that same area of the CSS file, no other rules seem to work.

I WILL say that the page appearance in actual IE7 is similar to when I view it in IE10's IE5 Quirks mode. Is the browser forcing the page into a quirks view? If so, how do I prevent that from happening?

Here are some example rules that work fine in IE10 > IE7 but not in actual IE7:

#MSOZoneCell_WebPartWPQ3 table tbody tr td[vAlign] {
    font-family: Arial;
    color: white;
    text-align: center;
}

#allPriorities .priority {
    width: 350px;
    vertical-align: middle;
    display: inline-block;
    margin: 10px 30px;
    padding: 15px;
    background-color: black;
    text-align: left;
    font-weight: bold;
    border: 1px solid white;
    line-height: 2em;
    border: 2px dashed #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 4px black, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
}

.program p {
    font-weight: bold;
    padding: 0 0 5px 5px;
    border-bottom: 1px solid black;
    margin: 10px 0 5px;
}

Reference order seems fine-- I call the CSS file at the end of all my other tags, and I keep coming back to the fact that it works in IE10 and Chrome. Any ideas?

2

One thing I see right away is that you are using a selector with brackets ("td[vAlign]"). IE 7 doesn't not support CSS selectors in that fashion. This post has a good explanation of what CSS selectors do and dont work in IE 7: http://evotech.net/blog/2007/05/ie7-css-selectors-how-they-fail/

0

This question would probably be better asked in stackoverflow.com, but I'll take a stab.

CSS is a tricky beast, from differing browsers to just versions, it can vary a lot. The developer toolbar is nice, but isn't true to form. Their fake out doesn't always work, rather, isn't as reliable as we'd like. CSS does take time with a lot of trial and error. Check out http://w3schools.com/css/default.asp for some great details on CSS and even browser support.

Are you clearing the cache in your browser when you're making changes for IE7? hitting refresh by itself won't cut it, you'll need to force a cache reset as well (CTRL+R works well for me).

Post the same question over at stackoverflow, I bet you get more answers there.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.