Grauer Hintergrund im IE und vieles mehr

[CKay1]

Hi liebe Leutz,

hab meine Webseite soweit fertig und nun alles versucht auf Opera, Netscape, FF und IE zu testen.
Hab einen riesen Spass damit. Hier fängt das basteln glaube ich erst richtig an oder?!
Also mein Hauptproblem liegt darin, dass ich ein Bild mit transparentem Hintergrund habe und jeder Browser ausser natürlich Gigant IE nicht zeigt mir das auch normal an. IE nimmt nen grauen Hintergrund statt dem transparent.
Was soll ich hier tun?

Dann versteht IE mein min-height nicht was mich auch total nervt. Will nämlich zwei Dinge und rechts und links nebeneinander darstellen und das geht glaub ich nicht wenn "position" auf relativ ist. Also benutz ich absolute und was passiert hier - mein heissgeliebter FF lässt mich die Links nicht mehr aufrufen die in dem Feld sind welches mit "absolute" formatiert ist. Gibt es hierfür eine Lösung?

Ausserdem wird mein Seitenende im IE verschluckt und im FF nicht.
Das Problem mit dem nebeneinander darstellen hab ich an anderer Stelle dann nochmals. Da wird meine Tabelle der rechten Seite vom IE einfach garnicht angezeigt aber von allen anderen Browsern schon.

Ok ich weiss, dass ist jetzt sehr viel auf einmal und deshalb auch keine Codes erstmal. Wenn ihr irgendetwas an Codes benötigt gebt Bescheid.

Dieses Gefutzel ist ja mal der Wahnsinn.

Grüsse und vielen Dank mal wieder im voraus!

[skittles]

ja JETZT fängt der Spaß erst an!
Ein Design welches gut aussieht zu erstellen ist nicht wer!
Aber sobald man anfängt, es in verschiedenen Browsern zu betrachten, könnte man an die Decke gehen und anfangen zu verzweifeln!
Zumindest bei mir so!

Ich kann dir leider nicht alle Fragen beantworten! Bin selber noch ein Newbie auf dem Gebiet!

Jedoch

max-width
wird von IE nicht unterstützt! Wie so vieles andere auch!
Eine mögliche Lösung funktioniert (angeblich, habs selber nicht getestet) mit Java Script
http://www.svendtofte.com/code/max_width_in_ie/

Scroll mal weiter runter falls du net soviel Zeit hast alles zu lesen! Es gibt nämlich mehrere Möglichkeiten!

transparenz
wie meinst du das mit dem Hintergrund? ein normales GIF Bild? oder wie?

2 dinge nebeneinander darstellen
Am besten mit "float", kannst zwei elemente nebeneinader platzieren!

Ende wird verschluckt
nun darunter kann ich mir zumindest nichts vorstellen!


~~~~~~~~~~~~~~~~~~~~~~~~

ja du hast wirklich einiges an Fragen gehabt *gg*
ich hoffe jemand anderer kann dir auch noch helfen.

Aber ein Link zu deiner Seite wäre trotzdem nett, damit man sich was drunter vorstellen kann!

[CKay1]

Hi skittles,

erstmal danke für die Hilfe.
Das IE dass nicht unterstützt hat mir selfhtml auch gesagt aber die Lösung dafür nicht genannt. Deshalb danke für den Link. Werde das daheim mal kurz durchlesen. Soviel ist es dann doch nicht gewesen.
Float hört sich logisch an. Mal schauen was sich da machen lässt. Ich denke, das hilft mir schon sehr weiter. Immer solche Kleinigkeiten auf die man einfach nicht selber kommen will. Das ist wie in einem Adventure-Game. Du weisst was Du machen willst und dass es einen Weg dafür gibt aber welches Tool auf was anwenden;-)

Das Bild hab ich übrigens von .png auf GIF umgewandelt. Der transparente Hintergrund sollte dadurch aber erhalten geblieben sein.

Mit dem verschluckten Ende meine ich, dass ich ein Feld habe, dass copyright und so anzeigt, dies aber auf einigen Seiten im IE nicht tut.
Was mir aufgefallen ist, ist wenn ich da wo dieses Feld sein sollte versuche mit der Maus zu markieren sehe ich durch die Markierung das es eigentlich da ist aber ohne Markierung sehe ich nichts.

[Laus]

Hallo Christoph

Wie skittles schon sagte ein Link zur Seite oder wenigstens css und Quelltext währen sehr hilfreich.

[CKay1]

Code: Alles auswählen

/* CSS */

/*generell*/
body {
   font-family: trebuchet ms, verdana, arial, tahoma;
   font-size: 90%;
   color: #888;
   background-color: white;
   line-height: 180%;
   margin: 0;
   padding: 0;
   text-align: center;
}

/*das element der linken seite*/
#bild-left {
   
    position:absolute;
    height:auto;
    top:160px;
    left:0;
}
   
/*element der rechten*/
#content {
min-height:530px;
padding: 90px 30px 0 450px;
   text-align:justify;
}

/*der verschluckte Schluss*/
#wrapper-footer {
   margin-top: 1em;
   text-align: center;
   width: 85%;
   margin: 0 auto;
}

#footer {
   margin: 0 20px;
   background-color: #e5f0fc;
   position: relative;
   top: 30px;
   border: 1px solid #ccc;
   border-bottom: 0;
   clear: both;
}


/* Die Page */
<div>
<font><b>Herzlich Willkommen</font></b> auf der Webseite von
<a>XXX</a>!
<p>Hier finden Sie alle nötigen Informationen zu einem der wohl einzigartigsten Ferienhäuser auf
<a><span>isle</span></a>,
welches sich auch "Normalverdiener" leisten können.</p><p>
Einzigartig und ruhig im Orte <a>xxx</a>
gelegen bietet dieses Ferienhaus eine traumvolle Atmosphäre
die nur sehr schwer beschrieben werden kann. Am besten "stöbern" Sie hier einmal durch die Informationen
oder
sehen sich die <a><span>Fotos</span></a> von
<a>XXX</a> an um auf den
Geschmack zu kommen.</p><p>
Gerne stehen wir Ihnen aber auch persönlich zur Verfügung. Den einfachsten Kontakt stellen
Sie per Mail zu uns her. Dazu klicken Sie einfach
<a><span>&gt;&gt;&gt;hier&lt;&lt;&lt;</span></a></p>

</div>

<div><img></div>


<div>
<div>Design by <a>XXX</a> | copyright 2006 <a>XXX</a></div>
</div>

/* Ausschnitt der Page mit Bild(grauer Hintergrund) */
<img>




Da fällt mir dann auch auf das es doch kein GIF ist sondern noch die .png-datei
Meint Ihr es hilft, das zu ändern?

Gruss...

PS Die Seite ist noch nicht online!

[Laus]

Hallo Chris

Der IE hat Probleme mit dem anzeigen von transparenten pngs. Darum wird auch der Hintergrund im IE Grau.
Ein "verschlucken" des Copyrights kann ich in dem Code den Du gepostet hast kann ich nicht feststellen.

Xaver

[skittles]

#wrapper-footer {
margin-top: 1em;
text-align: center;
width: 85%;
margin: 0 auto;
}


Ähm
margin-top und margin?
wozu??

[CKay1]

Wozu?! Keine Ahnung - hab sehr viel ausprobiert um das Problem in den Griff zu bekommen und das ist wohl das Ergebnis.
Nichtsdestotrotz habe ich gestern Abend meinen IE-Krieg ausgetragen und bin ganz klar als Sieger aus dem Kampf.
Dank dem float-Tag (Danke nochmal für den Hint) sitzt und passt jetzt jedes Foto. Dem .png-Bild hab ich nen weissen Background verpasst und die Copyrightleiste habe ich auch besiegt. Wenn ich jetzt nur noch wüsste was ich benutzt habe? Na ja, wenn es jemanden interessiert kann ich es ja posten.
Sonst hatte ich keine weiteren Probleme glaube ich, die mir jetzt noch einfallen würden.
Echt vielen Dank wie immer...

[skittles]

Also funkt jetzt alles so wie du willst?

Jaja die Kriege mit dem IE!
Kenne ich nur zu gut! IE sollte man einfach abschaffen *gg*

Ein link zur "fertigen" page würde ich aber trotzdem gerne mal sehen!

[CKay1]

Ja bin ich auch dafür. Weg mit dem IE. Mann wie kann man in einem solchen Unternehmen der Technik nur so hinterherhinken.
Link stell ich hier rein sobald die Seite online ist. Erwarte aber nichts besonderes. Bin halt auch noch ein Newbee und die Seite war nur ein kleiner Gefallen für eine Bekannte.

Gruss aus Lanzarote,

Christoph

[CKay1]

und ja genau es funktioniert alles wie gewünscht. Danke der Nachfrage. Mir fehlt nur noch der spanische Text und dann geht es online.

Chris

[hea67]

Hallo CKAY1,

ich habe das gleiche Problem. Ich habe ein PNG-Bild mit trans. Hintergrund und es wird im IE grau dargestellt.
Was genau hast Du gemacht. Das CSS-Sript habe ich schon versucht.
Ich habe das Bild in eine Ebene gepackt die über einem Hintergrundbild liegt.

[CKay1]

Hi hea67,

denke ich bin Dir keine Hilfe.
Habe nämlich einen einfarbigen Hintergrund gehabt und dem Bild einfach die gewünschte Farbe hinzugefügt.

Finde die Lösung selbst etwas schade, da so etwas wirklich unterstützt werden sollte.

Sorry,


PS Das Problem hat Microsoft übrigens auch bei anderen Programmen

[Laus]

Hab was zur PNG Problematik gefunden zwar keine optimale Lösung aber immerhin. Seht euch mal das Script "PNG Behavior"von "WebFX" an, das in diesen Artikel beschrieben wird.
Gruß Xaver

[hea67]

... es muß ja irgendwie gehen. Denn selbst Microsoft hat es in seiner Seite zum neuen Vista eingebnaut
http://www.microsoft.com/germany/windows/windowsvista/experiences/default.mspx

Dort ist das PNG-Bild Erlebnis auch zuerst mit grauem Hintergrund und wird wenn gealden transparent.

Ich werde mir mal den Tip von Laus mal ganauer ansehen.

[CKay1]

Irgendwer wollte doch den Link.
Die Seite ist vorübergehend mal unter:

http://xxx.web574.serverdrome.de/

zu sehen.

Wie gesagt nichts besonderes.

[n2o]

Hmm,

Warum ändert ihr die Bilder nicht in ein Transparentes gif um damit wäre euer problem doch auch gelöst?

Also nicht einfach umbennen! Sonder mit einem grafikprogramm Fireworks zb exportieren!

gruss marco

[Frangipeni]

#wrapper-footer {
margin-top: 1em;
text-align: center;
width: 85%;
margin: 0 auto;
}


Ähm
margin-top und margin?
wozu??

margin-top: 1em; (Abstand Top)
text-align: center; (Zentrieren von Inhalt fuer IE)
width: 85%; (Allgemeine Weite)
margin: 0 auto; (Zentrieren von Inhalt für moderne browser)