Solved

Css issues with IE7 : alignment and gets hidden

Posted on 2011-03-05
4
685 Views
Last Modified: 2012-05-11
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?
0
Comment
Question by:dwax
  • 2
  • 2
4 Comments
 
LVL 17

Expert Comment

by:GreatGerm
ID: 35043141
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
 

Author Comment

by:dwax
ID: 35043465
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
 

Author Comment

by:dwax
ID: 35043489

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
 
LVL 17

Accepted Solution

by:
GreatGerm earned 300 total points
ID: 35054079
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now