Finding a properties specific to IE?

HTML & CSS
1

How do I find what properties of a rule are not working for IE7 ?

2

The only way I know is to view the site in IE7 and, using the IE7 dev tools, check which CSS rules don’t appear in the list. If they don’t appear there, I guess that eans IE7 isn’t reading them because it doesn’t understand them.

Of course, if something is broken r not appearing in IE onscreen, you know it’s not working in some way.

3

I can’t get the IE Dev Toolbar working as it should be so I can edit rules. I’m tinkering with it presently.

4

IE Dev Tool works in most other pages except mine. JEez.

5

Please provide a link so we can test. The links from your previous thread in the PHP section are dead.

6

I don’t think you can edit rules with that. It sucks. Like IE.

7

It’s no Firebug, but you can toggle declarations and add inline styles, which can prove sufficient.

8

Link. Try it for your self if you can get it to work.

9

This image shows where the colour of your form labels has been changed from white to red in the Trace Styles section. The pic is from IE9’s Dev Tools.

10

I’m using IE8 Development tools and I’m not able to see the styles on the right under Trace Styles.

11

I’ve tested your page in the IE7 Browser/Document mode in the Dev Tools of native IE8 and IE9. The result is the same: styles are correctly listed in Style and Trace Styles and the values can be edited in both. Something is amiss with your system.

Try updating to IE9.

12

I updated to IE9 and it finally works. Now I have to fit the H1 heading for IE7 on that page first place this all in a conditional statement for only IE7 as you said Victor IE 8,9 render most pages the same as the other browsers.

How do you add a rule to test in IE Dev Toolbar ?

13

Before you begin targeting IE7 though conditional comments, try simply removing the zoom from #header. This brings the h1 to the front in IE7 and doesn’t seem to do any harm in other browsers.

14

There is no zoom on the header.

15

Sorry, I meant z-index:

#header, ul#nav { 
position:relative;
z-index:1;
}
16

When you scroll in IE7 there is gray and white block visible that is not visible in the other browsers ?

17

So you’re happy with the h1 now?

A smart next move would be to get your HTML and CSS to pass validation.

If you use the Dev Tools to select the white and grey block you’ll see it’s one of the Fancybox elements, that is supposed to be hidden. One of the validation errors is the link to the Fancybox stylesheet:

<link rel="stylesheet" href="/construction/css/jquery.fancybox.css" type="text/css" media="screen" />

The closing /> is not valid for HTML4 Strict. Remove the / and see if that makes a difference.

18

I’m happy with the H1.
Where are you seeing that style sheet, I can’t find it in my code ?

19

The link element above was there earlier, as I copied your source to get a better view in a text editor, and still have the page open.

Now the link, which is immediately after the title element, has no href:

<link rel="stylesheet"  type="text/css" media="screen" />
20

I added the href, but I didn’t link it to a style sheet.