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