Farbe ändern

[LSK]

Hallo zusammen,

Ich bin gerade dabei, eine Homepage-Vorlage umzubauen und stoße dabei auf mein erstes Problem.

Ich möchte die Schriftfarbe der Header- und Navigationsleiste ändern. Prinzipiell kein Problem. Nur zerschießt es mir dabei im IE10 das komplette Layout. Egal wo, wenn ich einen Color: #xxx; - Befehl ändere, ist danach Chaos im Layout angesagt. Im Firefox ist alles gut.

Hier der Code aus der Index-Datei und der CSS-Datei:

Index-Datei:

<header id="header">
    <!-- Logo -->
    <h1><a href="#" class="mobileUI-site-name">UntitledCorporation</a></h1>

<!-- Nav -->
    <nav id="nav" class="mobileUI-site-nav">
        <ul>
            <li class="current_page_item"><a href="index.html">Homepage</a></li>
            <li>
                <a href="">A Dropdown Menu</a>
                <ul>
                    <li><a href="#">Lorem ipsum dolor</a></li>
                    <li><a href="#">Magna phasellus</a></li>
                    <li><a href="#">Etiam dolore nisl</a></li>
                    <li>
                        <span>Phasellus consequat</span>
                        <ul>
                            <li><a href="#">Lorem ipsum dolor</a></li>
                            <li><a href="#">Phasellus consequat</a></li>
                            <li><a href="#">Magna phasellus</a></li>
                            <li><a href="#">Etiam dolore nisl</a></li>
                            <li><a href="#">Veroeros feugiat</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Veroeros feugiat</a></li>
                </ul>
            </li>
            <li><a href="twocolumn1.html">Two Column #1</a></li>
            <li><a href="twocolumn2.html">Two Column #2</a></li>
            <li><a href="onecolumn.html">One Column</a></li>
        </ul>
    </nav>
</header>

Und hier aus der CSS-Datei

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

#header
        {
                height: 5em;
                line-height: 5em;
                position: relative;
        }

#header h1
                {
                        float: left;
                        font-size: 1.40em;
                        font-weight: 600;
                }

#header h1 a
                        {
                                display: inline-block;
                                text-decoration: none;
                                text-transform: uppercase;
                                color: #FFF;
                        }

/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/

#nav
        {
                height: 5em;
                position: absolute;
                right: 0;
                top: 0;
        }

#nav ul
                {
                        margin: 0;
                        padding: 0;
                 }

#nav li
                {
                        display: inline-block;
                        margin-left: 2em;
                }

#nav a
                {
                        display: block;
                        padding: 0 1em 0 1em;
                        line-height: 3.25em;
                        text-decoration: none;
                        font-size: 1.25em;
                        color: #b4b4b4;
                        transition: color .25s ease-in-out;
                        -moz-transition: color .25s ease-in-out;
                        -webkit-transition: color .25s ease-in-out;
                }

#nav li:hover a
                {
                        color: #dfdfdf;
                }

#nav .current_page_item a,
                #nav .active a
                {
                        color: #FFF !important;
                }

#nav > ul > li > ul
                {
                        display: none;
                }

.dropotron
        {
                background: url('images/bg02.jpg') repeat;
                padding: 0.5em 0 0.5em 0;
                min-width: 14em;
        }

.dropotron a,
                .dropotron span
                {
                        display: block;
                        color: #b4b4b4;
                        text-decoration: none;
                        padding: 0.75em 1em 0.75em 1em;
                        transition: color .25s ease-in-out;
                        -moz-transition: color .25s ease-in-out;
                        -webkit-transition: color .25s ease-in-out;
                }

.dropotron li
                {
                        border-top: 1px solid #3f3f3f;
                }

.dropotron li:hover > a,
                        .dropotron li:hover > span
                        {
                                color: #dfdfdf;
                        }

.dropotron li:first-child
                        {
                                border-top: 0;
                        }