I have two pages that I have setup to show an unordered list. The class is the same but on one page it behaves normally, and on the other the page breaks when you click on any link in the tiled menu (only FF breaks, IE works for both pages).

Here is the page that works:
http://74.63.67.148/~sharedsite/inde...100&Itemid=135

Here is the page that doesn't work:
http://74.63.67.148/~sharedsite/inde...101&Itemid=137

I also have a second question with this... I've got the hover.htc file loading here, but it seems a little slow. When I hover over the buttons in FF it shows the hover image fast. In IE, it seems to load the images everytime I hover over another link... How can I speed this up?

FF doesn't NEED the hover.htc behaviour, it is ONLY needed for IE6.

For starters if IE APPEARS to be doing something "right", then it's usually doing it wrong and FF is showing you the standards-compliant behavior.

Not sure I see why you need that span in your links, but since you defined a and a:hover, you should also define the a:visited state.

It would also be worthwhile to get rid of the table.

I can't get rid of the table because I'm using Joomla and it uses tables on some parts... Out of my control.

I know that IE usually does it wrong, but I can't figure out why FF is behaving like that on the one page. Did you have the same problem as me... When you click any one of the city names, it shortens the width of the whole UL. I can't figure it out for the life of me.

The span tag is only there for the rounded corners. I've got the sides repeating on the y axis and then in the A tag, I've got the top image as background and then I'm using the SPAN tag for the bottom image.

Here is my two CSS files.. The main CSS file, and then I have used PHP to dynamically load the other depending if there is 2, 3 or 0 columns.

template_css.css:

/* CSS 
   Dark Blue = #000066
   Blue = #000099
   Blue Background = #9999FF
   Yellow = #FFFF00
   Red = #990000
   Grey = #404040
*/

* {
  margin: 0;
  padding: 0;
}

a {
   text-decoration: none;
   color: #000066;
   font-weight: bold;
}

a:hover {
   color: #990000;
   text-decoration: underline;
}

a:visited {
   color: #000066;
}

ul { list-style: none; }

body {
	 background-color: #ffff00;
	 font-family: Verdana, Arial, Sans Serif;
     color: #404040;
   	 font-size: 76%;
}

h1, h2, h3, h4, h5, .componentheading {
   color: #000099;
   margin: .2em 0 .6em 0;
   font-weight: bold;
}

h1, .componentheading {
   font-size: 1.6em;
}

h2 {
   font-size: 1.4em;
}

h3 {
   color: #990000;
   font-size: 1.2em;
}

h4 {
   font-size: 1.1em;
}

h5 {
   font-size: 1em;
}

p {
   margin-bottom: .6em;
}

#container-outer {
   width: 780px;
   margin: 2% auto;
}

#container {
   width: 100%;
   background-color: #FFFFFF;
   border: 1px solid black;
}

.moduletable-resizer {
   clear: both;
   padding: 0 1%;
   font-size: 10pt;
}

.moduletable-resizer a {
   text-decoration: none;
   width: 25px;
   color: #000000;
}

#header {
   background: #9999FF url(../images/header.jpg) no-repeat top right;
   height: 200px;
   width: 100%;
}

.moduletable-header {
   width: 67%;
   float: left;
   margin: 1% 0 0 1%;
}

.moduletable-header * {
   padding: 0;
   margin: 0;
}

.moduletable-header h1 { color: #000000; font-style: italic; }
.moduletable-header h4 { color: #990000; }

#header-text {
   margin-top: 15px;
}

#logo {
   float: left;
}

.moduletable-top {
   width: 29%;
   height: 180px;
   margin: 1.2% 0 0 0;
   float: right;
}

.moduletable-top p {
   color: #FFFFFF;
   margin: 0 0 1em 0;
   font-style: italic;
   font-size: 9.2pt;
}

/***********************/
/***** TOP MENU ********/
/***********************/

#navbar {
/*   background-image: url(../images/gradient.png);*/
   background-repeat: repeat-x;
   width: 100%;
   height: 40px;
}

.moduletable-navbar {
   float: right;
   width: 100%;
   background-color: #000066;
   background: url(../images/gradient-menu.png) repeat-x top left;
   text-align: left;
}

/*#mainlevel-navbar {
   padding-left: 15px;
   height: 30px;
   background: url(../images/gradient-menuend.png) no-repeat top left;
}
*/
#mainlevel-navbar li {
   float: left;  
   height: 30px;
   width: 20%;
   text-align: center;
}

#mainlevel-navbar li a {
   color: #FFFFFF;
   display: block;
   width: 100%;
   font-weight: bold;
   text-decoration: none;
   line-height: 30px;
}

#mainlevel-navbar li a:hover {
   background: url(../images/hover-menu.png) repeat-x top left;
}

/*******************************/
/****** SERVICES MENU **********/
/*******************************/
.moduletable-services #mainlevel {
   width: 100%;
   list-style: none;
}

.moduletable-services #mainlevel li {
   width: 100%;
   margin: .4em 0 .4em 0;
}

.moduletable-services #mainlevel li a.sublevel {
   margin: 0 4% 0 8%;
   display: block;
   width: 88%;
   font-weight: normal;
}

.moduletable-services #mainlevel li a.sublevel:hover {
   background-color: #FF7878;
   color: #000099;
}

.moduletable-services #mainlevel li span.mainlevel {
   display: block;
   width: 97%;
   margin: 1.3em 0 0 3%;
   border-bottom: 2px solid #000099;
   font-size: 1.1em;
   font-weight: bold;
   color: #990000;
   list-style: none;
}

/*******************************/
/******** CITIES MENU **********/
/*******************************/
.moduletable-citymenu #mainlevel {
   width: 100%;
   list-style: none;
}

.moduletable-citymenu #mainlevel li {
   width: 100%;
   margin: .4em 0 .4em 0;
}

.moduletable-citymenu #mainlevel li a {
   margin: 0 4% 0 8%;
   display: block;
   width: 88%;
   font-weight: normal;
}

.moduletable-citymenu #mainlevel li a:hover {
   background-color: #FF7878;
   color: #000099;
}

.moduletable-citymenu h3{
   display: block;
   width: 97%;
   margin: 1.3em 0 0 3%;
   border-bottom: 2px solid #000099;
   font-size: 1.1em;
   font-weight: bold;
   color: #990000;
   list-style: none;
}

/*******************************/
/****** CONTENT AREA ***********/
/*******************************/
   
#mainbody {
   width: 100%;
   background-color: #FFFFFF;
   float: right;
}

#sidebar {
   width: 25%;
   float: left;
}

#sidebar2 {
   width: 25%;
   float: right;
}

#pathway {
   color: #000066;
   font-weight: bold;
   padding: 0 2.5% 0 2.5%;
   margin: 0 0 .6em 0;
   clear: both;
}

#pathway a {
   color: #990000;
}

#pathway a:hover {
   color: #000066;
}

#content {
   text-align: justify;
   width: 75%;
   float: left;
}

#content-inner {
   width: 95%;
   margin: 0 auto;
   clear: both;
}

#footer {
   clear: both;
   width: 98%;
   text-align: right;
   padding: 1% 0 0 0;
   margin: 0 auto;
}

#footer p { 
   color: #000000; 
   margin-bottom: .3%;
}

/**************************************/
/************ CLASSES *****************/
/**************************************/

.moduletable-spotguide ul {
   width: 90%;
   margin: 0 auto;
}

.moduletable-spotguide h3 {
   border-bottom: 3px solid #990000;
   color: #000099;
   font-size: 1em;
   padding: 0 .2em 0 .2em;
}

#mainlevel-spotguide li {
   border-bottom: 1px dotted #505050;
   line-height: 1.5em;
}

#mainlevel-spotguide li a {
   display: block;
   width: 100%;
   font-weight: normal;
   text-decoration: none;
   color: #990000;
}

#mainlevel-spotguide li a:hover {
   text-decoration: underline;
   color: #000099;
}

.clr { clear: both; }

.contentheading { 
   font-weight: bold; 
   font-size: 1.1em;
}

.small, .createdate, .modifydate { font-size: .9em; }

.modifydate, .createdate { 
   font-style: italic; 
   color: #999999;
}

.moduletable-recent {
}

.moduletable-recent h3 {
   border-bottom: 3px solid #990000;
   width: 100%;
}

.moduletable-recent li {
   line-height: 2em;
}   

ol {
   width: 87%;
   margin: 1em auto;
   padding-left: 3%;
   list-style: decimal outside;
}

ol li {
   margin-bottom: .7em;
}

#img-content {
   float: right;
   margin: 0 0 15px 15px;
}


/************************************/
/**********  TILE MENU  *************/
/************************************/
.moduletable-tiles {
   width: 100%;
}

.moduletable-tiles ul {
   width: 90%;
   list-style: none;
   margin: 0 auto;
}

.moduletable-tiles ul li {
   width: 24.9%;
   float: left;
   text-align: center;
   margin-top: .1em;
   background: transparent url(../images/tile-middle.png) repeat-y center top;
}

.moduletable-tiles ul li:hover {
   background: transparent url(../images/tile-middle-hover.png) repeat-y center top;
}

.moduletable-tiles ul li span {
   display: block;
   width: 100%;
   background: transparent url(../images/tile-bottom.png) no-repeat center bottom;
}

.moduletable-tiles ul li span:hover {
   background: transparent url(../images/tile-bottom-hover.png) no-repeat center bottom;
}

.moduletable-tiles ul li span a {
   display: block;
   padding: 1.5em 0 1.5em 0;
   width: 100%;
   background: transparent url(../images/tile-top.png) no-repeat center top;
}

.moduletable-tiles ul li span a:hover {
   color: yellow;
   background: transparent url(../images/tile-top-hover.png) no-repeat center top;
}

.moduletable-tiles ul li span a.mainlevel-tiles {
   background: transparent url(../images/tile-bottom.png) no-repeat center bottom;
}

.moduletable-tiles ul li span a.mainlevel-tiles {
   background: transparent url(../images/tile-bottom-hover.png) no-repeat center bottom;
}

css_nosides.css:

#mainbody {
   width: 100%;
}

#content {
   width: 100%;
}

#sidebar {
   width: 0;
}

#sidebar2 {
   width: 0;
}

Yes, I saw the funky shrinking effect, odd behavior. It could be due to the missing pseudo-classes, but don't you have some javascript in there that's modifying the table width ?

No, at least not that I know of. Unless Joomla added it in, but I don't understand why it would be on only one page because it is the same template for both pages.

I'll try adding in the pseudo class and see if that fixes it. I should add it in after the hover right?? Also, I don't want anything different for the :visited pseudo class, so should I just declare it and leave it blank, or restate all the properties again?

I don't want anything different for the :visited pseudo class, so should I just declare it and leave it blank, or restate all the properties again?

No, you don't have to do that, just append the other pseudo-classes, like this:

#menu a:link, #menu a:hover, #menu a:visited, #menu a:active{rules ;}

The order has to be link, visited, hover, active though.

Okay... I did as suggested and it doesn't work, well... It doesn't fix the problem.

The UL still shrinks when you click on any button.

Anything else that you suggest? I'm still puzzled as to why it happens on one page and not the other!