Urgent: Site Needs to be Live Wednesday!!!

Hey Zenners,

Silly me went and changed something and an elementary error occurred, but I'm having trouble with it! :blush:

On the site Endless Sonata, I changed a few sideboxes at the last moment and it messed with the padding/placement of the headers. The one in question is the "Support Center" box, on the left under "Search". Under the header there is a white gap but when I go to the stylesheet and mess with .leftBoxHeading's Padding, all the other headers get messed up when I fix this one. So can anyone help me fix it please?

Site needs to be live by this Wednesday, August 27th! Please help, heh. :blush:

Thanks,

• Jason

I don't see the white gap. I presume you fixed it?

Or perhaps it's a browser specific gap? I'm using Firefox.

Rob

I would think you'd want to focus on correcting the coding errors before worring about the CSS?

So you guys don't see the little white line below "Support Center"? I am also using FireFox.

• Jason

It's repeating the image for the Support Center image. The height
allocated to the other sidebox headers is 24px, where that one is
28 px.

Awesome, thanks. Do I fix this in CSS as well or in the HTML like the other zenner talked about?

• Jason

Don't see any white line but do see how the background image is repeating. For that you need to adjust either of these settings.

Note: changing the 'label' styling will affect other pages that use it but they will look better also with a tad smaller font size. :wink:

TShooters:

It's repeating the image for the Support Center image. The height
allocated to the other sidebox headers is 24px, where that one is
28 px.

I'm not quite sure where I would do this. If someone could tell me, that would be awesome. I understand the 4 pixel difference will stop the image from showing the repeat.

Also, Rob, where exactly do I edit the "label" tag if that is the problem?

Your CSS file is where you make your changes, for the ones suggested by TShooters & myself.

Also, if choosing to use a different size image (for whatever) it is best to resize the image on your computer, upload, then edit your CSS file and upload as well.

For TShooters reply, which line should I search for? I have been looking through CSS a lot but just can't seem to find it for some reason.

• Jason

HI! Jason!

Keep in mind that I'm no CSS guru. I just poke around in CSS, changing this and that. Backup your current CSS...make a copy...save it!

Hold my beer and watch this. This is what I'd do:

You have .leftBoxHeading in several places in your CSS.
I think they're conflicting with each other, all trying to control all
the left sidebox headings...different paddings, etc. I'd remove the one's in red...maybe add a height:16px in the last one. No idea how it will look in IE6, IE7, Opera, Safari, etc. See above
and backup! Hopefully, Glenn or Kuroi...or...HELP!

#shoppingcartHeading, .leftBoxHeading {

margin-top: 0em;

margin-right: 0em;

margin-bottom: 0em;

margin-left: 0em;

padding-top: 0.9em;

padding-right: 0em;

padding-bottom: 0.5em;

padding-left: 0em;

background-image: url([http://endlesssonata.com/catalogue/includes/templates/custom/images/top\_left\_header.gif);](http://endlesssonata.com/catalogue/includes/templates/custom/images/top_left_header.gif%29;)    

}

#searchHeading, .leftBoxHeading {

margin-top: 0em;

margin-right: 0em;

margin-bottom: 0em;

margin-left: 0em;

padding-top: 0.3em;

padding-right: 0em;

padding-bottom: 0.5em;

padding-left: 0em;

background-image: url([http://endlesssonata.com/catalogue/includes/templates/custom/images/side\_box\_header.gif);](http://endlesssonata.com/catalogue/includes/templates/custom/images/side_box_header.gif%29;)    

}

*:first-child+html #searchHeading, .leftBoxHeading {

padding-top: 0.4em;

padding-right: 0em;

padding-bottom: 0.4em;

padding-left: 0em;

}

.leftBoxHeading {

margin-top: 0em;

margin-right: 0em;

margin-bottom: 0em;

margin-left: 0em;

padding-top: 0.5em;

padding-right: 0em;

padding-bottom: 0.5em;

padding-left: 0em;

background-image: url([http://endlesssonata.com/catalogue/includes/templates/custom/images/side\_box\_header.gif);](http://endlesssonata.com/catalogue/includes/templates/custom/images/side_box_header.gif%29;)

height: 16px;
}

*:first-child+html .leftBoxHeading {

padding-top: 0.5em;

padding-bottom: 0.5em;

}

Well..it looked good on my machine using the FF Web Developer, Edit CSS thingie. :lookaroun

Hehe, thanks for your awesome help. I'm a little young to hold a beer for you but anyhows, I will try that out as soon a is have time. Store doesn't open until tomorrow but we had everything done today and I logged onto the Support Center and I have 5 people I need to constantly ping pong between.

I will let cha know if it works!

• Jason

I tried it and it didn't work. But after messing around I ended up adding

#livehelpHeading, .leftBoxHeading {
    margin-top: 0em;
    margin-right: 0em;
    margin-bottom: 0em;
    margin-left: 0em;
    padding-top: 0.3em;
    padding-right: 0em;
    padding-bottom: 0.5em;
    padding-left: 0em;
    background-image: url(http://endlesssonata.com/catalogue/includes/templates/custom/images/side_box_header.gif);    
    }
```That actually fixed it. Thanks though!

- Jason

:clap:Glad you got it fixed. Looks good!

Just a note - I see you are using the absolute URL for your background image - That is going to cause security warnings if you use SSL. You need to use relative addresses for all images.

Since custom is your template, the relative address is ../images/YOUR_IMAGE.gif

Thanks Kim, I was actually wondering about that. is it always two " . " or a " . " per a directory level up?

• Jason

Nice site. I was wondering where did you get the "Sort by:"? I have been looking all over for this option.

It came with Zen Cart default. I do believe I edited something in Configuration > MyStore or Layout Settings though.

• Jason

I can't find it anywhere. I can find the "Include Product Listing Alpha Sorter Drop down" and the "Filter Results by: Manufacturers", but I don't see an option to turn where I can sort by: Price - low to high, or Price - high to low. Does anyone know how to turn this option on?