IE Probleme mit Navigation

marie-sue · #1 18.10.07, 08:56

Hallo Leute,

Ich bin neu hier, und bitte um eure Hilfe... Ich habe ein Problem und zwar hab ich ein Dropdown- Menü in Typo 3 eingebunden.

Im Firefox wird das ganze ordnungsgemäß dargestellt, aber im IE ist das Aufklappmenü verschoben...
Das hat zur Folge dass wenn man mit der Maus auf den Zwischenraum kommt das Aufklappmenü wieder zugeht....

Ich weiß nicht woran das liegt und auch nich wie ich das Beheben kann.. Vll mit Position?

Hier könnt ihrs euch ansehen: Home: YAML for Templavoila

Mein css:

Code:

#hauptmenue {

  line-height : normal;

  text-align: left;

  height:auto;

  overflow:hidden;

  width: 100%;
  color:6f6f6f;

  


}

#hauptmenue ul {

  list-style-type : none;

  margin-right : 0;

  padding : 0;

  margin-top: 0;
  

  margin-bottom: 0;

  text-align:right;

  display:inline;
  color:6f6f6f;


}

#hauptmenue li {

  display : inline;

  margin : 0;

  padding : 0;

}

#yymenu a {

  padding: 4px;

  text-decoration: none;

  display: block;

  color:6f6f6f;

  margin: 0px;


  border-bottom: solid 1px #FFffff;

  background: #8594a0;

  font: bold 11px Verdana SunSans-Regular;
  
  font-size: 8px;

}

#yymenu a.last {

  border-style: none;

}

#yymenu  {

 /* background: #2e3e4b;*/

}

 

#yymenu a:hover {

  color:6f6f6f;

  background-color: #C3EA77; 
  z-index:100;  

}

.mmLevel1, .mmLevel2{

 padding-top:0px;

 margin-bottom:10px;
 

  border: 2px solid #8594a0;
  

}

#yymenu .sub {

  /*background-image: url(../images/ypmenu_pfeilg.gif);*/

  background-repeat: no-repeat;

  background-position: right center;

}

Typoscript-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:

lib.nav.20 = HMENU

lib.nav.20 {
special = directory
special.value = 428
stdWrap.dataWrap = <ul>|</ul>
stdWrap.required = 1
korek_css = padding-bottom:20px;margin-left:1px;text-align:left; color:#454545;
aniLen = 800
hideDelay = 5
minCPUResolution = 8
kore_so_x = -2
div_id_layer = yymenu

1 = tx_menu_ypslideoutmenu
1 {

expAll=1
NO = 1
NO {
linkWrap = <span>|</span>
ATagBeforeWrap = 1
allWrap = <li>|</li>
}
}
2 = tx_menu_ypslideoutmenu
2 {
moveTo = down
height = 22
width = 177
expAll=1
NO {
}
}
3 < .2
3.moveTo = right
3.width= 177
}

Ich denk es ist nur ne Kleinigkeit zu ändern aber manchmal sieht man den Wald vor lauter Bäumen nicht...

Danke schon mal für eure Mühen

Marie

**Kurt51** · #2 19.10.07, 12:29

vermute, das liegt am Boxmodell des IE resp. an den paddings, die Du im CSS eingestellt hast. Mach die mal alle auf 0 und kontrolliere.

marie-sue · #3 19.10.07, 16:33

Danke für deine Antwort, Kurt!

Ich hab jetzt alle paddings rausgenommen und es funktioniert trotzdem nicht.
Ich habe durch ausprobieren herausgefunden das das ganze Problem wahrscheinlich etwas mit meinem javascript zu tun hat...

wie kann man im Javascript zwischen firefox und internetexplorer unterscheiden?

Ich schick das javascript mal mit vll kann mir ja einer helfen...

Code:

/*****************************************************
 * ypSlideOutMenu
 * 3/04/2001
 * 
 * a nice little script to create exclusive, slide-out
 * menus for ns4, ns6, mozilla, opera, ie4, ie5 on 
 * mac and win32. I've got no linux or unix to test on but 
 * it should(?) work... 
 *
 * --youngpup--

 * Überarbeitet typo.intervation.de 2007
 *****************************************************/

ypSlideOutMenu.Registry = []


// constructor
function ypSlideOutMenu(id, dir, left, top, width, height, parentid)
{
    this.ie  = document.all ? 1 : 0
    this.ns4 = document.layers ? 1 : 0
    this.dom = document.getElementById ? 1 : 0
    
        //alert(id+"Container");
    if (this.ie || this.ns4 || this.dom) {
        var m_hight = document.getElementById(id+"Container").offsetHeight;
        
        this.id             = id
        this.dir         = dir
        this.orientation = dir == "left" || dir == "right" ? "h" : "v"
        this.dirType     = dir == "right" || dir == "down" ? "-" : "+"
        this.dim         = this.orientation == "h" ? width : m_hight
        this.hideTimer     = false
        this.aniTimer     = false
        this.open         = false
        this.over         = false
        this.startTime     = 0

        this.sliding     = false
        this.parentid     = parentid
        this.showcount     = 0

        // global reference to this object
        this.gRef = "ypSlideOutMenu_"+id
        eval(this.gRef+"=this")
        
        this.initleft = left
        this.inittop = top
        this.initwidth = width
        this.initheight = height
        this.showcount = 0;


        // add this menu object to an internal list of all menus
        ypSlideOutMenu.Registry[id] = this

        var d = document

                var strCSS = '<style type="text/css">';
                strCSS += '#' + this.id + 'Container { visibility:hidden; '
        strCSS += 'left:' + left + 'px; '
        strCSS += 'top:' + top + 'px; '
        strCSS += 'overflow:hidden; z-index:10000}'
        strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
        strCSS += 'width:' + width + 'px;'+ ypSlideOutMenu.korek_css +';'
        strCSS += 'height:' + m_hight + 'px; '
        strCSS += 'clip:rect(0 ' + width + ' ' + m_hight + ' 0); '
        strCSS += '}'
                strCSS += '</style>';

                d.write(strCSS)

        this.load()
    }
}

ypSlideOutMenu.set_level_one = function(vert, korek_css, aniLen, hideDelay, minCPUResolution, kore_ns_x, kore_ns_y, kore_so_x, kore_so_y) {
    
    ypSlideOutMenu.horz_vert = vert;
    ypSlideOutMenu.korek_css = korek_css 
    ypSlideOutMenu.aniLen = aniLen
    ypSlideOutMenu.hideDelay = hideDelay
    ypSlideOutMenu.minCPUResolution = minCPUResolution
    ypSlideOutMenu.kore_ns_x = kore_ns_x
    ypSlideOutMenu.kore_ns_y = kore_ns_y
    ypSlideOutMenu.kore_so_x = kore_so_x
    ypSlideOutMenu.kore_so_y = kore_so_y
}
ypSlideOutMenu.writeCSS = function() {
    document.writeln('<style type="text/css">');
    for (var id in ypSlideOutMenu.Registry) {
        document.writeln(ypSlideOutMenu.Registry[id].css);
    }
    document.writeln('</style>');
}

ypSlideOutMenu.prototype.load = function() {
    var d = document
    var lyrId1 = this.id + "Container"
    var lyrId2 = this.id + "Content"
    var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
    if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
    // var temp

    if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 1000)
    else {
        this.container    = obj1
        this.menu        = obj2
        this.style        = this.ns4 ? this.menu : this.menu.style
        this.homePos    = eval("0" + this.dirType + this.dim)
        this.outPos        = 0
        this.accelConst    = (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen 

        // set event handlers.
        if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
        this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
        this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")

        //set initial state
        this.endSlide()
    }
}
    
ypSlideOutMenu.showMenu = function(id, layerid, idw, level)
{
    var reg = ypSlideOutMenu.Registry
    var obj = ypSlideOutMenu.Registry[id]
    if(layerid) {
        idw.onactivate = function() { repositionMenu(idw, layerid, level); }
        
    }
        
    if (obj.container) {
        obj.over = true

        // close other menus.
        // for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)

        // if this menu is scheduled to close, cancel it.
        if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }

        obj.showcount++;

        // if this menu is closed, open it.
        if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
    }
}

ypSlideOutMenu.hideMenu = function(id)
{
    // schedules the menu to close after <hideDelay> ms, which
    // gives the user time to cancel the action if they accidentally moused out
    var obj = ypSlideOutMenu.Registry[id]

    if (obj.container) {
        if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
        
        obj.showcount--;
        
        obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay);
    }
}

ypSlideOutMenu.hide = function(id)
{
    var obj = ypSlideOutMenu.Registry[id]
    var reg = ypSlideOutMenu.Registry
    obj.over = false

    if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
    
    // flag that this scheduled event has occured.
    obj.hideTimer = 0
    
    var close = true;
    
    for (menu in reg) {
    // for each child, if either
    // 1. the child is open or
    // 2. the child is closing (but hasn't closed yet)
    // then we don't close this menu.
        var pid = ypSlideOutMenu.Registry[menu].parentid;
        if(pid == id) {
            if (ypSlideOutMenu.Registry[menu].open) close = false;
            if (!ypSlideOutMenu.Registry[menu].open && ypSlideOutMenu.Registry[menu].sliding) close = false;
        }
    }

    // if this menu is open, close it.
    if (obj.open && !obj.aniTimer && close && !obj.showcount) obj.startSlide(false);
}

ypSlideOutMenu.prototype.startSlide = function(open) {
    this[open ? "onactivate" : "ondeactivate"]()
    this.open = open
    if (open) this.setVisibility(true)
    this.startTime = (new Date()).getTime()    
    this.sliding = true;
    this.aniTimer = window.setInterval(this.gRef + ".slide()", ypSlideOutMenu.minCPUResolution)
}

ypSlideOutMenu.prototype.slide = function() {
    var elapsed = (new Date()).getTime() - this.startTime
    if (elapsed > ypSlideOutMenu.aniLen) this.endSlide()
    else {
        var d = Math.round(Math.pow(ypSlideOutMenu.aniLen-elapsed, 2) * this.accelConst)
        if (this.open && this.dirType == "-")        d = -d
        else if (this.open && this.dirType == "+")    d = -d
        else if (!this.open && this.dirType == "-")    d = -this.dim + d
        else                                        d = this.dim + d

        this.moveTo(d)
    }
}

ypSlideOutMenu.prototype.endSlide = function() {
    this.aniTimer = window.clearTimeout(this.aniTimer)
    this.moveTo(this.open ? this.outPos : this.homePos)
    if (!this.open) this.setVisibility(false)
    this.sliding = false;
    if ((this.open && !this.over) || (!this.open && this.over) && (!this.parent || this.parent.open)) {
        this.startSlide(this.over)
    } else {
        var overchild = false;
        var reg = ypSlideOutMenu.Registry
        for (menu in reg) {
            var pid = ypSlideOutMenu.Registry[menu].parentid
            if (pid == this.id) overchild = ypSlideOutMenu.Registry[menu].over ? true : overchild
        }
        if(!overchild && this.parentid && !ypSlideOutMenu.Registry[this.parentid].over) ypSlideOutMenu.hide(this.parentid);
    }
}

ypSlideOutMenu.prototype.setVisibility = function(bShow) { 
    var s = this.ns4 ? this.container : this.container.style
    s.visibility = bShow ? "visible" : "hidden"
}
ypSlideOutMenu.prototype.moveTo = function(p) { 
    this.style[this.orientation == "h" ? "left" : "top"] = this.ns4 ? p : p + "px"
}
ypSlideOutMenu.prototype.getPos = function(c) {
    return parseInt(this.style[c])
}

// events
ypSlideOutMenu.prototype.onactivate        = function() { }
ypSlideOutMenu.prototype.ondeactivate    = function() { }


        
        
        
        
function getPosition(element) {
/* der Aufruf dieser Funktion ermittelt die absoluten Koordinaten
   des Objekts element */
     
  var elem=element,tagname="",x=0,y=0;
  /* solange elem ein Objekt ist und die Eigenschaft offsetTop enthaelt
   wird diese Schleife fuer das Element und all seine Offset-Eltern ausgefuehrt */
   
  while ((typeof(elem)=="object")&&(typeof(elem.tagName)!="undefined"))
  {
     
    y+=elem.offsetTop;     /* Offset des jeweiligen Elements addieren */
    x+=elem.offsetLeft;    /* Offset des jeweiligen Elements addieren */
    
    tagname=elem.tagName.toUpperCase(); /* tag-Name ermitteln, Grossbuchstaben */
    
    /* wenn beim Body-tag angekommen elem fuer Abbruch auf 0 setzen */

    if (tagname=="HTML") {
      elem=0;
      
    }
    if (tagname=="BODY" && navigator.userAgent.indexOf("Opera")>-1) {
        elem=0;
        
    }
    if (tagname=="BODY" && !navigator.userAgent.indexOf("Opera")>-1) {
        elem=0;
        
    }

    /* wenn elem ein Objekt ist und offsetParent enthaelt
   Offset-Elternelement ermitteln */
    if (typeof(elem)=="object")
      if (typeof(elem.offsetParent)=="object")
        elem=elem.offsetParent;
        
    
  }
    
/* Objekt mit x und y zurueckgeben */
  position=new Object();
  position.x=x;
  position.y=y;
  return position;
}
// this function repositions a menu to the speicified offset from center
function repositionMenu(menu, offset, level) {
    
    /* Element-Objekt zur ID ermitteln */
    element=document.getElementById(offset);
     //alert(document.getElementById(offset).pageXOffset);
/* Position bestimmen und melden */
    //alert(document.getElementById(offset).offsetWidth);
// the new left position should be the center of the window + the offset
    var newLeft = getPosition(element);
  
    if(level)
        var erx = newLeft.x+document.getElementById(offset).offsetWidth;
    else {
        if(ypSlideOutMenu.horz_vert == "down") {
            erx = newLeft.x;
            newLeft.y = newLeft.y+ element.offsetHeight;
        }
        else {
            erx = newLeft.x + element.offsetWidth;
            newLeft.y = newLeft.y;
        }
        
    }
        
    
// setting the left position in netscape is a little different than IE
    menu.container.style ? menu.container.style.left = erx+ypSlideOutMenu.kore_so_x + "px" : menu.container.left = newLeft.x;
    menu.container.style ? menu.container.style.top = newLeft.y+ypSlideOutMenu.kore_so_y + "px" : menu.container.top = newLeft.y;
}
 
// this function calculates the window's width - different for IE and netscape
function getWindowWidth()
{
    return window.innerWidth ? window.innerWidth : document.body.offsetWidth;
}

Ich weiß echt nich mehr weiter :sad:

Bin über jede Hilfe dankebar

vielen Dank für eure Mühen

marie

marie-sue · #4 19.10.07, 18:10

Hallo leute,

danke für eure Mühen...

Ich habe den Fehler nun selbst beheben können

Für diejenigen die sich auch damit rumärgern...

Hier meine Lösung:

ich gebe mal nur die Veränderung der Funktion an.

Code:

function repositionMenu(menu, offset, level) {
    var browserName = navigator.appName;
    
    /* Element-Objekt zur ID ermitteln */
    element=document.getElementById(offset);
     //alert(document.getElementById(offset).pageXOffset);
/* Position bestimmen und melden */
    //alert(document.getElementById(offset).offsetWidth);
// the new left position should be the center of the window + the offset
    var newLeft = getPosition(element);
  
    if(level)
        var erx = newLeft.x+document.getElementById(offset).offsetWidth;
    else {
        if(ypSlideOutMenu.horz_vert == "down") {
            erx = newLeft.x;
            newLeft.y = newLeft.y+ element.offsetHeight;
        }
        else {
            erx = newLeft.x + element.offsetWidth;
            newLeft.y = newLeft.y;
        }
        
    }
        
    if (browserName == "Microsoft Internet Explorer" ){
        erx=erx-45;
        newLeft.y=newLeft.y-10;
    }
// setting the left position in netscape is a little different than IE
    menu.container.style ? menu.container.style.left = erx+ypSlideOutMenu.kore_so_x + "px" : menu.container.left = newLeft.x;
    menu.container.style ? menu.container.style.top = newLeft.y+ypSlideOutMenu.kore_so_y + "px" : menu.container.top = newLeft.y;
}

Also bis demnächst

marie

**josDesign** · #5 08.02.08, 03:09

Ich konnte das ypslidemenu auch erfolgreich einbinden. Ich habe allerdings im IE 6.0 falsch positionierte Untermenüs. Sie werden ganz links angereiht auf dem Seitenrand. Siehe hier

Ich weis nicht wo ich anfangen soll. Ich habe leider kaum ein Wissen zu Javaskript.

Mit bestem Dank im Voraus,
jos

EDIT Auch im IE 7 kommen bei manchen Rechnern diese Fehler!
Ich bin am Verzweifeln

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht	Thema bewerten
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln	Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Navigation macht Probleme	floody	GMENU, HMENU, TMENU und Co.	1	06.08.08 09:31
Navigation (3 Ebenen)	Ingo187	TYPO3 4.x Fragen und Probleme	6	09.07.08 08:02
Navigation mit Zähler	HMoellendorf	TYPO3 4.x Fragen und Probleme	8	11.06.08 14:55
Probleme mit der Navigation	moerti	GMENU, HMENU, TMENU und Co.	1	01.02.08 17:04
BE Navigation in Flash?	crimson	TYPO3 4.x Backend	5	26.10.06 14:04

Suche

Userpanel

IE Probleme mit Navigation

vll ein Java- Problem?

Problem behoben