Forums / General Questions / Banner Sidebox not displaying right in IE

Banner Sidebox not displaying right in IE

Locked

Views: 1,074

Results 1 to 5 of 5
This thread is locked. New replies are disabled.
23 Jan 2010, 6:57 PM
#1
drysdaleandco avatar

drysdaleandco

New Zenner

Join Date:
Aug 2009
Posts:
11
Plugin Contributions:
0

Banner Sidebox not displaying right in IE

Hi there,
I've tried for hours to figure out why my banner sidebox is displaying fine in Firefox and Chrome but is not displaying properly in IE.
My webstie is www.d r y s d a l e a n d c o.com . I'm using V1.3.8
The sidebox in question is on the right side, bottom box, with the social media links.

This is the code I'm using in the HTML text field for the banner:

<a href="http://drysdaleandco.##########################/" target="_blank"><img title="Drysdale & Co Blog" src="http://www.drysdaleandco.com/images/blogger-icon" contenteditable="false" height="35" width="35"></a>
<a href="http://www.facebook.com/drysdaleandco" target="_blank"><img title="Drysdale & Co on Facebook" src="http://www.drysdaleandco.com/images/facebook-icon" contenteditable="false" height="35" width="35"></a>
<a href="http://twitter.com/drysdaleandco" target="_blank"><img title="Drysdale & Co on Twitter" src="http://www.drysdaleandco.com/images/twitter-icon" contenteditable="false" height="35" width="35"></a>
<a href="http://www.polyvore.com/cgi/profile?.mid=badgecolor&id=781117" target="_blank""><img title="Drysdale & Co on Polyvore" src="http://www.polyvore.com/cgi/img-colorbadge?.out=png&count=5&src=item_stream&uid=781117" border="0" height="60" width="122"></a> <br></br><br></br>

<!-- BEGIN: Constant Contact Stylish Email Newsletter Form --> <div align="centre"> <div style="width:120px; background-color: #660099;"> <form action="http://visitor.constantcontact.com/d.jsp" style="margin-bottom:3;" target="_blank" name="ccoptin" method="post"><span style="background-color: #660099; float:right;margin-right:5;margin-top:3"><img border="0" alt="Email Newsletter icon, E-mail Newsletter icon, Email List icon, E-mail List icon" src="http://img.constantcontact.com/ui/images1/visitor/email1_trans.gif"/></span> <font style="font-weight: bold; font-family:Verdana; font-size:10px; color:#FFFFFF;">Join our Mailing List</font> <input style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10px; border:1px solid #999999;" value="" name="ea" size="20" type="text"/> <input style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px;" value="GO" class="submit" name="go" type="submit"/> <input value="1102312378738" name="m" type="hidden"/> <input value="oi" name="p" type="hidden"/> </form> </div> <!-- END: Constant Contact Stylish Email Newsletter Form -->

I have attached screenshots of how it looks in IE (messed up) and in Firefox (correct)

Is it a stylesheet issue? Something wrong with my code? I'm stumped.

And ideas would be appreciated.
Susan

23 Jan 2010, 9:10 PM
#2
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Banner Sidebox not displaying right in IE

Your html has a problem.

<!--// bof: bannerbox2 //-->
<div class="rightBoxContainer" id="bannerbox2" style="width: 135px">
<h3 class="rightBoxHeading" id="bannerbox2Heading"></h3>
<div id="bannerbox2Content" class="sideBoxContent centeredContent"><a href="http://drysdaleandco.##########################/" target="_blank"><img title="Drysdale & Co Blog" src="http://www.drysdaleandco.com/images/blogger-icon" contenteditable="false" height="35" width="35"></a>
<a href="http://www.facebook.com/drysdaleandco" target="_blank"><img title="Drysdale & Co on Facebook" src="http://www.drysdaleandco.com/images/facebook-icon" contenteditable="false" height="35" width="35"></a>
<a href="http://twitter.com/drysdaleandco" target="_blank"><img title="Drysdale & Co on Twitter" src="http://www.drysdaleandco.com/images/twitter-icon" contenteditable="false" height="35" width="35"></a>
<a href="http://www.polyvore.com/cgi/profile?.mid=badgecolor&id=781117" target="_blank""><img title="Drysdale & Co on Polyvore" src="http://www.polyvore.com/cgi/img-colorbadge?.out=png&count=5&src=item_stream&uid=781117" border="0" height="60" width="122"></a> <br></br><br></br>

<!-- BEGIN: Constant Contact Stylish Email Newsletter Form -->
<div align="centre">
<div style="width:120px; background-color: #660099;">
<form action="http://visitor.constantcontact.com/d.jsp" style="margin-bottom:3;" target="_blank" name="ccoptin" method="post"><span style="background-color: #660099; float:right;margin-right:5;margin-top:3"><img border="0" alt="Email Newsletter icon, E-mail Newsletter icon, Email List icon, E-mail List icon" src="http://img.constantcontact.com/ui/images1/visitor/email1_trans.gif"/></span>
<font style="font-weight: bold; font-family:Verdana; font-size:10px; color:#FFFFFF;">Join our Mailing List</font>
<input style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10px; border:1px solid #999999;" value="" name="ea" size="20" type="text"/>
<input style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px;" value="GO" class="submit" name="go" type="submit"/>
<input value="1102312378738" name="m" type="hidden"/>
<input value="oi" name="p" type="hidden"/>
</form>
</div>
<!-- END: Constant Contact Stylish Email Newsletter Form --></div></div>
<!--// eof: bannerbox2 //-->

In this block four <div> are opened and three </div> are closed.

Nick
iszent.com

24 Jan 2010, 9:20 PM
#3
drysdaleandco avatar

drysdaleandco

New Zenner

Join Date:
Aug 2009
Posts:
11
Plugin Contributions:
0

Re: Banner Sidebox not displaying right in IE

Thanks Nick.
I still can't figure it out. Tried adding the </div> tag in a few places in the code, to various results, but nothing fixes the way it is displaying in IE.
I tried taking all the code out and just putting this code in the HTML text field in the admin>tools>banner manager area

<a href="http://drysdaleandco.##########################/" target="_blank"><img title="Drysdale & Co Blog" src="http://www.drysdaleandco.com/images/blogger-icon" contenteditable="false" height="35" width="35"></a>

And still the box is messed up,in IE, as per the original screenshots I posted.

Then I tried adding the editable sidebox app (http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_52&products_id=686 ) to start all over from scratch and add this content in a new sidebox but still the same problem persists in IE.
I just can't see where I'm going wrong:frusty:

24 Jan 2010, 9:39 PM
#4
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Banner Sidebox not displaying right in IE

OK. Well you need to validate your html. Boring but true. Use :

http://validator.w3.org/

You get a lot of errors but a lot of those are the fact that you are using '&' instead of '&' which just needs to be changed. (And also spelling center correctly is an error!)

Then work your way through it until it validates. There is a cluster of errors in that area so I am sure that you will get there !

Also errors tend to disappear in groups because one the html is out of kilter the following html looks wrong to the validator too. So, don't be discouraged - just approach it systematically and you'll get there before you know it. Well, OK you might be pretty irritated but you have to do this at some point anyway...

Nick
iszent.com

25 Jan 2010, 2:17 AM
#5
drysdaleandco avatar

drysdaleandco

New Zenner

Join Date:
Aug 2009
Posts:
11
Plugin Contributions:
0

Re: Banner Sidebox not displaying right in IE

Fixed it.:clap:
It turns out that it was not the new banner box or the new editable sidebox that I just installed that was the problem.
The blank sidebox above with the sercurity message was missing a closing </a> at the end of the image reference.
It had never presented itself as a problem before as there was nothing sitting below it until I added the new box.
I knew it was going to be an annoying little thing that needed to be repaired but I was looking in all the wrong places. LOL!
Thanks Nick, for pointing me in the right direction.
Susan