Anzeige

[CSS] IE macht Zicken mit WP Theme

[CSS] IE macht Zicken mit WP Theme | PSD-Tutorials.de

Erstellt von JoNk, 19.08.2008.

  1. JoNk

    JoNk JoNkiPoNki

    Dabei seit:
    07.04.2007
    Beiträge:
    126
    Geschlecht:
    männlich
    Software:
    Ganzes CS3, Steinberg Cubase
    Kameratyp:
    Digicam
    [CSS] IE macht Zicken mit WP Theme
    Guten Abend

    Ich hab für Wordpress, basierend auf Kubrick, ein Theme gebaut. Im Firefox wird alles korrekt angezeigt, dh. der Content Links und das Menu rechts.

    Nun wollte ich dat ganze auch im IE anschauen, doch siehe da, das Menu pflanzt der einfach unter de Content.

    Kann mier jemand sagen, an was das liegt und wie ich den fehler am schnellsten beheben kann.

    Es liegt nicht an der Bildschirmauflösung, der IE pflanzt das Menu sowohl bei mir (1270x1024) als auch bei geringerer Auflösung immer gleich unter den Content.

    Hier ist das ganze: xChange Diaries

    Gruss

    JoNk
     
    #1      
  2. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    [CSS] IE macht Zicken mit WP Theme
    AW: [CSS] IE macht Zicken mit WP Theme

    Mach content etwas schmaler bzw. setze padding vom menue herab
     
    #2      
  3. rapzitis

    rapzitis Guest

    [CSS] IE macht Zicken mit WP Theme
    AW: [CSS] IE macht Zicken mit WP Theme

    template is komisch ... was nützen einem prozentwerte für den content-bereich und sidebar wenn der wrapper eine feste breite hat?

    Naja ... es liegt daran das der IE mit dem padding-wert anders umgeht als andere Browser. Er addiert den wert dazu, sodass die 100% überschritten werden ... die Navigation wird so nach unten gedrückt vom content bereich, weil sie daneben kein platz mehr hat.

    Also du könntest zum einen eine pixelgenaue breite des Content-Bereiches und der Sidebar festlegen. - Es sei denn es gibt hier jemand eine begründung ab warum das sinnvoll sein könnte.

    probier mal statt padding, einfach margin aus. A

    geb beiden klassen einfach nur margin/padding-left und lass 1-2% oder 5px freiraum nach rechts.

    Eine Browser-Weiche wäre zum notfall auch noch da ... aber in diesem fall nicht nötig.
    Sag bescheid wenn noch unklarheiten herrschen - bin jetzt davon ausgegangen, das du dich mit Html/CSS ein wenig auskennst.

    @herr_d
    das wär natürlich auch eine möglichkeit ... aber man will ja schon das es überall gleich aussieht.
     
    #3      
  4. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    [CSS] IE macht Zicken mit WP Theme
    AW: [CSS] IE macht Zicken mit WP Theme

    hä? n angepasstes kubrik sieht doch eh immer gleich aus...
     
    #4      
  5. JoNk

    JoNk JoNkiPoNki

    Dabei seit:
    07.04.2007
    Beiträge:
    126
    Geschlecht:
    männlich
    Software:
    Ganzes CS3, Steinberg Cubase
    Kameratyp:
    Digicam
    [CSS] IE macht Zicken mit WP Theme
    AW: [CSS] IE macht Zicken mit WP Theme

    Ich kenn mich eig auch aus...xD

    Das mit den 100% ist eine bequemlichkeitslöung für mich...da ich lange herumprobiert habe, welche breite am optimalsten ist und wollt nicht immer beide umschreiben, da mich das dauernde breitenaddieren, und subtrahieren auf dauer nervt...mach ich in dem Fall noch...wäre wahrscheinlich mit 2.235m überlegen auch drauf gekommen!!

    THX an euch beide...

    JoNk

    -closed-
     
    #5      
  6. rooney85

    rooney85 Nicht mehr ganz neu hier

    Dabei seit:
    10.11.2006
    Beiträge:
    79
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    Photoshop, Illustrator, Lightroom
    Kameratyp:
    Kodak Z710, Canon EOS 1000D
    [CSS] IE macht Zicken mit WP Theme
    AW: [CSS] IE macht Zicken mit WP Theme

    ich hatte damals ein ähnliches Problem. Vermutlich liegt es an der padding-Definition. Der IE stellt den bereich größer da und der festgelegte Bereich zu kein ist, macht er einen "Zeilenumbruch". Mit anderen Wortden er rückt es einfach runter.

    Schreib dir eine IE-fix.css in der du einfach das padding verkleinerst. Fertig.
     
    #6      
  7. rapzitis

    rapzitis Guest

    [CSS] IE macht Zicken mit WP Theme
    AW: [CSS] IE macht Zicken mit WP Theme

    kubrik = Template?

    Hmm ... ich meine es so: würde jonk nur die breite der einzelnen Container verringern, hätte er immer noch das problem. Auf dem Internet Explorer würds perfekt passen und im FF entsteht dann ein größerer Weißraum.
     
    #7      
  8. JoNk

    JoNk JoNkiPoNki

    Dabei seit:
    07.04.2007
    Beiträge:
    126
    Geschlecht:
    männlich
    Software:
    Ganzes CS3, Steinberg Cubase
    Kameratyp:
    Digicam
    [CSS] IE macht Zicken mit WP Theme
    AW: [CSS] IE macht Zicken mit WP Theme

    Hab gedacht das ich die lösung hab und die breite des contents verkleinert...hat überhaupt nichts genützt...IE stellts immer noch genau gleich dar...und Padding ist nach meinen Kentnissen (hab auch auf ccs4you.de nachgeschaut) eine "Innenpolsterung" und grenst den bereich zwischen Box und Inhalt ab...wenn ich margin nehmen würde würde es ja das ganze verziehen...

    Gruss

    JoNk
     
    #8      
  9. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    [CSS] IE macht Zicken mit WP Theme
    AW: [CSS] IE macht Zicken mit WP Theme

    Da steht es doch... IE anders
    da kannst du bei css4you oder sonst wo schauen, den IE bekommst du damit nicht umgestimmt ;)

    Nimm ne Browserweiche und für den IE ne andere .css klappt dann wunderbar...
     
    #9      
  10. JoNk

    JoNk JoNkiPoNki

    Dabei seit:
    07.04.2007
    Beiträge:
    126
    Geschlecht:
    männlich
    Software:
    Ganzes CS3, Steinberg Cubase
    Kameratyp:
    Digicam
    [CSS] IE macht Zicken mit WP Theme
    AW: [CSS] IE macht Zicken mit WP Theme

    ...da tun sich bei mir doch einige lücken im CSS auf^^
    Kann mir jemand erklären wie ich ein solcher IE fix baue und dat ganze im Wordpress integriere und mir vielleicht gerade dieser problemfall schreiben...ich hab da irgendwie ein blackout und hab keinen schimmer, was ihr mit der andersartigen Interpretation von Padding im IE meint...

    Sorry für meine stutzigkeit...

    JoNk
     
    #10      
  11. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    [CSS] IE macht Zicken mit WP Theme
    AW: [CSS] IE macht Zicken mit WP Theme

    Browserweiche:

    Es ist möglich für einen oder mehrere bestimmte Browser eine Weiche einzubauen. Hier am Beispiel von einer zweiten .css für den IE 6:
    HTML:
    1. <link rel="stylesheet" href="css/style.css" type="text/css">
    2. <!--[if IE 6]>
    3. <link rel="stylesheet" href="css/style_ie.css" type="text/css">
    4. <![endif]-->
    Alle anderen Browser "überlesen" das einbinden der zweiten .css-Datei, der IE 6 jedoch nicht. Durch diese zweite .css ist es dir möglich die Eigenschaften beliebig zu ändern, da sie die ersten .css-Definitionen überschreibt.
    Du gibst also in der style_ie.css also einfach andere Paddingwerte an, so dass es passt, und lediglich der IE 6 reagiert darauf...

    Padding im IE:

    Ich hab mich gedanklich gerade verlaufen und muss erst nochmal Testen bevor ich hierzu was falsches schreibe...

    EDIT: *hust* Ich habe zum Testen deine Seite genommen, dabei ist mir gerade aufgefallen, dass du deinem page-div eine feste Breite von 850px vergeben hast.
    Deinem content-div eine variable Breite von 70%, da das übergeordnete div sich in der Breite nicht ändert, ist das eine Breite von 595px. Das content-div bekommt zusätzlich noch margin 20px.
    Das menu-div hat eine variable Breite von 25%, da das übergeordnete div sich in der Breite nicht ändert, ist das eine Breite von 212,5px. Zusätzlich noch margin 10px.

    Wenn du jetzt mal rechnest: 20 + 595 + 20 + 10 + 212,5 + 10 = 867,5

    Da 867,5px größer ist als 850px die du definiert hast, macht der IE Zicken, nicht wegen einem falsch definiertem Abstand... In einem solchen Fall rücken FF und Co das ganze so zurecht, dass es trotzdem passt, der IE leider nicht...

    Änder den Marginwert vom content-div auf 10px und du hast keine Probleme mehr...
     
    Zuletzt bearbeitet: 26.08.2008
    #11      
  12. JoNk

    JoNk JoNkiPoNki

    Dabei seit:
    07.04.2007
    Beiträge:
    126
    Geschlecht:
    männlich
    Software:
    Ganzes CS3, Steinberg Cubase
    Kameratyp:
    Digicam
    [CSS] IE macht Zicken mit WP Theme
    AW: [CSS] IE macht Zicken mit WP Theme

    Juhui...jemand der Kopfrechnen kann...vielen dank hat wunderbar geklappt!!

    Jetzt hab ich baer gerade noch gsehen, dass der IE noch was falsch darstellt...rechts im Menu werden die Artikel Zentriert, statt Linksbündig angezeigt...der FF machts richtig...oder hab ich da schlampig programmiert(ich nenns jetzt halt der bequemlichkeitshalber programmieren...)?

    Gruss
     
    #12      
  13. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    [CSS] IE macht Zicken mit WP Theme
    AW: [CSS] IE macht Zicken mit WP Theme

    Weder noch... scheinbar nimmt der IE die Linksausrichtung für die Liste, wenn denn da tatsächlich eine ist und ich mir das in meinem müden Kopf nicht nur einbilde...

    Versuch mal den Text im menu links auszurichten und nicht wie bisher zentriert:
    HTML:
    1. div.menu{width: 25%; margin: 10px; text-align:center; white-space:nowrap;}
     
    #13      
x
×
×
teststefan