sidebox_middle.gif shows up in wrong place after item added

Hello all,

Just finished working on graphics and stuff for my site below.. however, there's a graphics bug... Linky: http://www.vidabox.com/shop/

The page looks fine when loaded. Add one of the VidaBox's into the cart. The cart shows the VidaBox, but now, the sidebox_middle.gif graphic shows up below the "shopping cart," and above "notifications." Why?? It should be blank!

I'm building this off of Kuroi's Future Zen template.. maybe this is a bug with the template?

Halp!! :(

~MMN Maniac

I'm not seeing that when viewing with FireFox - but I am seeing the Zen Cart logo over your header.

Kim:

I'm not seeing that when viewing with FireFox - but I am seeing the Zen Cart logo over your header.I too am using Firefox. Did u add an item in the cart first? It ONLY shows up when you have an item in the cart.

I just tried using IE, and IE makes the spacing between "cart" and the next box down disappear, and also messes up the horizontal alignment of the background elements in the right-hand column boxes.

Yes, the zencart logo is still there. I'm not 100% finished yet, just finished the buttons earlier..

Thanks!

~MMN Maniac

I'm with Kim on this...I added an item continued to shop and in my right side I have;
search; shopping cart; notifications; tell a friend; currencies.

Unless I am not understanding what ", but now, the sidebox_middle.gif graphic" is...I would say that I am not seeing it.

kobra:

I'm with Kim on this...I added an item continued to shop and in my right side I have;
search; shopping cart; notifications; tell a friend; currencies.

Unless I am not understanding what ", but now, the sidebox_middle.gif graphic" is...I would say that I am not seeing it.
"sidebox_middle.gif" is the name of the element that is strangely showing up, as named in the Future Zen template from Kuroi.

ok, i've made some screenshots and circled the oddities:

Normal, with no items

Item added, in IE

Item added, in Firefox

Why is it getting screwed up?

My CSS sheet is at: https://www.vidabox.com/shop/includes/templates/vidabox-2.0/css/stylesheet.css if you're interested in seeing what i did wrong.

I've played around with this for hours, and I still can't figure it out!! :(

~MMN Maniac

OK I am not exactly sure this is the solution, however I reckon you need to concentrate here

line 498 of your style sheet

.leftBoxContainer, .rightBoxContainer {
	background-image:url(../images/sidebox_middle.gif);
	background-repeat:repeat-y;
	margin-top: 1.5em;
	}

I would concentrate on .rightBoxContainer, without having access to the images and the page it would be trial and error on my part but I would try setting repeat-y; to no-repeat for kicks and see the effect. If it appears to make some difference then try various combinations here, even removing ```
, .rightBoxContainer

By the way, it looks amazingly good great job!

MMN Maniac:

maybe this is a bug with the template?
Hey. Wash your mouth out :no:.

Firstly, I really like what you're doing with the template. It's great to see such an imaginative adaptation. I'll be watching with interest to see what else you do.

OK. What's the problem? Well ... and I say this with some hesitation. I believe that this is a Zen Cart bug. It would appear that the content generated by the tpl_shopping_cart.php template file is missing a </div>. As a result the shopping cart div wraps around all the boxes below it and the middle.gif is visible in what should be empty space between the boxes. That's just the shopping cart and currency box for you, it's a lot more in my test system!

How is this fixed. Well happily it's a bug in a template file so just create a directory called sideboxes in your template directory and drop the following file Attachment #55 (unzipped of course) into the new directory. Then upload to your server and refresh.

LOL.. ::gargles in listerine::

i will try this tonight and report back!! Thank you!

::bows in gratitude::

~MMN Maniac

hmm.. it fixed the bug that caused the oddity to show up AFTER the item is added.. it looks beautiful in Firefox, but in IE, the oddity now appears by default, BEFORE anything is even added!

Very odd. I just dont see it in firefox, but it definitely shows in IE.

Also, I've moved the "Shopping Cart" sidebox up one, thinking that it affects the sidebox above. There was no effect.

Then, I turned off the search sidebox. The oddity did not show up anymore.

Next, i turned it back on, and moved it to the left. The oddity remains, as shown on the page now: http://www.vidabox.com/shop (Use IE!!)

I think it's safe to say that something's up with the "Search" sidebox itself... I'd love to troubleshoot and wished that i could debug and help code, but I'm actually a mechanical engineer by training and started doing web stuff for fun on the side :p

Anyways, I think this is something worth investigating, for everyone's benefit. I've left the "search" sidebox "on" for now in the interest of having you guys look at it, but if it can't be resolved, I guess I'll just have to leave it off and just tell people to just the one in te upper right hand corner.

BTW, how do you move the banner ABOVE the "Home | Log In | Shopping Cart" deal? I found some links, but they were all broken. I started another thread, but no one replied :p

Thanks folks!

~MMN Maniac

MMN Maniac:

hmm.. it fixed the bug that caused the oddity to show up AFTER the item is added.. it looks beautiful in Firefox, but in IE, the oddity now appears by default, BEFORE anything is even added!
I think that these are separate issues. The search box issue is present even when the shopping cart box is completely turned off.

I'm going to layout the process whereby I resolved this in the hope that it will prove helpful.:wink2: I hope you'll take it in the right way - and it comes with the reminder that I think you're doing some interesting things with this template that make me so pleased to have created the original.

Let's go ...

Interestingly, I cannot reproduce this problem at all using the default Future Zen template in my test environment. I have had to reconstruct your template to force the problem. This tells me that something has changed between your version and mine. That's clue 1.

Clue 2 comes from the fact that there is a problem whether you view your site in IE or FF. It just manifests differently. In IE it makes its presence known by pushing your bottom image out of alignment by 1px. In FF it adds some extra space between the box heading and the content.

Clue 3 comes from the fact that this only affects the search box.

Working backwards, the only thing unique to the search box is the form that it contains. Clue 2 says that both IE and FF are having trouble fitting the content into the space provided. Tracking through the stuff you've changed with clue 1 in mind, the thing that leaps out at me is that you've increased the padding (which is entirely appropriate).

Ahh you say. but this applies equally to all the sideboxes so why is it only a problem for this one. That's brings us back to clue 3. A search of the stylesheet for anything to do with forms reveals that they get an extra 0.1em of margin. Ouch, in this setup that's just one extra pixel all round! You were sooo unlucky.

Solution: add an extra line of CSS to specifically remove the margin from forms in sideboxes.

.sideBoxContent form {margin:0}
If you wanted you could be even more specific and target it to #searchContent instead.:thumbsup: