Forums / Templates, Stylesheets, Page Layout / Image acting weird on one page only

Image acting weird on one page only

Views: 928

Results 1 to 13 of 13
6 Jun 2011, 7:21 PM
#1
kamelion0927 avatar

kamelion0927

Zen Follower

Join Date:
Dec 2009
Posts:
208
Plugin Contributions:
1

Image acting weird on one page only

I have a newsletter subscribe form in my footer that stays where it's supposed to on every other page other than the empty shopping cart page. In firefox, it just moves up a few pixels but in IE, it is on a completely different footer and moves up many ems.

I've gone over and over the template, source code and css for my shopping cart page, but can't locate the issue.

Would someone mind taking a quick peek at theburningbutterfly.com/shop/index.php?main_page=shopping_cart and see if you can point me in the right direction of what I need to fix?

Thanks in advance.

6 Jun 2011, 7:33 PM
#2
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Image acting weird on one page only

Do you have any files in your template in a folder named "shopping_cart"
If so what is/are they

Zen-Venom Get Bitten

6 Jun 2011, 7:55 PM
#3
kamelion0927 avatar

kamelion0927

Zen Follower

Join Date:
Dec 2009
Posts:
208
Plugin Contributions:
1

Re: Image acting weird on one page only

Thanks for replying. The only folder in my template with the name shopping_cart is info_shopping_cart.

6 Jun 2011, 8:04 PM
#4
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Image acting weird on one page only

Looks fine in IE8

Zen-Venom Get Bitten

6 Jun 2011, 8:23 PM
#5
kamelion0927 avatar

kamelion0927

Zen Follower

Join Date:
Dec 2009
Posts:
208
Plugin Contributions:
1

Re: Image acting weird on one page only

That's so weird 'cause this is what I get in IE8:

7 Jun 2011, 12:46 AM
#6
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Image acting weird on one page only

Try re-ordering the display in the file as currently is is being parsed first but displayed last
And there seems to be a mis match on the number of opening and clopsing div tags for the set of entries

<div id="footer">
<div id="footerTopWrapper">
<div id="subscribeWrapper">
	  <div id="subscribeForm">
      <form name="subscribe" action="https://www.theburningbutterfly.com/shop/index.php?main_page=subscribe" method="post"><input type="hidden" name="act" value="subscribe" /><input type="hidden" name="main_page" value="subscribe" /><div>id="subscribetopText">Don't miss a single Special Offer or Savings Event!</div><div id="subscribeEnter"><label><input type="text" name="email" size="15" maxlength="200" style="width:175px; height:20px; font-size:12px; padding-left:2px;" value="get email offers and updates" onfocus="if (this.value == 'get email offers and updates') this.value = '';" /></label></div><div id="subscribeButton"><input type="image" src="includes/templates/alysa_rounded/buttons/english/button_subscribe_top.gif" alt="Subscribe" title=" Subscribe " value="Subscribe" onfocus="this.blur()" /></div></form>
	  </div>
<div id="subscribeImg"><img src="images/images/newsletter.gif" alt="Subscribe to our Newsletter"/></div>

</div>
<div id="socialWrapper">
<div id="followUs"><img src="images/images/fu.gif" alt="Follow us on Facebook and Twitter"/></div>
<div id="twitter"><a href="//www.twitter.com/burnbutterfly" target="_blank" onfocus="this.blur()"><img src="images/images/twitter.png" alt="Follow The Burning Butterfly on Twitter" /></a></div>
<div id="facebook"><a href="http://www.facebook.com/pages/The-Burning-Butterfly/101381953239516" title="The Burning Butterfly" target="_blank" onfocus="this.blur()"><img src="images/images/facebook.png" alt="Join The Burning Butterfly on Facebook" /></a></div>
<div class="footerBlank"><img src="images/images/blank.gif" alt=""/></div>
<div id="green"><img src="images/images/windpowered.gif" alt="We use a webserver powered by 300% community supplied windpower!"/></div>
<div class="footerBlank"><img src="images/images/blank.gif" alt=""/></div>
<div id="animal"><img src="images/images/noanimaltesting.gif" alt="No animal testing is done on our products."/></div>
<div class="footerBlank"><img src="images/images/blank.gif" alt=""/></div>
</div>
</div>

Zen-Venom Get Bitten

7 Jun 2011, 2:42 AM
#7
kamelion0927 avatar

kamelion0927

Zen Follower

Join Date:
Dec 2009
Posts:
208
Plugin Contributions:
1

Re: Image acting weird on one page only

Thanks for catching that - there were quite a few empty tags from a mod that I'm only using part of. Now that I've removed those files (and rearranged the footer elements to match their sequence), the page will validate all except for a missing </form> tag that isn't missing.

I went back through and made sure that my shopping cart template matched those mods that made changes to it, and the end form tag is there.

As it's the last error (CSS or HTML), it must be what's causing the issue. How do I get the closing </form> tag to be recognized?

7 Jun 2011, 3:15 AM
#8
kamelion0927 avatar

kamelion0927

Zen Follower

Join Date:
Dec 2009
Posts:
208
Plugin Contributions:
1

Re: Image acting weird on one page only

Aha! It was that stupid form end tag. I validated my HTML through W3C and used the corrected code that they provide to find where the </form> needed to go to be recognized and it fixed my alignment issue.

Thanks so much for all your help! I learned a lot.

7 Jun 2011, 6:43 AM
#9
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Image acting weird on one page only

I validated my HTML through W3C
As ZenCart valadiates out of the box
Any errors will be those added
Most do not take the time to validate....and have pages full of errors

Zen-Venom Get Bitten

7 Jun 2011, 3:03 PM
#10
kamelion0927 avatar

kamelion0927

Zen Follower

Join Date:
Dec 2009
Posts:
208
Plugin Contributions:
1

Re: Image acting weird on one page only

I learned about W3C through other posts and it has saved me tremendous amounts of time. I installed the Web Developer add-on for Firefox which has the CSS and HTML validations on its toolbar.

Hopefully someone else will read this thread and figure out that it's easier to fix what you messed up if you know where the error is (especially if you're not getting any errors in the debugging utility).

Thanks again!

7 Jun 2011, 3:08 PM
#11
kamelion0927 avatar

kamelion0927

Zen Follower

Join Date:
Dec 2009
Posts:
208
Plugin Contributions:
1

Re: Image acting weird on one page only

Sorry I meant CSS and HTML validation tools. :smile:

7 Jun 2011, 3:13 PM
#12
Kim avatar

Kim

Obaa-san

Join Date:
Jun 2003
Location:
West Coast, North America
Posts:
26,684
Plugin Contributions:
0

Re: Image acting weird on one page only

Kamelion -

Thanks for taking the time to use the tools and explain how you fixed the problem with your footer. You may have helped someone else to find and fix their display problem.

Please do not PM for support issues: a private solution doesn't benefit the community.

Be careful with unsolicited advice via email or PM - Make sure the person you are talking to is a reliable source.

7 Jun 2011, 11:43 PM
#13
kamelion0927 avatar

kamelion0927

Zen Follower

Join Date:
Dec 2009
Posts:
208
Plugin Contributions:
1

Re: Image acting weird on one page only

My pleasure! I can't give back nearly as much as I've gotten from this forum so it's nice to be able to post a fix that I'm sure a lot of us newbies run into.