Rollover of Category change background of row

**skinnyalbert** · 23 Sep 2007, 03:22 AM

Hello,

Hopefully I can explain correctly. I've searched the forumns to find many ansewrs. but I'm stumped.

I am building a site that has the Right Column as a solid color with the categories box included. So... I can use the CSS to change the background of the category entry (a.category-top) on hover, but we'd like to change the background of the entire row of the column. Changing the background color of just the word of the category doesn't look as nice.

Is this sort of manipulation possible? I've used the Firefox plugin to view CSS info, and am unable to locate what would control this area.

Here is the url of the site that is currenlty in a test area:

www.pishposhdesign.com/test/mewpaperarts/store

any help would be appreciated.
thanks.

**gjh42** · 23 Sep 2007, 09:56 AM

The stock code won't allow the block color change you want. Look at the Categories Dressing mod in Downloads for more control over the categories box appearance & function.

**skinnyalbert** · 24 Sep 2007, 02:34 AM

Hello,

thanks for the response. I'm going to stay within the normal Zen options for now, and just remove the change of background.

I was just checking cross platform, and am having troubles with layout on IE6. Firefox (mac and windows) and Safari are working fine. Haven't yet tried on IE7. I read about the peek a boo bug, and am unsure if that is what is happening.

I haven't looked at the site on Windows for a couple days, and am unsure when this started happening.

The issue is extra space above the header, and the main wrapper seems to have stretched throwing images all over the place.

Hopeful that an experienced Zenner can identify the issue.

Again.. any help would be appreciated.

http://www.pishposhdesign.com/test/mewpaperarts/store

thank you.

**gjh42** · 24 Sep 2007, 04:54 AM

You have an odd mishmash of parts in view source.

HTML Code:

<link rel="stylesheet" type="text/css" media="print" href="includes/templates/classic/css/print_stylesheet.css" />

</head>

<body id="indexBody">

<div id="mainWrapper">
<head>
<title>Mew Paper Arts</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<link href="css/basic.css" rel="stylesheet" type="text/css" media="all">
		<style type="text/css">

Having a new <head> etc. inside mainWrapper is wrong, and probably causing your problems. Did it come bundled with the javascript that follows it? You need to get rid of it, and perhaps work its function into the correct structure.

**skinnyalbert** · 24 Sep 2007, 03:56 PM

Hello,

I didn't think to view source. I see that my include of javascript for rollovers was creating a new header. I've added this script to the html-header.php file in common files and there is now only one <head>.

Unfortunately the display issue is still the same. Works fine on Mozilla (mac and windows), and Safari, but looses formatting in IE6 and also IE7.

Here is the link: http://www.pishposhdesign.com/test/m...tore/index.php

Thanks again for the quick response. I have a nested table in the footer based on percentages.. which I suppose could cause the footer to expand vertically, but I'm unsure why there is extra space at the top, and along the right. I don't know how to determine the CSS item responsible, since all is behaving in Firefox.

Thank you,

**skinnyalbert** · 24 Sep 2007, 06:03 PM

Hello,

Sorry. It seems the issues may have all been the HTML I inserted. I copied a few rows of code from the other pages and had colspans included that were not nescessary. My footer is fixed and I'm hoping the header will soon be as well.

Thanks again for your help. If nothing else, I learned how to correctly insert code into the header.

**gjh42** · 24 Sep 2007, 06:25 PM

That space between the logo and nav table may be caused by the tagline. You have set it to blank, but there is still an <h1> in the output which IE may be giving space to.

Comment out the entire tagline div, and that problem should disappear.

**skinnyalbert** · 25 Sep 2007, 05:40 AM

Hi Again,

I'm really close. There is a small line between the logo area and the navigation I added. I commented out the tagline, and the H1 is showing inside the comments.

Any ideas? I'm excited to load this site up and launch.
Thanks again for your help.

**skinnyalbert** · 26 Sep 2007, 12:44 AM

Hi all,

Sorry to post the same question, but it seems I have a space between my logowrapper and a table I inserted in tpl_header.php that I cannot locate.

The site appears fine in Safari, Firefox (pc & mac) but has this strange spacing in ie6 and ie7. I'm assuming this is either a margin/padding that is showing up

http://www.pishposhdesign.com/test/mewpaperarts/store

Any help / thoughts would be appreciated.

**skinnyalbert** · 26 Sep 2007, 02:52 AM

Hello,

I found away around the problem. I commented out the logo and logowrapper and just added my logo in the code at the bottom of the page.

Thanks again for all the help.

Thread: Rollover of Category change background of row

Thread Tools

Search Thread

Display

Rollover of Category change background of row

Re: Rollover of Category change background of row

Re: Rollover of Category change background of row

Re: Rollover of Category change background of row

Re: Rollover of Category change background of row

Re: Rollover of Category change background of row

Re: Rollover of Category change background of row

Re: Rollover of Category change background of row

Re: Rollover of Category change background of row

Re: Rollover of Category change background of row

Similar Threads

How can I change sub-category product listing row height?

How to Change Sub Category Picture Row to 2???

how to change background color on Category, Reviews and bestsellers sideboxes?

Rollover for .category-top .category-products

Bookmarks

Bookmarks

Posting Permissions