Wo kommen die Rahmen her (im IE)

[Jokerhh82]

Moin zusammen,

Bei meinem letzten Projekt bin ich auf ein Problem gestoßen wofür ich bis jetzt keine Lösung gefunden habe, falls das schon behandelt wurde habe ich es vermutlich nicht gefunden weil ich die falschen Suchbegriffe verwendet habe und nicht etwa weil ich die Suchfunktion nicht verwendet habe!

Sollte es also schon behandeltw orden sein bitte ich hiermit direkt um Entschuldigung und wäre sehr dankbar wenn man einfach die Lösung als Antwort verlinken könnte.

Problembeschreibung für Projekt: Hundeschule Hanke (Die Seite ist Live und erreichbar)

Unter "Galerie" ist (oh wunder) eine Bildergalerie zu finden die trotz der exorbitant hohen Fehlerzahl der Fancybox.css absolut funktionell ist sowohl in IE, Firefox und Chrome aber leider im Internet Explorer (IE 9) Darstellungsprobleme hat.

Die Div Class "thumb" die ich für die Thumbnails verwende hat _keinen_ Border, Firefox und Chrome zeigen dementsprechend auch keinen an.

Betrachtet man die Galerie Unterseite jedoch in IE9 haben die Thumbs ein Border.

Wo kommt der her?

Wie kann ich ihn entfernen?

Die Thumbs sollen durchaus ein Border bekommen, dünner als die fehlerhaften im IE und vor allem dann bitte auch nur einen pro Bild...

Denn gebe ich der Divclass ein Border wie ursprünglich geplant hab ich eine fehlerfreie Darstellung in Firefox und Chrome aber nun 2 Rahmen pro Bild im IE...

Hier noch auszüge aus der CSS, Quelltext ist wie gesagt Live und jederzeit einsehbar deswegen spar ich mir das HTML hier.:

}
.thumb {
    margin: 24px;
    height: 100px;
    width: 100px;
    float: left;
}

Übergeordnetes Div ist #Textbox welches ein clear auf left hat.


Für Antworten und Lösungsvorschläge wäre ich sehr dankbar.

Liebe Grüße,

Joker

 

[Marv]

Hi,

hast du schonmal versucht den images border:0; zu geben? Ich konnte das nicht ganz nachvollziehen, denke mir aber, das der IE images, die in Links sind einen Rahmen gibt.

also würde ich diesen einfach den rahmen per CSS versuchen wegzunehmen:

.thumb img    {
    border:0;
}

 

[Jokerhh82]

Im groben scheint genau das der Fall zu sein, das doofe ist nur das ich ja eigentlich einen Rahmen haben möchte, nur eben in allen Browsern gleich dargestellt.

Ist aber ein super Ansatzpunkt um weiter zu suchen, vielen Dank!


Edit: 15:15 Uhr

Ich hab einfach den Wald vor lauter Bäumen nicht gesehen, Marv Du hast es direkt erfasst, ich denke ich habe es jetzt Global gelöst:

<style type="text/css">

IMG{
 border: none;
 }
 </style>

So kann ich einen Border vergeben wie ich mag und auch nur der wird angezeigt.

Vielen Dank nochmal (hab auch den Danke Button gesehen. :)

 

[Marv]

Im groben scheint genau das der Fall zu sein, ...

Also hat sich das bestätigt, das es am rahmen der Bilder lag?

Dann ist das doch kein Problem mehr, wenn du meinen Code (den Rahmen der Bilder auf 0 seetzten) als Bugfix siehst. Und dann einfach der klasse thumb noch deinen gewünschten rahmen gibst.

.thumb img    {     border:0; }


.thumb {
    margin: 24px;
    height: 100px;
    width: 100px;
    float: left;
    border:2px solid #eee;
}

 

[Jokerhh82]

Jup aber ich wollte nun auch gleich sämtliche "Bilder-Link-Rahmen" weghaben (das Facebooklogo war ebenfalls umrandet, klar ist ja ebenfalls ein IMGLink), darum isses im "Style" gelandet, die divclass hat nun ihren richtigen Border und auf den ersten Blick funktioniert es sehr gut. :)

 

[Marv]

Wenn du sämtliche Bild-Link-Rahmen entfernen möchtest, kannst du auch per CSS grundsätzlich die Rahmen von Bildern, die in einem Link stecken, wegnehmen.

a img {
    border:0;
}

 

[lascaux]

Dieser Rand wird automatisch vom Browser hinzugefügt. Wie Marv schon gesagt hat, kannst du es einfach mittels border: 0; abstellen.

Da es aber lästig sein kann, die Standart-Einstellungen von jedem Browser zu berücksichtigen (wobei ein Rand bei Link-Bildern von allen Browsern angezeigt wird), gibt es eine sehr Interessante und auch einfache Lösung.

Die Lösung nennt sich CSS-Reset. Eine CSS-Datei wo alle möglichen Einstellungen vom Browser nichtig gemacht werden.

Hier ist meine Standart-Datei

:focus {
  outline: none;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

html {
  overflow-y: scroll;
}

img {
  border: 0;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

Wichtig dabei ist, dass diese Datei als erste eingebunden wird, da dein Browser von oben nach unten liest. Alle CSS-Einstellungen die also vor dieser Datei stehen, werden mit den Werten die enthalten sind überschrieben. Den Inhalt der Datei kannst du beliebig anpassen.

<link href="css_reset.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
usw.