Solved

Css issues with IE7 : alignment and gets hidden

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
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 …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

729 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