Css issues with IE7 : alignment and gets hidden

I am running into problems with css in IE7. It works in Firefox, Chrome, Opera and IE8,
but IE7 makes a mess out of it. The button is not aligned 50% from top and right at 0.
And it hides itself under the div that has the visibility changed.
Does any of  you know what's the problem is?

The url is: http://www.derekscholte.nl/dev/client_index_v14.php

IE6 makes even a bigger mess of it, is suspect it just doesn't support
all the css, any advice on this?


Another note: Chrome and Opera show a white flickr in the main div, it looks like
it takes a while for the div or the overall iframe to become transparent? Any thoughts on this?
dwaxAsked:
Who is Participating?
 
GreatGermConnect With a Mentor Commented:
IE6 and IE7 are definitely their own animals, but most of their quirks can be overcome by using good explicit code.  Your CSS is the example is somewhat of a mess.  For example, you have a combination of in-line and stylesheet CSS declarations, and you are declaring 100% height and width of elements, but not setting the parent height and width. Also, I see no z-index declarations and it appears you are relying on the handling of an iframe to put it where you want.

As a quick example, try the following code:
<html>
	<head>
		<style type="text/css">
		#float{
			position:absolute;
			z-index:2;
			top:50%;
			right:0;
			width:40px;
			height:40px;
			border:1px solid #000000;
		}
		</style>
	</head>
	<body>
		<div id="float">
			Stuff
		</div>
	</body>
</html>

Open in new window

0
 
GreatGermCommented:
All of your symptoms stem from the same issues.  You're all over the board with the height and width of your divs that are part of your widget.  The "flicker" that you see is because the div that contains the iframe is set to 100% height and 50% width so as the iframe loads you will see a white background before it changes to transparent.  Unfortunately, even when transparent, the iframe interferes with interaction of the content below. Fixing the height/width of the divs/iframe to the correct values and setting a z-index higher than your content will take care of most of your issues.

On a side note, why are you doing this via an iframe?  It seems like something that can be easily done with just the floating div.

0
 
dwaxAuthor Commented:
Thanks for your reply.

I don't understand what the height and width of the divs have to do with the wrong alignment in IE7?
And the div that holds the button has the highest z-index possible.

I have to do this in an iframe other wise I will run into cross-domain issues.
0
 
dwaxAuthor Commented:

About the z-index: I've google it a bit more and it looks like there is a bug in IE7 regarding to handling z-index.
The trick should be giving the parent element a higher z-index then the child...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.