?
Solved

Css issues with IE7 : alignment and gets hidden

Posted on 2011-03-05
4
Medium Priority
?
699 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 1200 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

719 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