No replies
ericc
Offline
newbie
Last seen: 18 years 4 weeks ago
Joined: 2004-11-05
Posts: 1
Points: 0

Hello there,
I have a problem with the positioning of a pop box within a scroll box because of diferences in Safari (Mac)/Netscape(Windows) and I.E.6 (Windows)

Stylesheet has the following:

#box {
	width: 675px;
	padding: 0px;
	text-align: left;
	overflow: auto;
	height : 450px;

... to take care of leaving the navigation on top and on the left, but large content pages have a scrollbar.

On the index page however I want to have a pop-box that is exactly on top of another image.
It's an advertising box that is shown and disapears automatically. It has the following child stylesheet (only for this page):

<div 
	id="BetterThanPopup"
	style="
		/*top: 55px; 
		left: 113px;*/
		top: 156px; 
		left: 230px; 
		width: 449px; 
		height: 294px;
		padding: 0;
		position: absolute;
		z-index: 1; 
		visibility: hidden;">

<a href="http://www.linkpage.xml" 
	target="_self" onClick="setTimeout('CloseNoKillPopBox()',3000)">
<img src="/gfx/PlisseTest.jpg" alt="ga direct door naar de plisse pagina's !" width="449px" height="294px" border="0" />
</a>
</div>

The "top: 156px;" and the "left: 230px;" coordinates are OK in Safari(Mac) and Netscape(Windows) but incorrect in I.E.6(Windows) where, probably because of "box DIV" the position is "top: 55px;" and "left: 113px;".
Clearly the coordinates are calculated from the "box DIV" (Outer DIV) in I.E.6 where Safari calculates the coordinates from the whole browser window.
I can't use any other option then the "absolute" positioning because it should fall over some images that are exactly underneath...

I tried "clear: both;" and also the following:

<!--[if IE]>
<style>
div.BetterThanPopup {
		top: 55px; 
		left: 113px; 
		width: 449px; 
		height: 294px;
		padding: 0;
		position: absolute;
		z-index: 1; 
		visibility: hidden;
		}
</style>
<![endif]-->

but neither solve the problem.

The navigation buttons which are on the top of the page are 777px wide and 100px high from the top of the browser window. The left collumn dimensions are aproximitly 158px wide and 570px tall from the left and top of the browser window...

How do I solve the browser compatibility between I.E.6(Windows) and Netscape(Windows)/Safari(Macintosh)..?

Thanks a lot.
Kind regards,
Eric