Hi everyone and Paul…
Paul helped me with my sticky footer. But I somewhere made a mistake while I was adding my social media icons I think and now I have a huge margin in IE6 ON TOP. Here is the screen shot.
And the link to my page is http://www.rajeevthomas.com
Can you please help me to find out the problem… ?
Thank you…
It’s one of your scripts as the css on its own is rendering ok.
It’s probably the addthis script as that always seems to cause issues. Try removing it and see if the problem goes away.
I have addthis on my page. It’s at the top on mine. I put it at the bottom of the HTML and absolute positioned it to the top. That sped up the loading of my page. And would prob remove your gap.
Hi guys!!
@Paul Thank you so much! You are so right! That was the problem… I had a similar problem before…and I forgot it already… I must remember things I learn here. Start making a note system today!.
@Eric…thank you very much… I am going to try what you said…
Eric… I am a bit confused… “I put it at the bottom of the HTML and absolute positioned it to the top.”…how do I absolute position it to the top? Do you have a link to the page you mentioned?
Also @ Paul and @ Eric… I have my media icons in my footinner and I used the CSS below… am I doing this right ? I used a relative positioning…should I use padding to position this element?
.medialinks {
position:relative;
left:80px;
top:-50px;
}
.medialinks {
position:relative;
left:80px;
top:-50px;
}
<div class=“footer”>
<div class=“footinner”>
<div class=medialinks><div class=“addthis_toolbox addthis_default_style addthis_32x32_style”>
<a class=“addthis_button_preferred_1”></a>
<a class=“addthis_button_preferred_2”></a>
<a class=“addthis_button_preferred_3”></a>
<a class=“addthis_button_compact”></a>
<a class=“addthis_button_facebook_like” fb:like:layout=“button_count”></a>
</div></div>
<div id=“seeker”>
<form name=“seeker” id=“seeker” action=“searchmyway.php” method=“get”><input type=“text” name=“q” id=“search”/>
<input type=“submit” id=“find” value=“Search” />
<input type=“hidden” name=“form_id:search” value=“1” />
</form></div></div>
<p class=“footnote”>All content and website by Rajeev Thomas. All rights reserved. All © by Rajeev Thomas. </p>
</div>
Eric may need to answer that as it seems to me that the Javascript is inserting the code at the top of the html by default. It also uses an ID that IE6 can’t target because it is invalid.
e.g. id="_atssh
<div id="_atssh" style="visibility: hidden; height: 1px; width: 1px; position: absolute; z-index: 100000;"><iframe src="http://s7.addthis.com/static/r07/sh56.html#" style="height: 1px; width: 1px; position: absolute; z-index: 100000; border: 0pt none; left: 0pt; top: 0pt;" title="AddThis utility frame" id="_atssh762"></iframe></div>
Also @ Paul and @ Eric… I have my media icons in my footinner and I used the CSS below… am I doing this right ? I used a relative positioning…should I use padding to position this element?
.medialinks {
position:relative;
left:80px;
top:-50px;
}
Usually you would use margins but I think you can get away with relative positioning in this instance. You will very rarely need relative positioning because it doesn’t actually move anything physically. It just makes elements look as though they are somewhere else but they still take up the same space on the page that they originally did and leave holes in the page that can’t be filled.
Hello. You don’t have Absolute position it. Just an idea I used for speed. But if your code used is the same as mine (looks as though it is) then addthis code snippet consists of some HTML and the accompanying script. I just AP’d the the HTML to the top (aka <div class=“addthis_toolbox”></div>) and the script just does it’s job a few milliseconds later when the browser gets to it.
But looking again at your page your addthis is visually at the bottom to begin with so AP’ing it should not be necessary.
Paul… thank you… I am gonna use margins then.
Is there any way to solve this issue with addthis? I tried moving the script but it doesn’t make any difference…? Are there any tutorial there about adding custom social media icons? Are there other tools like “addthis” ? What is the most common way of adding social media icons?
I tried for a long time this morning and cold not find what ie6 doesnt like about it. I even tried my addthis code and still the gap. You could try another addthis like cpmpany or try and see if the addthis forum could solve http://www.addthis.com/forum/
Eric… thank you for spending your morning trying that. I asked this question in the JavaScript forum here and also at the addthis tool forum from yesterday but no answers yet… I will give sometime and I might have to remove them, then approach it with just links. And just get the facebook “like” button from facebook itself which seems to have no problem on my site…thanks again guys for helping me.
Your welcome sorry I couldn’t find the fix. Tried everything! Ya know I don’t think the addthis icons go to well with your site anyways. If you google “social icons” you can see many other icons that would look nicer (in my humble opinion). Once before I had a iframe that was doing that to my ie6. But unfortunately targeting iframe didn’t seem to fix it either.
Are a large part of your audience IE6 users? Why not drop support for it?
Only around 2-3% prob. Many have dropped it. You could try just display none for ie6 and see if that stops it.
sdt76 and Eric… I now noticed that IE7 shows the same problem! :-(( So I decided to avoid this “addthis” tool for now. If it was just IE6 I would have dropped the support it. But I know Eric is right about , how the icons look on my site…so I am going to just stick with different icons and links without the JavaScript… thank you so much for being patient with and for your time!.