iFrame or JavaScript Issue?

HTML & CSS
1

I was just about to call my client letting him know I had finished his site when I added the last two elements to the site. A Facebook Like box and an AddThis toolbar. Now when I test in IE the site first loads correctly, then seems to reload and add a red section above my header. I believe the red part is caused by the 101px and -101px margins set to get a floating footer, but I don’t know how to fix it. It works fine in Firefox.

The site is online at www.mverminski.com/test at the moment. I did some googling about iFrames in IE and went through my settings and enabled them and everything. Everything worked fine in both browsers prior to adding the Facebook Likebox and the AddThis toolbar.

Please help me out.

2

I really love the site-design. It is professional, artistic, and nice:)

In regards to your problem, I can not find the iFrame?

I have had similar issues with the one you are describing and think that I can help.

Is it the facebook Like button? That opens an iFrame and works fine for me in IE, Firefox, and chrome.

3

Thanks for the kind words. It’s the first site I have done for a client since getting my Associates in Web Design. I got some help with some of the CSS positioning on here a few weeks ago.

Yes, the Facebook box is an iframe and I had a few of my friends look at it and they said it looked fine in their IE browsers as well. I wonder if it’s somehow just an issue with whatever version of IE I am running. I’m not really sure.

4

Hi, It’s probably the AddThis widget adding an iframe at the top of the page and breaking things.

See if my solution in this thread solves the problem.

5

Hi,

Just had a look at the page and it is the addthis widget causing problems as it is inserted at the top of the page.


<body>
<div [B]id="_atssh" [/B]style="visibility: hidden; height: 1px; width: 1px; position: absolute; z-index: 100000;">
    <iframe src="xxx//s7.addthis.com/static/r07/sh29.html#" style="height: 1px; width: 1px; position: absolute; z-index: 100000; border: 0pt none; left: 0pt; top: 0pt;" id="_atssh910"></iframe>
</div>
<div id="container">

It seems you can fix it in IE7 by using the following style but you will have to check it causes no ill effects to the working of the widget.


*+html body div#_atssh{
position:relative!important;
float:left;
margin-right:-100%;
}

Unfortunately, and I have no reason why, they have used an id with an underscore in the html.


<div id="_atssh"

That means that the element cannot be targeted via IE6 and can receive no styling because it ignores the underscore in the css and then doesn’t recognise it in the html.

You should complain to addThis as the code should not break a layout like that.

6

Furthermore it is illegal in HTML 4.01 to have an ID beginning with an underscore but not in XHTML 1.0.

7

I added that code to my CSS and it didn’t seem to fix the problem I was having. I’m not sure what version of IE is installed on my computer, but I cannot see the issue on other computers in my house. I think I might remove the AddThis widget and look for an alternative that doesn’t cause this problem just to be safe.

I don’t want to take the chance of someone going to the site and it not displaying correctly.

8

I can’t see that code in your CSS and I can still see the problem in IE7. I tested the code I gave you locally and it seemed to work for me. Add it to your CSS and I’ll take another look.

9

That’s because I removed it because it didn’t seem to do anything, but I’ll add it back in and try again.

10

Ok, let me know when it’s done and I’ll take a look.:slight_smile:

It may not make a difference of course but at least it’s worth trying again.

11

I added that CSS back into my stylesheet and the original problem has disappeared so thank you very very much, but a new one has arisen. The Facebook Like Box is positioned in correctly on each page as you can tell by looking at the site on my test server. http://www.mverminski.com/test

If you view the site with FF everything looks correct, but of course IE has to make things difficult and I’m not experienced enough to understand how to solve this problem. Hopefully I can get some help soon because my client finally purchased his hosting so he expects the site online very soon. Thank you.

12

Disregard. I added

position:inherit;

to the CSS for the Like Box and all seems to be working well now. Thanks so much for your help this is my first client and he seems to be very pleased with my work.