Stylesheet Issues - EZ Pages

[meadwench]

Hi all,

Well, several days of fruitless searching, plus lots of changes to the several stylesheets I seem to have accumulated, and my website: http://www.play2winbilliards.com is still having issues.

Can someone put me out of my misery and help me standardize my menu? The one that needs help is the left side top box.

You can see that its:

1. Too wide. I've set the column width in both the css and the zen cart settings
2. In Firefox and IE both, it jiggles when you mouse over it. I have *no* idea where this is coming from.

Basically, I want the look and feel to match my categories box, which is using Better Categories. I've tried copying the settings for Better Categories over to the EZ pages css, but no luck there.

I know I should merge my various css files (there are now 5, ::sigh::), because I know they're stepping all over each other.

Is there any hope for me? I've tried looking at the source code to get the id's, but changing them doesn't seem to fix anything.

If anyone can offer a suggestion or two, I'd be pathetically grateful. I just want to get this site finished, then I can do a line by line on all the css files and merge it all into one, but I need to get this launched first.

The css files are too big to clutter up here, so I've attached them (as text files).

The last one is the Better Categories css:

/*
BetterCategoriesEzInfo v1.3.0.2 added  2006-06-22  gilby
*/
body {  behavior: url(includes/csshover.htc);} /* WinIE behavior call */


.betterCategories, .betterDocuments, .betterEzpages,
.betterInformation, .betterMoreinformation, .betterBestsellers 
{
	float: left:
	width: 160px;
	margin: -1px 0 0 -1px;
	background-color: #000000;
	border-top: 1px solid #ffffff;
	color: White;
	font-weight: bold;
	font-size: 11px;
	background-color: #cc0000;
}

.betterCategories a, .betterDocuments a, .betterEzpages a, 
.betterInformation a, .betterMoreinformation a, 
.betterBestsellers a
{
	margin: 0; 
	padding: 0;
	font-weight: bold; 
	font-size: 11px;
	color: white;
	background-color: #cc0000;	
}

.betterCategories a:visited, .betterDocuments a:visited, 
.betterEzpages a:visited, .betterInformation a:visited,
.betterMoreinformation a:visited, .betterBestsellers a:visited 
{
	margin: 0; 
	padding: 0;
   text-decoration: none; 
	font-weight: bold;
	font-size: 11px;
	color: white;
	background-color: #cc0000;	
} 

.betterEzpages a:hover, .betterEzpages a:active
{
	margin: 0; 
	padding: 0;
	background-color: #CC9900;
	color: White;
	font-weight: bold; 	
	font-size: 11px;	
}


.category-subs-selected, .category-subs-selected a:hover 
{
	margin: 0; 
	padding: 0;
	font-weight: bold;
	text-decoration: none;
	color: #ffffff;	
}

div#betterEzpages ul {
	margin: 0; 
	padding: 0; 
	width: 160px; 
	background-color: #cc0000;
/*  border: 1px solid #AAA;*/}

Thanks!

[kobra]

I know I should merge my various css files (there are now 5, ::sigh::), because I know they're stepping all over each other.

You have hit the nail on the head....while one could most likely correct this after much searching through all the css it would probably be faster to reduce it to one main css file and correct from there.

In particular, the stylesheet.css, stylesheet_original.css, stylesheet_new.css are major conflicts that have been posted about too many times.

I would also remove the css column & box width items and control this only from the admin.

[kuroi]

I agree with Kobra. It's not in my nature to be overly critical, but this is the worst example of bloated CSS that I have seen. There's not just one but two competing sets of CSS at play making it very difficult to work out what is controlling any part of your styling.

I'm afraid there's no magic bullet on this, just some serious pruning, throwing out any CSS not actually in use or over-ridden elsewhere, so that the key issues are no longer obscured.