Solved

Css issues with IE7 : alignment and gets hidden

Posted on 2011-03-05
4
691 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

808 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