• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Viele hassen ihn, manche schwören auf ihn, wir aber möchten unbedingt sehen, welche Bilder Ihr vor Eurem geistigen Auge bzw. vor der Linse Eures iPhone oder iPad sehen könnt, wenn Ihr dieses Wort hört oder lest. Macht mit und beteiligt Euch an unserem Frühjahrsputz ---> Klick

IE 6 Problem

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Hi,
warum macht IE6 bei einem leeren <h1></h1> Tag mit einem Hintergundbild und folgenden CSS Attributen einen ungf. 20px Abstand zum Element darunter:

CSS Atribute:
Code:
* {
    /* Margin und Padding = 0 */
}

h1 {
    height: 11px;
    margin-bottom: 5px;
    background: url(beliebigesbild.png) no-repeat;
}
 
Zuletzt bearbeitet:

Kenso

Pomme au Mors
Registriert
05.12.07
Beiträge
869
Leider kann ich dein Problem nicht nachvollziehen. Kannst du mal den kompletten Quellcode und einen Screenshot schicken?
Ich hab es mal nachgebastelt, aber bei mir funktioniert alles einwandfrei!(Die 5px am unteren Außenabstand sind ja von dir gewollt, denn sie tauchen in deinem CSS auf)

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Test</title>
  <style type="text/css">
   * {
    margin:0;
    padding:0;
   }
 
   h1 {
    height: 11px;
    margin-bottom: 5px;
    background: url("bild.png") no-repeat;
   }
  </style>
 </head>
 <body>
  <h1 style="border:1px solid red">Hallo Welt</h1>
  <p style="border:1px solid black">Ich mag uns so sehr</p>
 
 </body>
</html>

5nep-5.jpg
 

Kenso

Pomme au Mors
Registriert
05.12.07
Beiträge
869
Wow, ein gutes Design und ein sehr vorbildlicher Quellcode! Respekt, sowas gibts selten :) (auch wenn ich Pixel als Einheit immernoch webuntauglich finde^^)

  1. Ein h1-Element darf nicht leer sein, da es sonst undefiniert ist und Browser damit alles und nichts machen können! Lösung: <h1> </h1>
  2. Auch wenn es zu vernachlässigende Fehler in deinem Quellcode sind: Die Browser in den Quirks-Modus zu versetzen ist nicht klug, da sich darauf schon auch mal seltsame Fehler ergeben können! Lösung: Die vier kleinen Validierungsfehlerchen ausmerzen, die mir der Validator des W3Cs anzeigt!
Sollte es danach immernoch Fehler geben... hui, dann wird es kompliziert, denn dein Quellcode ist (bis auf die 4 Fehlerchen im xHTML) valide.
 

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Hi,
thanks. Ja ich hatte noch keine Zeit zu validieren. Da es bisher nur ein Splash sein soll. Es ist noch ein kleines Shopsystem eingebaut. Mal schaun was noch draus wird. Ich versuche mal deine Ansätze zu verwirklichen und schaue ob das Porblem dann gelöst ist. Ich melde mich wieder.

Thanks,
Max
 

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
Wenn du in deinem CSS noch einfügst:
Code:
h1
{
[...]
text-indent: -999em;
}
kannst du auch die angedachte Überschrift in den h1-Tag schreiben, ohne dass er über dem Hintergrundbild sichtbar ist - mach sich ggf. gut für die Suchmaschinen.
 

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Oh das ist ja ein guter Tipp. Was bewirkt das denn genau?
 

ma.buso

Châtaigne du Léman
Registriert
16.04.05
Beiträge
820
Es rückt den Text ein, bzw. in diesem Fall "aus" (also nach links) wegen des negativen Vorzeichens.
 

Kenso

Pomme au Mors
Registriert
05.12.07
Beiträge
869
Wenn du in deinem CSS noch einfügst:
Code:
h1
{
[...]
text-indent: -999em;
}
kannst du auch die angedachte Überschrift in den h1-Tag schreiben, ohne dass er über dem Hintergrundbild sichtbar ist - mach sich ggf. gut für die Suchmaschinen.

tztztz, unlautere Methoden zur Suchmaschinenoptimierung! Aber gut, wers braucht.... lies mal die Richtlinien von Google für Webmaster, ich wäre mit solchen Tricks eher vorsichtig (zumal sie nicht Sinn des Internets sind und einfach sch.... )
 

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Hi,
ich habe das text-indet jetzt doch nicht verwendet. SEO brauche ich für diese Seite so oder so nicht. Das mit den leeren <h1></h1> Tags war anscheinend auch nicht das problem. Ich habe jetzt mein CSS reset eingebaut und siehe da es geht.
 

Slashwalker

Winterbanana
Registriert
15.05.06
Beiträge
2.213
tztztz, unlautere Methoden zur Suchmaschinenoptimierung! Aber gut, wers braucht.... lies mal die Richtlinien von Google für Webmaster, ich wäre mit solchen Tricks eher vorsichtig (zumal sie nicht Sinn des Internets sind und einfach sch.... )

Das hat zwar für Suchmaschinen auch seine Vorteile, aber der Grundgedanke bei ImageReplacement ist ja wohl immer noch Accessibility! So kann man schöne grafische Headlines verwenden, ohne Textbrowser und Screenreader zu benachteiligen.
 

Kenso

Pomme au Mors
Registriert
05.12.07
Beiträge
869
Zunächst einmal kannst du auch einfach ein Bild statt ein Hintergrundbild nutzen und das mit einem Alt-Attribut versehen - hat den selben effekt, ist aber auch laut Google Richtlinien vollkommen "legal".

Es kommt halt darauf an, wie man mit deiner Methode umgeht - Google könnte es als Versuch werten, den Suchmaschinen andere Inhalte zu bieten als den Besuchern der Seite... Wenn Google es also erkennt (was ich mir für Webcrawler gar nicht so schwierig vorstelle), könnte das schlechte Auswirkungen auf deine Bewertung bei Google haben.
 

wapplegraph

Normande
Registriert
12.04.06
Beiträge
571
Hallo

Ich erstelle gerade eine Webseite und nun habe ich vom Kollegen ein Bild der Webseite im Internet Explorer erhalten und es hat mich fast umgehauen.

Könnte mir jemand helfen, wie ich die Webseite auch für die Armen, die mit dem Explorer surfen anschaulich hinkriege?
Unter Safari ist die Navigationsleiste auch nicht ganz perfekt, aber dieses Problem finde ich hoffentlich schon noch heraus.

Hier wäre der Link zum Stylesheet.

Ich kann leider nicht auf den Internet Explorer zugreifen und bin daher ein bisschen eingeschränkt mit dem Ausprobieren.

Ich wäre sehr froh für Hilfe!

wapplegraph
 

mschoening

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
Poste doch mal den Screenshot von deinem Kollegen...
 

wapplegraph

Normande
Registriert
12.04.06
Beiträge
571
Hier ist der Screenshot, nicht mehr vom Kolleg aber trotzdem.
Es hängt irgendwie mit der Breite und dem float zusammen.
 

joey23

Hochzeitsapfel
Registriert
26.11.06
Beiträge
9.247
Liegt am schlechten Layout ;)

My Profil. Autsch...

Mein Tip? Lass die Seite professionell bauen. Soll, wenn ich die Buttons richtig verstehe, ja eine Firmenwebsite sein. Da sollte man auf einen Fachmann zurückgreifen, unprofessionelle Webseiten machen auch einen unprofessionellen Eindruck, und der ist sicherlich nicht förderlich.

Wenn dein Auto kaputt ist, gehst du ja auch nicht zum Bäcker... ;)

Joey
 

wapplegraph

Normande
Registriert
12.04.06
Beiträge
571
Ha und was hilft mir jetzt das???
Ich möchte ja, das die Webseite professionell wirkt und ist.

PS. My Profil war nicht meine Idee und die Farben stimmen auch noch nicht!
 

joey23

Hochzeitsapfel
Registriert
26.11.06
Beiträge
9.247
Spendier dem Profil wenigstens noch ein "e", weil so ist es einfach falsch.