IE ignoriert Schriftgröße und Anordnung

Hi,

Jetzt habe ich heute endlich meinen Footer angepasst und bin nach diversen Tests mit Firefox und Safari ganz zufrieden.... Nun gibt es mit dem IE ein Darstellungsproblem :???:

Ich habe in meinem Footer das Suchfeld und drei Links fest eingebaut:

<div class="navigation">
        <form role="search" method="get" id="searchform" action="http://www.pixelschubla.de/" >
        <div><label class="screen-reader-text" style='font-size: 12pt'; for="s">Suche:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="los" />
       </form>
            
        <class="page_item" style='float:right; font-size: 10pt; margin-top: 5px;'><a href="http://www.pixelschubla.de/links">// interessante links </a><a href="http://www.pixelschubla.de/ueber">// &uuml;ber mich </a>   <a href="http://www.pixelschubla.de/impressum">  // impressum</a>


    </div>
</div>

Im IE ist die Schrift der Links viel zu groß und sie liegen zudem unter dem Suchfeld anstatt in derselben Zeile am rechten Rand.

Bestimmt habe ich da Mist gebaut, aber welchen bzw. wo?

Grüße
Reiner

achjeh.... Danke!
Also das 'pt' war schlicht ein Irrtum.... Ich glaub', ich habe mir den Code irgendwo mit copy&paste aus einem Tutorial geholt (weil zu faul zum tippen). Klar, px ist richig und jetzt stimmt schonmal die Größe.

Eine <p ...></p> Hülle habe ich um die Zeile mit dem class nun auch drumherum gebastelt. Nur macht der IE leider immer noch einen Zeilenumbruch nach dem Suchfeld :-?

<div class="navigation">
        <form role="search" method="get" id="searchform" action="http://www.pixelschubla.de/" >
        <div><label class="screen-reader-text" style='font-size: 12pt'; for="s">Suche:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="los" />
       </form>
            
      <p class="page_item" style='float:right; font-size: 12px; margin-top: 5px;'><a href="http://www.pixelschubla.de/links">// interessante links </a><a href="http://www.pixelschubla.de/ueber">// &uuml;ber mich </a>   <a href="http://www.pixelschubla.de/impressum">  // impressum</a></p>


    </div>
</div>

Zitat von koslowski

Ein Link zum Problem wäre nicht schlecht.

Der Link in meiner Signatur führt zum Ziel ;)

Jetzt sehe ich gerade noch einen Knüller :neutral:
Der Seitentitel (fotografien II) scheint einen Hintergrund zu haben, der über die gesamte Seitenbreite läuft und einen Teil meines Hintergrundbildes verdeckt.
Ich hatte mich schon gewundert, wie IE in der Lage ist, aus einem Bild nur einen Teil zu entfernen.

Dieser css-Abschnitt definiert den Seitentitel:

.blog-name {font-size:5em; font-weight:bold; line-height:1em;}
.blog-name a:link, .blog-name a:visited {color:#d1d9dc; text-decoration:none;}
.blog-name a:hover {color:#009fcc;}

Wie kann ich dem beibringen, dass er nur den Text hinterlegen soll und nicht die ganze Breite?

Wenn Du auf http://www.pixelschubla.de gehst, müsstest Du oben den Seitentitel "fotografien II" sehen können. Dessen Hintergrund scheint über die komplette Breite der Seite zu laufen, wodurch der Falter im Hintergrundbanner bei alten IE Versionen verdeckt wird.
Allerdings tritt dieser Fehler nicht mehr im IE8 auf, nur in den Vorgängerversionen. Daher ist mir das erstmal egal.

Zum Footer-Dilemma...

Ich hänge mal zwei Screnshots an. Einer o.K. und einer IE ;)
Bei der IE-Version werden die Links am rechten Bildrand eine Zeile nach unten geschoben.

Grüße

Schlecht geschlafen?
Sorry, aber ich verstehe nicht, was dieser Beitrag von Dir soll!

Erst fragst Du nach einem Link, dann bringe ich den Link und nun heisst es, ich Ziele auf Backlinks ab....
Nein, ich möchte meine Seite endlich fertig bekommen und ich möchte, dass sie auf möglichst allen Browsern identisch aussieht.

Ich habe zwei Screenshots angehängt auf welchen, doch hoffentlich für jeden erkennbar, ein Suchfeld und drei Textlinks (//links //über mich // impressum) zu sehen sein sollten.
Wenn man ganz simpel die beiden Bilder vergleicht, kommt man zu dem Schluss, dass sie *nicht* identisch sind. Eigentlich ganz einfach.

(Wenn sich simple png-Bildchen bei Dir nicht anzeigen lassen, dann verstehe ich das nicht. Bei mir werden sie in jedem meiner Browser, sowohl unter os x, als auch Windows, angezeigt.)

Die IE-Version ist die Unerwünschte. Auch ganz einfach.
Nun habe ich schon unzählige Versuche gestartet, dieses Problem zu korrigieren, aber alle erfolglos (Weil ich eben, wie unschwer zu erkennen ist, in html und css nicht gerade ein Held bin. Ich bekomme so einniges hin, aber manchmal stolpere ich eben an scheinbar simplen Stellen)
Daher war Deine erste Hilfe, versetzt mit irgendwelchen Verbalien welche man als Kundiger vielleicht verstehen mag, für mich eben *keine* Hilfe.

Aber anscheinend hast Du eine eigene Sicht auf diese Welt.

:shock:

Ach Du Sch...... Wobei ja eigentlich klar werden müsste, dass der Titel und der Linkname nicht so ganz zusammen passen.
Ich weiss schon, wie das passiert ist. Das verlinkte Forum war fast sechs Jahre mein Forum (Und hat Backlinks wahrlich nicht nötig ;) ). Dort gibt es eine Art "FAQ", welche ich seinerzeit mit WP aufgebaut hatte. Da dieses Forum nicht mehr mir gehört, habe ich die hiesige Sig auf meine Seite geändert, aber in eurem Editor nur den Display-Namen angepasst und nicht den dahinterliegenden Link (Was müsst ihr für die Sig auch so einen opulenten Editor nehmen ;) ).

Also Link angepasst.

koslowski
Ich denke, damit hat sich das Missverständnis geklärt (Wobei mir immer noch nicht klar ist, wieso die verlinkten Bilder nicht angezeigt werden).

Sorry, aber ich bekomme es nicht hin, weder die Anordnung im Footer, noch diese Geschichte im Header (Eure Diskussion hat mich leider auch nicht erhellt).
Habe gestern etliche Varianten probiert... Breiten des übergeordneten div festgelegt, auf 100% gesetzt und diverse Varianten mit (und ohne) float ausprobiert. Nix wollte klappen....

So sieht derzeit mein code in der footer.php aus (Die "div" am Label hatte ich auch schon testweise entfernt):

<div class="navigation_footer" style='width:100%;' >
        <form role="search" method="get" id="searchform" action="http://www.pixelschubla.de/" >
        <div><label class="screen-reader-text" style='font-size: 12pt'; for="s">Suche:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="los" />
       </form>
            
      <p class="page_item" style='float:right; font-size: 12px; margin-top: 10px;'><a href="http://www.pixelschubla.de/links">// interessante links </a><a href="http://www.pixelschubla.de/ueber">// &uuml;ber mich </a>   <a href="http://www.pixelschubla.de/impressum">  // impressum</a></p>


    </div>
</div>

Die css-Definition für navigation_footer ist diese hier:

.navigation_footer {padding:0.333em 0; margin-top:20px; font-size:1.5em; border-top:1px solid #d1d9dc;}

Beim header sieht es nicht viel besser aus....

Wie kann ich dem Header und der description beibringen, dass sie nur die Breite nutzen sollen, welche die Schrift belegt?

.description {margin-top:0.5em; font-size:1.5em; color:#6a797d;}


#header {padding:2em 0; background-image:url(images/head_bg.png);}

Wäre echt klasse, wenn mir mal jemand den codeschnipsel hinbiegen könnte :)

O.k. jetzt hat es funktioniert, aber erst im zweiten Anlauf.....
Ich habe fixe Größen zugewiesen, aber die Links kamen im IE trotzdem in die nächste Zeile. Dann habe ich mal um alles verschiedenfarbige Border zeichnen lassen, damit ich die Bereiche sehe.
Letztlich ging es dann erst, als ich die drei Textlinks mit in die 'form' gezogen habe.
Ganz sauber ist das vermutlich auch nicht, aber es scheint akzeptiert zu werden (Zumindest von den Browsern, welche mir zur Verfügung stehen (FF, IE8 und Safari).

So nebenbei ist mir die nächste (hoffentlich kleine) Baustelle aufgefallen, aber dazu mache ich einen neuen Thread auf....