Linkunterstreichungen im IE

[Tronjer]

Ich weiß, zum Thema Linkunterstreichnugen im IE gibt es bereits Hilfe im Netz, aber die Tips mit text-decoreration:none und text-underline:none funktionieren im vorgegebenen Fall nicht. Leider habe ich auch noch wenig Erfahrung im Webdesign und dass ich von Beginn an mit Dreamweaver gearbeitet habe, macht die Sache sicherlich nicht einfacher, wenn es um knifflige HTML/CSS Probleme geht.

Um folgende Seite geht es (Screenshot IE). Der Hintergrund soll schwarz sein, darauf liegt die Grafik und zuoberst dann Text, Navigationselemente, etc. Die Hyperlinks sind rein prophylaktisch, haben bisher weder Ziel noch Hooverzustand - ich will erstmal die hässlichen schwarzen Unterstriche unter den Buttons wegbekommen.

So sieht die Seite im IE aus:


HTML für die Links:

<div id="menu">
<a href="#"><img src="images/home.jpg" alt="home" width="88" height="25" border="0" /></a>
<a href="#"><img src="images/angebot.jpg" alt="angebot" width="88" height="25" border="0" /></a>
<a href="#"><img src="images/anfahrt.jpg" alt="anfahrt" width="88" height="25" border="0" /></a>
<a href="#"><img src="images/kontakt.jpg" alt="kontakt" width="88" height="25" border="0" /></a>
<a href="#"><img src="images/Impressum.jpg" alt="impressum" width="88" height="25" border="0" /></a>
</div>

Und hier der entsprechende Auszug aus meiner style.css

Globale Einstellungen, damit die Seite oben im Browser beginnt und der Hintergrund schwarz ist:

* {
    margin:0;
    padding:0;
    background:#000;
    }

ID für die Menubar (das background-image hat keinen Einfluss auf die Unterstreichungen).

#menu {
    position:absolute;
    left:55px;
    top:143px;
    width:670px;
    height:25px;
    z-index:999;
    text-align: center;
    text-decoration: none;
    text-underline: none;
    background-image: url(images/a9.jpg);

 

[MrMurphy]

Hallo,

aus deinen Angaben ist leider nicht ersichtlich, woher die Unterstreichungen überhaupt stammen. Ein Link zu der Seite wäre deshalb angebracht. Optisch sehen die Unterstriche jedenfalls nicht so aus, als würden sie von einer normalen Link-Unterstreichung stammen.

Gruss

MrMurphy

 

[threadi]

Ich tippe mal auf ungünstige absolute Positionierung. Was Du siehst sind keine Unterstriche sondern der Hintergrund.

 

[Tronjer]

Ja, der Gedanke liegt natürlich nahe, dass die ap-divs nicht ordentlich platziert sind und der Hintergrund blitzt. Ich habe aber über dem schwarzen Hintergrund ein div mit background-image gelegt und in diesen div-container wiederum die Menubar (auch mit background-image) gestellt. Da kann eigentlich nichts durchschimmern und die schwarzen Balken werden zwar im IE, aber nicht im FF dargestellt.

Ich habe HTML und CSS bereinigt, die Seite hochgeladen und zur Verdeutlichung beim letzten Button (Impressum) den Link entfernt. Dieser wird im IE jetzt auch nicht mehr unterstrichen, die anderen vier Buttons zeigen aber nach wie vor den schwarzen Balken.

http://citydruck-berlin.de

Schaut euch doch bitte mal meinen Code an, ich weiß nicht, was ich noch machen soll. :(

 

[struppi]

Dieses Design bräuchte keinerlei absolute positionierung. Warum machst du es dir so schwer?

 

[Tronjer]

Für mich ist das der leichtere Weg.

Einmal habe ich gelernt, dass die horizontale Positionierung in der Browsermitte über: position:absolute, left: 50%, margin-left: -1/2 width, erreicht wird. Außerdem kann ich mittels ap-divs die einzelnen Elemente in der Entwurfsansicht von Dreamweaver beliebig verschieben.

 

[sysop]

ein text-decoration:none; beim Link könnte eventuell auch ein Tip sein
text-decoration: Textdekoration: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[Tronjer]

Ok, ich habe das Problem gelöst.

Um den schwarzen Balken unter den Buttons verschwinden zu lassen, musste ich für für die Links statt 'text-decoration:none' das selbe Hintergrundbild wie für den übrigen Text definieren. Also:

a:link {
    background-image: url(images/a9.jpg);
}

In diesem Zusammenhang noch eine Frage:

Wenn man, wie im vorliegenden Fall, den Hintergrund des Browserfensters schwarz halten, darauf eine Grafik legen und zuoberst Text und Navigationselemente platzieren will, gibt es da eine bessere Möglichkeit als die Farbe Schwarz über CSS global zu definieren?

* {
    margin:0;
    padding:0;
    background:#000;
  }

Theoretisch könnte ich statt dessen einen div-container mit einem festen Wert für width verwenden, aber ich weiß ja nicht, wie groß das Browserfenster des Betrachters ist.

 

[struppi]

Einmal habe ich gelernt, dass die horizontale Positionierung in der Browsermitte über: position:absolute, left: 50%, margin-left: -1/2 width, erreicht wird.

Das hast du falsch gelernt. Eine Zentrierung erreichst du mit margin: auto;

Außerdem kann ich mittels ap-divs die einzelnen Elemente in der Entwurfsansicht von Dreamweaver beliebig verschieben.

Warum? Sie sollen sich doch im Browserfenster einpassen, das bedeutet, dass ein absolute Positionierung aller Elemente kontraproduktiv ist.

Wie gesagt, es wäre wesentlich leichter diesen Entwurf ohne Positionierung umzusetzen.

EDIT:

Theoretisch könnte ich statt dessen einen div-container mit einem festen Wert für width verwenden, aber ich weiß ja nicht, wie groß das Browserfenster des Betrachters ist.

Eben.