New Products display Issue

[Dusky]

Hey Josh - does this do anything for you, in part at least...
Message 4?
(Its a 2005 thread, so checking for something more current).

http://www.zen-cart.com/forum/showth...cts+stylesheet

Actually - in edit mode here.. sorry....

Check this out.
http://www.zen-cart.com/forum/showth...cts+stylesheet

[joshlfisher]

Thanks for the link! I tried it, but it didn't do anything.

[Dusky]

Okay.. dammit.

It's gotta have something to do with the way the div is sized within the box. You can see that it doesn't go full width inside the box. The exterior of the container is larger than the div inside the container.
You can see the div is aligned to float left already - perhaps we just need to add a width to the div. If there isn't a div with a width already there - add one and try that.

Is there a guru out there who can put a dent in this thing? There's working things out and then there's messing with people's heads. We all know what it's like to get stuck (and I'm sure Josh is soooo close I can smell it).

Please put us out of our misery!

What's the answer here please????

[joshlfisher]

It's actually not THAT big of a deal. Yes, I would like to fix it, and I'll keep persisting until I do, but it doesn't need to be tonight.
Anytime in the next two days will work fine as well!

[kuroi]

A very quick review of the problem suggest that this a "box model problem". Your pictures are contained within boxes which have width 20% of the overall center box.

However the following CSS adds padding and thus expands the width of those boxes slightly, causing one to overflow from the end of the line.

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {

text-align: center;
padding: 5px;

}

Rather than adding padding to all these IDs and classes which are intended to do no more than center the contents. I recommend removing the line in red and instead adding padding only to the specific IDs and classess where you really want it.

This will certainly clear your problem in Firefox and hopefully IE7. You may still run into an IE6 bug, but if you make the change we will be able to see and there is a small code change that can be put in place to deal with that if it happens.

[joshlfisher]

Got it! Thanks everybody!
Removing that line fixed the problem! Hurray!

[Ajeh]

Knew all you needed was one of those designer types to come whizzing along and work their magic ...

Too bad I can never remember how to do that stuff so they make me write code ...

Back off to my little cell now ... thanks for letting us know your have this fixed ... just a little flick of the wrist and voila ...

[joshlfisher]

I'm looking forward to helping someone fix THEIR problem, when I know the answer!

[Dusky]

Bewdiful! Looks great too. :)
Nice one kuroi.

Joy!