Im HTML steht ein <hr> um die Elemente zu trennen. Er soll jedoch nicht sichtbar sein. Damit der IE7 nicht eine Linie rendert, benötige ich die zoom: 25% ; Angabe.
Detaillierte hier!


hr.myHr {

zoom: 25%;
}


Das Element .SubNavigationTags ist ein Geschwister von h1 und ein Kind in #MainContent. Es kann an mehreren Orten erscheinen, jedoch wenn es nach dem h1 kommt, soll die margin-top 18px betragen.


.DetailPageWithoutTopImage #MainContent h1+.SubNavigationTags{
margin-top: 18px;
}


An dieser Stelle wird die attribute selection, bei einer zusätzliche Klasse,  geschrieben:


.ResultItems a.Title,
a span.icon {
background: transparent url(/_layouts/project/images/file.png) no-repeat left;
}
.ResultItems a.Title[href$=’.aspx’],
a.aspx span.icon {
background: transparent url(/_layouts/project/images/aspx.png) no-repeat left;
}


Video Player liegt in Explorer (7-9) über der Megadropdown.
Lösung: das den Object Tag umschliessende Element mit position:releative und z-index:0 definieren.
Dazu im Object Tag selber wmode transparent einfügen (ohne dies gehts nicht).
Weiter führender Link: http://manisheriar.com/blog/flash_objects_and_z_index

Wer viel CSS schreibt, wie ich, der soll sich unbedingt mit SASS oder LESS beschäftigen. Während SASS vor allem in der ruby Welt angewendet (mit dem Mac ist ruby sowieso schon vorinstalliert), ist LESS ‘universaler’. Es gibt php LESS Compiler, auch dotless für .net sowie Javascript Lösungen.
Noch besser ist meiner Meinung nach, mit Codekit LESS lokal zu compilieren und danach nur nach das CSS hochzuladen.
Die lokale Entwicklung ist damit fast doppelt so schnell. Die verschieden Browser-Hersteller Prefixe zum Beispiel, können mit mixins vordefiniert werden.
Ebenfalls super ist die Möglichkeit, Variablen zu definieren!

Links:
LESS
SASS
Codekit

Mit IE8 führte MS den Meta Tag <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> ein, um den IE8 mit der Rendering Engine des IE7 laufen zu lassen. Im Moment ist es jedoch nicht möglich, eine HTML5 Seite mit diesem Meta Tag zu valideren. In HTML5 Boilerplate wird zum Beispiel <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> verwendet, mit dem Hinweis, dies besser Server seitig auszugeben.
Nun, “edge” begreife ich definitiv nicht. Dann kann der Tag ganz weggelassen werden, edge würde ja bedeuten, dass jeder IE in seiner neuest möglichen Engine rendert. Das Chrome Frame macht schon einen gewissen Sinn. Edge bedeutet für mich aber viel Risiko, wir kennen ja die IE8 “Qualitäten” beim nur schon beim rendern von CSS 2.1.
Dann würde ich eher den Meta Tag <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" > bevorzugen.
Weiterführende Links zu diesem Thema:
http://www.alistapart.com/articles/beyonddoctype
http://stackoverflow.com/questions/6665312/w3c-markup-validator-html5-meta-problem
http://www.456bereastreet.com/archive/201103/x-ua-compatible_and_html5/

Useragentman zeigt in seinem Blogeintrag, wie box-shadow auch in den Versionen 6-8 des Internet Explorers erstellt werden kann.
Guter Lösungsvorschlag!
http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

Einzig würde ich die Reihenfolge hier andern:

/* CSS3 Box-shadow code: */ box-shadow: 5px 5px 0px #ff0000; -webkit-box-shadow: 5px 5px 0px #ff0000; -moz-box-shadow: 5px 5px 0px #ff0000;

in

/* CSS3 Box-shadow code: */ -webkit-box-shadow: 5px 5px 0px #ff0000; -moz-box-shadow: 5px 5px 0px #ff0000; box-shadow: 5px 5px 0px #ff0000;

Dropdownlist funktionierte nicht mehr im Firefox. In anderen Browser jedoch schon.
Lösung: auf dem umfassenden Div (label und select) war ein self clearing drauf :

div.Dropdonlist:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

Das geht nicht mit dem Firefox, zumindest nicht mit dem 9er.
Nachdem Entfernen des self clearing funktioniert das select wieder.

Empfehlenswerte Literatur über Responisve Web Design von Ethan Marcotte.
Auf a list apart und als Buch

In Chrome und in IE werden die Flyout (oder Dropdown) Menus vom eingebetteten Youtube Video überdeckt.

Nach diesem Thread ( http://www.google.com/support/forum/p/Chrome/thread?tid=314ebf3e9e1902b6&hl=en ) habe ich beim eingebettetem Video folgenden Code eingefügt:

<param name="wmode" value="opaque"></param>

und in

<embed noch wmode="opaque"

Dies hat im Chrome und im IE geholfen.