..:: position: relative in IE nicht richtig ::..

pockedesign · 01. Aug. 2008

Hallo Leute,

Hab da Mal wieder ein Problem das ich sleber nicht auf die Reihe bekomme.
Bin mir sicher es ist nichs großes. Aber ich find den Fehler oder die Lösung einfach nicht.

Habe mehrere Bilder in einem Slider. Unter den Bilder sollten ein kurzer Bildname stehen (z.B. Produktname). Dieser Text steht im Firefox auch schön unter dem Bild. Der liebe IE legt den Text aber über das Bild.

Link zum Problem...

TestSlider

Nochmal zum Problem: Nicht der Slider ist das Problem. Sonder der Text der unterhalb von den Bilder stehen soll. Der steht in allen Browsern unter dem Bild, nur nicht im IE. Find den Fehler nicht.

anna55 · 01. Aug. 2008

pockedesign schrieb:
Nochmal zum Problem: Nicht der Slider ist das Problem. Sonder der Text der unterhalb von den Bilder stehen soll. Der steht in allen Browsern unter dem Bild, nur nicht im IE. Find den Fehler nicht.

Für IE6 und IE7 würde auf die Schnelle helfen

PHP:

*html .photo span {
	margin-top:80px;
	margin-left:-200px;
}
*+html .photo span {
	margin-top:80px;
}

Damit Safari (Win XP) den Text anzeigt, top ändern:

PHP:

.photo span {
	...
	top: 20px;
	...
}

Ganz schlimm reagiert bei mir Opera. Der mag Deinen span-Text garnicht und setzt den Slider außer Betrieb.

pockedesign · 01. Aug. 2008

hallo anna55 (wieder einmal)!

danke für deine Antwort. Hab es bis jetzt so gelöst, dass ich dem .photo span einfach statt position: absolute; top: 0; left: 0; einfach positon: absolute: bottom: -10px; left: 0; mitgegeben hab.

Allerdings bin ich mir nicht sicher ob das sauber gecoded ist.

Das mit dem Opera ist mir nicht entgangen, aber ich hab definitiv noch zu wenig Erfahrung mit CS und JavaScript.

Hab zur Zeit leider keinen anderen Ansatz wie Ihr Profis das mit dem Text unter dem Bild in einer Liste lösen würdet.

Werd aber nicht aufgeben. Wird sich schon was finden lassen.

Danke nochmal!

anna55 · 01. Aug. 2008

Das negative bottom ist gut und wohl besser als die IE-Hacks.

Was den Text unter den Bildern anbelangt, sehe ich bei diesen Galerien eigentlich immer, dass die Scripter die Anweisung in das JS schreiben und z.B. auch das alt-Attribut dafür einsetzen.

pockedesign · 04. Aug. 2008

Hallo zusammen,

hab das Ding jetzt so gelöst! Läuft jetzt in allen Browsern (auch Opera und Mac). Nur der IE 6 will die Link-Texte nicht mit hover anzeigen. Aber das werd ich auch noch schaffen. Dem Safari muss ich allerdings auch für die Links ein * {text-decoration: none; /* für den Safari */} mitgeben. Ansonsten ignoriert auch der die per Css zugewiesenen a:hover.

Siehe Link...

TestSlider

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript" src="scripts/jquery-1.2.2.pack.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (Dynamic Drive DHTML(dynamic html) & JavaScript code library)
* Visit Dynamic Drive DHTML(dynamic html) & JavaScript code library for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

<script type="text/javascript" src="scripts/slider_gallery/slider_gallery.js"></script>
<script type="text/javascript" src="scripts/slider_gallery/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="scripts/slider_gallery/jquery.dimensions.js" charset="utf-8"></script>
<script type="text/javascript" src="scripts/slider_gallery/ui.mouse.js" charset="utf-8"></script>
<script type="text/javascript" src="scripts/slider_gallery/ui.slider.js" charset="utf-8"></script>
<style type="text/css">

img {
border: none;
}

* {
text-decoration: none; /* für den Safari */
}

.sliderGallery {
/* background: url(../images/slider_gallery/productbrowser_background_20070622.jpg) no-repeat; */
overflow: hidden;
position: relative;
margin: 50px 0 20px 0;
padding: 0;
height: 150px;
width: 582px;
}

.sliderGallery ul {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
width: 1400px; /* Gesamtbreite aller Maschinenbilder inkl. Abstände */
text-align: center;
}

.sliderGallery ul li {
display: inline;
margin-right: 30px; /* Abstand zwischen den Maschinen */
padding: 0;
}

/******************************************/
/******* Maschinen-Beschriftung **********/
/******************************************/

.photo {
float: left;
margin: 0;
padding: 0;
width: 170px;
}

.photo span {
width: 170px;
padding-top: 0px;
overflow: hidden;
font: normal 11px Arial, Helvetica, sans-serif;
color: #b8c3d4;
text-align: center;
}

.photo a .text_link,
.photo a .text_link:visited {
float: left;
width: 100%;
padding: 0;
overflow: hidden;
color: #55687b;
text-decoration: none;
text-align: center;
cursor: pointer;
}

.photo a .text_link:hover {
color: #aa0031;
text-decoration: none;
}

.slider {
width: 542px;
height: 17px;
padding: 1px;
position: relative;
top: 120px;
left:5px;
background: url(productbrowser_scrollbar.png) no-repeat;
}

.handle {
position: absolute;
cursor: move;
height: 17px;
width: 181px;
top: 0;
background: url(productbrowser_scroller.png) no-repeat;
z-index: 100;
behavior: url(/images/resources/iepngfix.htc); /* PNG-Fix */
}

.slider span {
color: #000000;
font: normal 12px Arial, Helvetica, sans-serif;
cursor: pointer;
position: absolute;
z-index: 110;
top: 1px;
}

/******************************************/
/************** Kategorie ****************/
/******************************************/

.slider .category_1 {
left: 50px;
}

.slider .category_2 {
left: 230px;
}

.slider .category_3 {
right: 50px;
}

</style>

</head>

<body>


<div class="sliderGallery">
<ul>
<li class="photo"><a href="#" title="Maschinen-Name"><img src="bild.gif" /><span class="text_link">Abbildung 1</span></a></li>
<li class="photo"><a href="#" title="Maschinen-Name"><img src="bild.gif" /><span class="text_link">Abbildung 2</span></a></li>
<li class="photo"><a href="#" title="Maschinen-Name"><img src="bild.gif" /><span class="text_link">Abbildung 3</span></a></li>
<li class="photo"><a href="#" title="Maschinen-Name"><img src="bild.gif" /><span class="text_link">Abbildung 4</span></a></li>
<li class="photo"><a href="#" title="Maschinen-Name"><img src="bild.gif" /><span class="text_link">Abbildung 5</span></a></li>
<li class="photo"><a href="#" title="Maschinen-Name"><img src="bild.gif" /><span class="text_link">Abbildung 6</span></a></li>
<li class="photo"><a href="#" title="Maschinen-Name"><img src="bild.gif" /><span class="text_link">Abbildung 7</span></a></li>
</ul>
<div class="slider">
<div class="handle"></div>
<span class="category_1">Kategorie 1</span>
<span class="category_2">Kategorie 2</span>
<span class="category_3">Kategorie 3</span>
</div>
</div> 

</body>
</html>

ein schlauer · 04. Aug. 2008

Ich hab mir das alles nicht angeschaut, aber das hier:

HTML:

	position: relative;
	float: left;

Ist Unsinn. Was soll das position bewirken?

pockedesign · 04. Aug. 2008

@ ein schlauer

du hast natürlich vollkommen recht.

position: relative; ist für die katz!

ist vom alten code noch stehengeblieben.

danke für den hinweis!

..:: position: relative in IE nicht richtig ::..

pockedesign

New member

anna55

Moderator

pockedesign

New member

anna55

Moderator

pockedesign

New member

ein schlauer

Lounge-Member

pockedesign

New member