Ergebnis 1 bis 7 von 7
  1. #1
    pockedesign ist offline Jungspund
    registriert
    12-06-2008
    Ort
    Bregenz (AT)
    Beiträge
    11

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

    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.

  2. #2
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

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

    Zitat Zitat von pockedesign Beitrag anzeigen
    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-Code:
    *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-Code:
    .photo span {
        ...
        
    top20px;
        ...

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


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  3. #3
    pockedesign ist offline Jungspund
    registriert
    12-06-2008
    Ort
    Bregenz (AT)
    Beiträge
    11

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

    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!

  4. #4
    Avatar von anna55
    anna55 ist offline Moderator
    registriert
    06-02-2006
    Ort
    Taunusstein
    Beiträge
    3.430

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

    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.


    .:Taunusstein - Nachrichten und Kommentare


    "Ich bin doch lieber jeden Tag glücklich als im Recht."
    (Per Anhalter durch die Galaxis)

  5. #5
    pockedesign ist offline Jungspund
    registriert
    12-06-2008
    Ort
    Bregenz (AT)
    Beiträge
    11

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

    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>
    <!-- SLIDE GALLERY -->
    <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>

    <!-- S L I D E G A L L E R Y -->
    <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> <!-- sliderGallery -->


    </body>
    </html>
    Geändert von pockedesign (04-08-2008 um 11:03 Uhr)

  6. #6
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

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

    Ich hab mir das alles nicht angeschaut, aber das hier:
    HTML-Code:
    	position: relative;
    	float: left;
    Ist Unsinn. Was soll das position bewirken?

  7. #7
    pockedesign ist offline Jungspund
    registriert
    12-06-2008
    Ort
    Bregenz (AT)
    Beiträge
    11

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

    @ 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!

Ähnliche Themen

  1. Eure Meinung bitte ...
    Von nebler im Forum Site-Check
    Antworten: 24
    Letzter Beitrag: 31-05-2007, 14:40
  2. Genaue Positionierung und Browser
    Von ~red~ im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 31-10-2005, 17:01
  3. CSS mag mich nicht :-(
    Von djingeringe im Forum CSS und (X)HTML
    Antworten: 14
    Letzter Beitrag: 18-07-2005, 19:05
  4. createElement("IMG") und relative Position
    Von Phat-Tobi im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 26-03-2005, 18:35
  5. relative Position bestimmen
    Von Divi im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 19-08-2004, 11:48

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •