overflow und visibility bei IE, Firefox und Safari

[reeko]

Hallo

Habe folgendes Problem.

Ich habe einen Layer (id="allEvents") mit einem include. in diesem Include habe ich wieder einen Layer (id="allEventsScroll") welcher scrollbar sein soll. Das klappt soweit ohne Probleme mit overflow:auto;

Da der Layer (id="allEvents") per onclick ein- oder ausgeblendet wird muss ich beim Layer (id="allEventsScroll") den scrollbalken auf overflow:hidden; setzen da sonst bei firefox die scrollbar nicht ausgeblendet wird.

also habe ich folgendes gemacht (aufruf mit onclick):

function showEvents()
{
	var layer = document.getElementById("allEvents");
	var scrollLayer = document.getElementById("allEventsScroll");
	if (layer.style.visibility == "visible")
	{
		layer.style.visibility = "hidden";
		scrollLayer.style.overflow = "hidden";
	}
	else
	{
		layer.style.visibility = "visible";
		scrollLayer.style.overflow = "auto";
	}
}

Mein CSS:

#allEvents
{
	position:absolute;
	top:50px;
	left:257px;
	width:673px;
	height:453px;
	background-color:#FFFFFF;
	border-style:solid;
	border-width:10px;
	border-color:#001540;
	visibility:hidden;
	z-index:1000;
}

#allEventsScroll {
	position:relative;
	width:673px;
	height:406px;
	background-color:#FFFFFF;
	overflow:auto;
}

Wird im CSS bei #allEventsScroll der overflow nicht mitgegeben, funktionierts in IE und Firefox, jedoch erscheint keine Scrollbar im Safari. Beide Versionen funktionieren im IE einwandfrei.

Gibt es einen Hack für Firefox oder mache ich was total falsch?

Also am liebsten wäre mir ein hack, welcher nur beim Safari, beim Starten der Site, den overflow auf auto stellt.

Danke
Reeko

 

[Gumbo]

Wie sieht denn das HTML-Dokument dazu aus?

 

[reeko]

Hoffe das reicht

Startseite

<div id="allEvents" class="standard">
	<?php include_once("includes/allEvents.php"); ?>
</div>

Include:

<table cellpadding="0" cellspacing="0" width="673">
		<tr align="right">
			<td><img src="/pix/arena/close.gif" border="0" onclick="showEvents()" style="cursor:pointer" alt="Fenster schliessen" /></td>
		</tr>
	</table>
	<table width="673" cellpadding="10" cellspacing="0" class="standard_Blau">
		<tr>
			<td class="tableEventList"><strong>Weitere Events</strong></td>
		</tr>
	</table>
	<div id="allEventsScroll" class="standard_Blau">
		<table width="650" cellpadding="10" cellspacing="0">
			<tr>
				<td class="tableEventList" align="left"><strong>Event</strong></td>
				<td class="tableEventList" align="center"><strong>Download</strong></td>
				<td class="tableEventList" align="center"><strong>Datum</strong></td>
				<td class="tableEventList" align="center"><strong>Beginn</strong></td>
				<td class="tableEventList"></td>
			</tr>
			<?php for ($i=0; $i<30;$i++) { echo ?>
			<tr>
				<td class="tableEventList" align="left">1. Dance- &amp; Wellnes Day</td>
				<td class="tableEventList" align="center"><img src="/pix/pdf.gif" border="0" /></td>
				<td class="tableEventList" align="center">24.06.06</td>
				<td class="tableEventList" align="center">ab 09.00 Uhr</td>
				<td class="tableEventList" align="right"><a href="#">Tickets Bestellen</a></td>
			</tr>
			<?php } ?>
	</table>
</div>

Javascipt und CSS hab ich ja oben gepostet.

Reeko

 

[Gumbo]

Gibt es das Ganze vielleicht als fertiges Dokument?

 

[reeko]

Sorry
Hier der Link zur Site.

http://bodensee-arena.netvision.ch

Bei der Auflistung Reserviren auf Alle Events anzeigen klicken.

 

[Sven Mintel]

Ändere statt der visibility die display-Eigenschaft des Layers auf none/block , dann hast du das Problem nicht.