Problem mit den Farben im IE & Menügestaltung

nicovod · 16.11.2008

Ich bin gerade dabei für meine Seite
ein eigenes Wordpress Theme zu machen, soweit so gut, eigentlich sogar fertig wer da nicht der IE >.< Ich bin jetzt soweit das die seite fast komplett genauso dargestellt wird wie im FF doch der IE stellt die farben einfach anders da >.<

Im Firefox :

Im Internet Explorer :

Zur Info : Alle Grafiken wurden in Photoshop erstellt mit dem genauen Wert #242424, das selbe wurde auch in der CSS Datei Eingetragen!
------------------------------------------------------------------------

Das Zweite Problem was ich hab was man oben in den Screenshots sieht ist die gestaltung des menüs, die buttons sollten direkt nebeneinander sein was aber nicht ist, ich dachte zuerst es wär ein border ist es aber auch nicht.

Die Buttons wurden mit folgendem Code eingefügt :

HTML:

<a href="<?php echo get_option('home'); ?>/"><img onmouseover="this.src='http://www.cofilew.de/wp-content/themes/cofilew/images/startseitebuttonhover.gif'" onmouseout="this.src='http://www.cofilew.de/wp-content/themes/cofilew/images/startseitebutton.gif'" src="http://www.cofilew.de/wp-content/themes/cofilew/images/startseitebutton.gif" /></a>
<a href="/uber-mich/"><img onmouseover="this.src='http://www.cofilew.de/wp-content/themes/cofilew/images/uebermichbuttonhover.gif'" onmouseout="this.src='http://www.cofilew.de/wp-content/themes/cofilew/images/uebermichbutton.gif'" src="http://www.cofilew.de/wp-content/themes/cofilew/images/uebermichbutton.gif" /></a>
<a href="/artworks/"><img onmouseover="this.src='http://www.cofilew.de/wp-content/themes/cofilew/images/artworksbuttonhover.gif'" onmouseout="this.src='http://www.cofilew.de/wp-content/themes/cofilew/images/artworksbutton.gif'" src="http://www.cofilew.de/wp-content/themes/cofilew/images/artworksbutton.gif" /></a>
<a href="/themes/"><img onmouseover="this.src='http://www.cofilew.de/wp-content/themes/cofilew/images/themesbuttonhover.gif'" onmouseout="this.src='http://www.cofilew.de/wp-content/themes/cofilew/images/themesbutton.gif'" src="http://www.cofilew.de/wp-content/themes/cofilew/images/themesbutton.gif" /></a>
<a href="/impressum/"><img onmouseover="this.src='http://www.cofilew.de/wp-content/themes/cofilew/images/impressumbuttonhover.gif'" onmouseout="this.src='http://www.cofilew.de/wp-content/themes/cofilew/images/impressumbutton.gif'" src="http://www.cofilew.de/wp-content/themes/cofilew/images/impressumbutton.gif" /></a>
<a href="/kontakt/"><img onmouseover="this.src='http://www.cofilew.de/wp-content/themes/cofilew/images/kontaktbuttonhover.gif'" onmouseout="this.src='http://www.cofilew.de/wp-content/themes/cofilew/images/kontaktbutton.gif'" src="http://www.cofilew.de/wp-content/themes/cofilew/images/kontaktbutton.gif" /></a>
</div>

hier die gesamte style.css :

HTML:

.post-info {
height: 18px;
line-height: 11px;
background-color : #242424;
margin : 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
font-size : 13px;
color: #319af6;
}

#content .post-info .category {
background:transparent url('images/box.png') 
left top no-repeat;
padding-left : 20px;
}
#content .post-info .clock { 
background:transparent url('images/clock.png');
background-repeat: no-repeat; 
padding-left : 20px;
}
#content .post-info .user {
background:transparent url('images/user_gray.png');
background-repeat: no-repeat; 
padding-left : 20px;
}

#content .post-info .comment {
background:transparent url('images/comment.png');
background-repeat: no-repeat; 
padding-left : 20px;
}

.post-info .category {
background:transparent url('images/box.png');
background-repeat: no-repeat;
padding-left : 20px;
}

/* Ende Post-info */

/* Begin Typographie & Farben */
body {
    font-size: 62.5%; /* Setzt 1em zu 10px zurück */
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    background-color: #d5d6d7;
    color: #ffffff;
    text-align: center;
    }

#page {
    background-color: white;
    border: 1px solid #959596;
    text-align: left;
    }

#header {
    background-color: #242424;
    }

#content {
    font-size: 1.2em
    }

.widecolumn .entry p {
    font-size: 1.05em;
    }

.narrowcolumn .entry, .widecolumn .entry {
    line-height: 1.4em;
    }

.widecolumn {
    line-height: 1.6em;
    }
    
.narrowcolumn .postmetadata {
    text-align: center;
    }

.alt {
    background-color: #333333;
    border-top: 1px dashed #e6e6e6;
    border-bottom: 1px dashed #e6e6e6;
    }

#footer {
    background-color: #242424;
    }

small {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 0.9em;
    line-height: 1.5em;
    }

h1, h2, h3 {
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-weight: bold;
    }

h1 {
    font-size: 4em;
    text-align: center;
    }

.description {
    font-size: 1.2em;
    text-align: center;
    }

h2 {
    font-size: 1.6em;
    }

h2.pagetitle {
    font-size: 1.6em;
    }

#sidebar h2 {
    font-family: 'Lucida Grande', Verdana, Sans-Serif;
    font-size: 1.2em;
    }

h3 {
    font-size: 1.3em;
    }

h1, h1 a, h1 a:hover, h1 a:visited, .description {
    text-decoration: none;
    color: #85da00;
    }

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
    color: #85da00;
    }

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
    text-decoration: none;
    color: #ffffff;
    }

.entry p a:visited {
    color: #000000;
    }

.commentlist li, #commentform input, #commentform textarea {
    font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    }
    
.commentlist li {
    font-weight: bold;
    }

.commentlist cite, .commentlist cite a {
    font-weight: bold;
    font-style: normal;
    font-size: 1.1em;
    }

.commentlist p {
    font-weight: normal;
    line-height: 1.5em;
    text-transform: none;
    }

#commentform p {
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    }

.commentmetadata {
    font-weight: normal;
    }

#sidebar {
    font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    }

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
    color: #ffffff;
    }
    
code {
    font: 1.1em 'Courier New', Courier, Fixed;
    }

acronym, abbr, span.caps
{
    font-size: 0.9em;
    letter-spacing: .07em;
    }

a, h2 a:hover, h3 a:hover {
    color: #85da00;
    text-decoration: none;
    }

a:hover {
    color: #85da00;
    text-decoration: underline;
    }
    
#wp-calendar #prev a {
    font-size: 9pt;
    }

#wp-calendar a {
    text-decoration: none;
    }

#wp-calendar caption {
    font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    text-align: center;
    }

#wp-calendar th {
    font-style: normal;
    text-transform: capitalize;
    }
/* Ende Typographie & Farben */



/* Beginn Struktur */
body {
    margin: 0;
    padding: 0; 
    }

#page {
    background-color: white;
    margin: 10px auto;
    padding: 0px 0px 0px 0px;
    width: 820px;
    border: 1px solid #959596;
    }
    
#header {
    padding: 0;
    margin: 0 auto;
    height: 138px;
    width: 100%;
    background-color: #73a0c5;
    }

#menu {
text-align: center;
margin : 0;
padding: 0;
}
    
#headerimg {
    margin: 0;
    height: 138px;
    width: 100%;
    }

.narrowcolumn {
    float: left;
    padding: 10px 0 20px 17px;
    margin: 0px 10px 0;
    width: 530px;
    }

.widecolumn {
    padding: 10px 0 20px 0;
    margin: 5px 0 0 185px;
    width: 450px;
    }
    
.post {
    margin: 0 0 40px;
    text-align: justify;
    }

.widecolumn .post {
    margin: 0;
    }

.narrowcolumn .postmetadata {
    padding-top: 5px;
    }

.widecolumn .postmetadata {
    margin: 30px 0;
    }
    
#footer {
    padding: 0 0 0 1px;
    margin: 0 auto;
    width: 820px;
    clear: both;
    }

#footer p {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    }
/* End Struktur */



/*    Beginn Überschriften */
h1 {
    font-size: 60%;
    color: #ffffff;
    padding-top: 40px;
    margin: 0;
    }

.description {
    text-align: center;
    }

h2 {
    margin: 30px 0 0;
    }

h2.pagetitle {
    margin-top: 30px;
    text-align: center;
}

#sidebar h2 {
    margin: 5px 0 0;
    padding: 0;
    }

h3 {
    padding: 0;
    margin: 30px 0 0;
    }

h3.comments {
    padding: 0;
    margin: 40px auto 20px ;
    }
/* Ende Überschriften */



/* Beginn Bilder */
p img {
    padding: 0;
    max-width: 100%;
    }

/*    Using 'class="alignright"' on an image will (who would've
    thought?!) align the image to the right. And using 'class="centered',
    will of course center the image. This is much better than using
    align="center", being much more futureproof (and valid) */
    
    
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    
img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

.alignright {
    float: right;
    }
    
.alignleft {
    float: left
    }
/* Ende Bilder */



/* Begin Listen */

html>body .entry ul {
    margin-left: 0px;
    padding: 0 0 0 30px;
    list-style: none;
    padding-left: 10px;
    text-indent: -10px;
    } 

html>body .entry li {
    margin: 7px 0 8px 10px;
    }

.entry ul li:before, #sidebar ul ul li:before{
    content: "\00BB \0020";
    }

.entry ol {
    padding: 0 0 0 35px;
    margin: 0;
    }

.entry ol li {
    margin: 0;
    padding: 0;
    }

.postmetadata ul, .postmetadata li {
    display: inline;
    list-style-type: none;
    list-style-image: none;
    }
    
#sidebar ul, #sidebar ul ol{
    margin: 0px;
    padding: 0px;
    }

#sidebar ul{
    list-style-type: none;
    list-style-image:none;
    margin-bottom: 15px;
    }
    
#sidebar ul li{
    list-style-type: none;
    margin-bottom: 15px;
    }

#sidebar ul p, #sidebar ul select {
    margin: 5px 0 8px;
    }

#sidebar ul ul, #sidebar ul ol {
    margin: 5px 0 0 10px;
    }

#sidebar ul ul ul, #sidebar ul ol{
    margin: 0 0 0 10px;
    }

ol li, #sidebar ul ol li {
    list-style: decimal outside;;
    }

#sidebar ul ul li, #sidebar ul ol li {
    margin: 3px 0 0;
    padding: 0;
    }
/* Ende Listen */



/* Beginn Form Elemente */
#searchform {
    margin: 10px auto;
    padding: 5px 3px; 
    }

#sidebar #searchform #s {
    width: 115px;
    padding: 2px;
    }

#sidebar #searchsubmit {
    padding: 1px;
    }

.entry form { /* Nur für Passwortgeschütze Artikel */
    text-align:center;
    }

select {
    width: 130px;
    }

#commentform input {
    width: 170px;
    padding: 2px;
    margin: 5px 5px 1px 0;
    }

#commentform textarea {
    width: 100%;
    padding: 2px;
    }

#commentform #submit {
    margin: 0;
    float: right;
    }
/* Ende Form Elemente */



/* Begin Kommentare*/
.alt {
    margin: 0;
    padding: 10px;
    }

.commentlist {
    padding: 0;
    text-align: justify;
    }

.commentlist li {
    margin: 15px 0 3px;
    padding: 5px 10px 3px;
    list-style: none;
    }

.commentlist p {
    margin: 10px 5px 10px 0;
    }

#commentform p {
    margin: 5px 0;
    }

.nocomments {
    text-align: center;
    margin: 0;
    padding: 0;
    }

.commentmetadata {
    margin: 0;
    display: block;
    }
/* Ende Kommentare*/



/* Beginn Sidebar */
#sidebar {
    padding: 20px 0px 0px 20px;
    text-align:left;
    float:right;
    width: 220px;
    }

#sidebar form {
    margin: 0;
    }
/* Ende Sidebar */



/* Beginn Kalendar */
#wp-calendar {
    empty-cells: show;
    margin: 10px auto 0;
    width: 155px;
    }

#wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
    }

#wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
    }

#wp-calendar a {
    display: block;
    }

#wp-calendar caption {
    text-align: center;
    width: 100%;
    }

#wp-calendar td {
    padding: 3px 0;
    text-align: center;
    }

#wp-calendar td.pad:hover { /* Doesn't work in IE */
    background-color: #fff; }
/* Ende Kalendar */



/* Beginn Verschiedener Tags & Klassen */
acronym, abbr, span.caps {
    cursor: help;
    }

acronym, abbr {
    border-bottom: 1px dashed #999;
    }

blockquote {
    margin: 15px 30px 0 10px;
    padding-left: 20px;
    border-left: 5px solid #ddd;
    }

blockquote cite {
    margin: 5px 0 0;
    display: block;
    }

.center {
    text-align: center;
    }

hr {
    display: none;
    }

a img {
    border: none;
    }

.navigation {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 60px;
    }
/* Ende Verschiedener Tags & Klassen*/

Hoffe ihr habt ne Lösung für das Problem, wollte das Design eigentlich ende der Woche fertiggestellt haben.

Vielen Dank im Vorraus

eisfritze · 16.11.2008

AW: Problem mit den Farben im IE & Menügestaltung

Hab ich Tomaten auf den Augen? Ich sehe keinen Unterschied.
Aber das Problem ist bekannt, dass manche Dinge anders dargestellt werden. Ich habe mich
damals an die Jungs von Firefox gewandt. Die gaben mir dann den richtigen Code. Schau mal
bitte hier nach:
Da wird dir geholfen.

stb_87 · 16.11.2008

AW: Problem mit den Farben im IE & Menügestaltung

Welche Version vom IE?!? Version 6?!?

Da gibt es auch schon kleine, aber feine Unterschiede.

Im IE 6 wird bei Grafiken automatisch 3px abstand eingefügt. Keine Ahnung jetzt, wie der "Fachausdruck" für den Fehler ist.

Alternativ könntest du aber statt der einzelnen Grafiken einzubinden, die Bilder mit unterschiedilchen Klassen oder IDs einbinden und dann mit dem Hover effekt versehen. Ist eine shcönere Lösung als die jetzige.

Edit:

Es gibt so genannte "Websichere Farben". Die werden garantiert überall gleich angezeigt. Bei anderen Farben kann es durchaus zu Abweichungen kommen.

sokie · 16.11.2008

AW: Problem mit den Farben im IE & Menügestaltung

vielleicht solltest du statt der gif buttons png buttons nehmen. das gifkann nur 255 farben darstellen.
(übrigens kommt man mit den Beispielen, die nun jpg sind nicht wirklich weiter. ein link zur Seite wäre einfacher.)

nicovod · 17.11.2008

AW: Problem mit den Farben im IE & Menügestaltung

Im IE 7 tauchte dieses Problem auf, ich habe das Theme nun mal aktiviert aber wie gesagt ist noch nicht so ganz fertig.

Hmm nur ich frag mich wie ich das mit CSS Lösen soll, mir fällt jetzt nur die methode ein :

a.menu:link {
background-image : url('bla');
}

a.menu:hover {
background-image : url ('blahover');
}

nur wie löse ich das dann im html bereich ?

<a href="blbabla" class="menu"></a> (und zwischen <a> und </a> kommt dann nichts? )

Nur fals der IE 7 die farbe jetzt nicht unterstützt kann ich also das komplette konzept umwerfen oder wie ? ist doch nicht normal alle anderen Programmen stellen die farbe richtig da.

/edit: mir ist gerade was aufgefallen, der stellt die farbe von den buttons und den infobalken richtig dar, der stellt aber die farbe der kompletten seite viel zu dunkel dar

Vergleicht mal im Firefox 3 und im Internet Explorer 7 (fals ihr besitzt)

Top_Gun · 17.11.2008

AW: Problem mit den Farben im IE & Menügestaltung

Im IE6 gibt es die Farbdifferenzen auch aber da dort die ganze Seite nicht richtig dargestellt wird, ist das wohl Nebensache...

nicovod · 17.11.2008

AW: Problem mit den Farben im IE & Menügestaltung

ehrlich gesagt es ist mir egal mittlerweile, ich hab grad per http://browsershots.org das ergebnis gesehen, also wie es im IE oder auf anderen Browsern aussieht und das ist nicht mehr ganz koscher, ich denke ich werde mich erstmal noch etwas weiter mit HTML und CSS beschäftigen und mich dann nochmal ranwagen

Wieso gibt es nicht einfach nur Firefox

sokie · 17.11.2008

AW: Problem mit den Farben im IE & Menügestaltung

nicovod schrieb:
<a href="blbabla" class="menu"></a> (und zwischen <a> und </a> kommt dann nichts? )

doch. Du notierst einfach wie einen gewöhnlichen Textlink:
<a href="">linktext</a>

in der css Formatierung nimmst du den Text aber aus dem sichtbaren Bereich heraus:

Code:

#meinMenu a{
    text-indent: -2000px;
}

der Hintergrund ist der, dass der Text, der für den Link steht so auch von suchmaschinen und textbrowsern identifiziert werden kann

Skate4Life · 30.11.2008

AW: Problem mit den Farben im IE & Menügestaltung

Hi, ich habe bei photoshop meine Farbenquelle gesucht. Beispiel ff0023
aber in html wird es als anders angezeigt =/