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;
                        }

[Der Martin]

Hi,

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.

das ist schwer zu glauben, denn allein das Ändern einer Farbe hat nach menschlichem Ermessen keinen Einfluss auf das Layout - also Abstände, Größen, Positionen etc. Wie reagieren andere Browser? Es gibt ja nicht nur Firefox und IE, und es gibt auch ältere IE-Versionen, die noch relevant sein sollten.

Ich vermute, dass beim Speichern der CSS-Datei generell irgendwas schiefgeht, kann mir aber im Moment nicht konkret vorstellen, was. Vielleicht UTF-8 mit BOM oder sonst irgendein Unfall mit der Zeichencodierung. Kannst du mal das intakte Original und die kaputte Version zum direkten Vergleich online stellen?

Übrigens: Es gibt keine Befehle in CSS, nur Regeln, Definitionen, Eigenschaften oder Werte.

So long,
 Martin

[LSK]

Danke für die Antworten.

Das Abspeicherprloblem, das Martin erwähnt hat, hat mich auf die Idee gebracht, dass es vielleicht am HTML-Editor liegt (auch komisch, aber manchmal ist die Welt ja verrückt).

Ich habe bisher mit Phase5 gearbeitet.

Jetzt habe ich die Änderungen in dem ganz schnöden Windows-Editor vorgenommen.
Und voila, es funktioniert!

Könnt ihr mir einen guten Editor empfehlen, der nicht solche Merkwürdigkeiten produziert?

[Gunther]

Könnt ihr mir einen guten Editor empfehlen, der nicht solche Merkwürdigkeiten produziert?

Notepad++

Gruß Gunther

[1UnitedPower]

Notepad++ [fixed]

ist auch mein derzeitiger Lieblingseditor.

[bubble]

... wenn ich einen Color: #xxx; ...

AFAIK unterstützt IE keine Farben nach dem #xxx-Muster, sondern nur #xxxxxx, oder tut er es mittlerweile?

MfG
bubble

[Der Martin]

Hallo,

AFAIK unterstützt IE keine Farben nach dem #xxx-Muster, sondern nur #xxxxxx, oder tut er es mittlerweile?

ja, mindestens seit IE5. :-)

Ciao,
 Martin

[bubble]

AFAIK unterstützt IE keine Farben nach dem #xxx-Muster, sondern nur #xxxxxx, oder tut er es mittlerweile?
ja, mindestens seit IE5. :-)

Oh. Hatte das mal irgendwo aufgeschnappt und nicht weiter hinterfragt. Bis auf bei schwarz und weiß benutz ich aber sowieso keine 'glatten' Werte wo das #xxx-Muster verwendbar wäre.

MfG
bubble