Zum Inhalt springen

barrierefreie Headergrafik mit image replace und IE7

Erstellt am 18. März 2011 · 2 Antworten · letzte Antwort am 18. März 2011

Tags: Links, HTML & CSS, Frage

Juergen_190 ·

Hallo,

Ich versuche ein Headerbild in einen H1 Tag einzubinden, und möchte das ganze per Typolink auf die Stratseite verlinken lassen.
Das funktioniert auch, aber beim IE7 und dem kompatibilitätsmodus ändert sich der
Mauszeiger beim Überfahren der Grfaik nicht.
Beim IE8 und im FF geht es.

Kann mir da jemand helfen?

Hier meine Typoscript:

tempheader = COA
tempheader {
stdWrap.typolink.parameter = 2
  10 = IMAGE
  10.altText = meintext
  10.TitleText = meintext
  10.wrap = <h1 class="imageheader" style="background-image: url(fileadmin/templates/images/headerbild.jpg)">
  10.file = GIFBUILDER
  10.file {

     XY = 980, 130
     transparentColor = #ffffff
     backColor = #cccccc
  }

  20 = TEXT
  #20.current = 1
  20.wrap = Seite mit Image Ressource|</h1>
}

lib.header < tempheader

hier das css:

#header h1.imageheader {

   overflow: hidden;
   height: 130px;
   width: 980px;
   background-repeat:no-repeat;
   text-indent: -999em;
   white-space: nowrap;

}

und hier noch der doctype:

#DOCTYPE auf XHTML 1.0 Strict setzen, für den IE wird die XML-Angabe umgedreht
config.locale_all = de_DE
config.doctype = xhtml_trans
config.htmlTag_langKey = de-DE
config.xhtml_cleaning = all

[browser = msie]
config.xmlprologue = none
[global]

Für Tipps bedanke ich mich.

igorshmigor ·

Ich würde den Link innerhalb des h1-Tags setzen, nicht umgekehrt.
Also

<h1 class="imageheader"><a href="meinlink.html">Seite mit Image Ressource</a></h1>

statt

<a href="meinlink.html"><h1 class="imageheader">Seite mit Image Ressource</h1></a>

Dann würde ich die ganzen CSS-Eigenschaften, die Du #header h1.imageheader zugewiesen hast stattdessen dem Link zuweisen. Also einfach #header h1.imageheader a draus machen.