zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Firefox display bug: overflow und javascript

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.08.2008, 13:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.08.2008
Beiträge: 1
Rauno befindet sich auf einem aufstrebenden Ast
Frage Firefox display bug: overflow und javascript

Hallo zusammen,
ich entwickle gerade ein Konstrukt, bei dem ein Container innerhalb eines äußeren Containers per javascript bewegt werden kann. Der innere Container enthält noch weitere gefloatete container mit overflow: auto. Das overflow auto hier ist wichtig, darauf kann ich auf keinen Fall verzichten. Leider scheint dieses overflow auto auch dafür verantwortlich zu sein, dass der Firefox (relevant sind die Versionen 2 und 3) üble Darstellungsfehler produziert.

Ich habe das Szenario in einem Testcase verdeutlicht (bitte auf Firefox 2 und/oder 3 mit Javascript testen).

Kann mir jemand einen Workaround für dieses Problem vorschlagen?

Es handelt sich eindeutig um einen Browser-Bug (https://bugzilla.mozilla.org/show_bug.cgi?id=374675).


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Overflow related display bug</title>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
	<style type="text/css">
	div#other
	{
		position: absolute;
		left: 0;
		top: 100px;
		width: 120px;
	}
	
	div#outer
	{
		position: absolute;
		left: 121px;
		top: 100px;
		width: 300px;
		height: 100px;
		border: 2px solid red;
		overflow: hidden;
	}
	
	div#inner
	{
		overflow: hidden;
		width: 6000px;
	}
	
	div.content
	{
		float: left;
		margin-left: 10px;
		width: 100px;
		heigth: 100px;
		background: green;
		overflow: auto;
	}
	
	div.content p
	{
		padding: 2px;
		color: white;
	}
	
	</style>
</head>
<body>
	<!-- script to move the inner container-->
	<script type="text/javascript">
	function moveContent(offset){
		$("div#inner").stop().animate(
			{ marginLeft:  parseInt($("div#inner").css("margin-left"))+offset+"px"},
			{	
				duration: 200
			}
		);
	}
	</script>
	
<p><a href="javascript:moveContent(-20);">Scroll left</a>&nbsp;|&nbsp;<a href="javascript:moveContent(20);">Scroll right</a></p>
<div id="other">
	<p>
	Aenean vel mi. Donec blandit mauris convallis lacus. Sed a urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus hendrerit. Curabitur libero leo, laoreet nec, lobortis in, auctor malesuada, metus. Vivamus ultrices eros eget pede. Morbi facilisis leo ut elit. Fusce viverra iaculis risus. Pellentesque posuere faucibus sem. Praesent et felis ac lorem laoreet venenatis.
	</p>
</div>
<div id="outer">
	<div id="inner">
		<div class="content">
			<p>1. Etiam pede. Sed et orci quis nulla condimentum suscipit. Fusce quam lectus, tincidunt quis, gravida vel, interdum non, quam. Phasellus nibh pede, rhoncus id, bibendum non, eleifend sit amet, dui. Integer non nibh quis magna elementum condimentum.</p>
		</div>
		<div class="content">
			<p>2. Etiam pede. Sed et orci quis nulla condimentum suscipit. Fusce quam lectus, tincidunt quis, gravida vel, interdum non, quam. Phasellus nibh pede, rhoncus id, bibendum non, eleifend sit amet, dui. Integer non nibh quis magna elementum condimentum.</p>
		</div>
		<div class="content">
			<p>3. Etiam pede. Sed et orci quis nulla condimentum suscipit. Fusce quam lectus, tincidunt quis, gravida vel, interdum non, quam. Phasellus nibh pede, rhoncus id, bibendum non, eleifend sit amet, dui. Integer non nibh quis magna elementum condimentum.</p>
		</div>
		<div class="content">
			<p>4. Etiam pede. Sed et orci quis nulla condimentum suscipit. Fusce quam lectus, tincidunt quis, gravida vel, interdum non, quam. Phasellus nibh pede, rhoncus id, bibendum non, eleifend sit amet, dui. Integer non nibh quis magna elementum condimentum.</p>
		</div>		
	</div>
</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
animieren, bewegen, darstellung im firefox, display bug, firefox bug, javascript, overflow, overflow bug

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
Abstand von 41 Pixel vor Liste display inline im Firefox ckoenig CSS 2 23.05.2009 20:53
Overflow Problem Firefox / IE SURE612 CSS 11 14.07.2006 15:40
Firefox URL Domain Name Buffer Overflow ulle Offtopic 1 14.09.2005 18:31
Problem mit Menue + overflow + firefox bernd_h_schulz CSS 0 05.06.2005 13:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:45 Uhr.