CSS - <table> Display: None; Style Not Working Properly?

I just tested my site with IE6 and it's very broken (although it's valid HTML 4.01 strict according to w3.org). Main problem I am having is the links. I have a left navigation box, and a list of links inside it, the links display is set to 'block'. When the user's cursor is on the same line as the link, I want the whole line to change BG color and be clickable. This works now with FF perfectly. In IE your mouse has to be ON the actual link for the background to change color, and there is space on the left of the link block.

Here is an example (not my site):
http://rmideas.com/menus/menutest/NavToBar.htm
The top right menu works like I want it to in FF, but in IE your cursor has to be on 'home'.

How can I get this to work properly in both FF and IE?

and I have overlapping problems, some code overlaps in one browser but looks fine in another.

So basically here's the problem.... I'm using a jquery folder tree. By default, there is a plus and minus sign designating expanded or collapsed. If you click the sign only, would the menu expand/collapse. However, for my needs, I need the entire name beside the sign to be clickable as well. So I adjusted certain items and it works... in Opera, Firefox, Safari, Flock, and Chrome... (All latest versions I just downloaded today). It doesn't, however, work in IE6 (yes.. I still use IE6). Have not tested in IE7 or IE8...

I posted this in the CSS forum as it seems as though it's a CSS problem as opposed to Javascript or PHP...

Anyways... here's the CSS file:
Code:

.treeview, .treeview ul { 
	padding: 0;
	margin: 0;
	list-style: none;
}

.treeview ul {
	background-color: white;
	margin-top: 4px;
}

.treeview .hitarea {
	background: url(images/treeview-default.gif) -64px -25px no-repeat;
	height: 16px;
	width: 100px;
	margin-left: -16px;
	float: left;
	cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
	display: inline;
	float:none;
}

.treeview li { 
	margin: 0;
	padding: 3px 0pt 3px 16px;
}

.treeview a.selected {
	background-color: #eee;
}

#treecontrol { margin: 1em 0; display: none; }

.treeview .hover { color: red; cursor: pointer; }

.treeview li { background: url(images/treeview-default-line.gif) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }

.treeview .expandable-hitarea { background-position: -80px -3px; }

.treeview li.last { background-position: 0 -176px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(images/treeview-default.gif); }  
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }

.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }

.treeview-red li { background-image: url(images/treeview-red-line.gif); }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); } 

.treeview-black li { background-image: url(images/treeview-black-line.gif); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview-black.gif); }  

.treeview-gray li { background-image: url(images/treeview-gray-line.gif); }
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(images/treeview-gray.gif); } 

.treeview-famfamfam li { background-image: url(images/treeview-famfamfam-line.gif); }
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(images/treeview-famfamfam.gif); } 


.filetree li { padding: 3px 0 2px 16px; }
.filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
.filetree span.folder { background: url(images/folder.gif) 0 0 no-repeat; }
.filetree li.expandable span.folder { background: url(images/folder-closed.gif) 0 0 no-repeat; }
.filetree span.file { background: url(images/file.gif) 0 0 no-repeat; }

Here's the relevant nav menu code:
Code:

if (mysql_num_rows($result) != '0') {
  while($row = mysql_fetch_array($result)) {
	  $string5= $row['string'];
	  $state3 = $row['state'];
	  $county3 = $row['county'];
	  $city3 = $row['city'];
          $item3 = $row['item'];
		if ($state2 != $state3) {
			if ($i != 1) {
		    $treeview .= "</ul></li></ul></li></ul></li>";			
		  }
		  $i++;
			$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a></div><br />";
			$state2 = $state3;
			$j = 1;
		}
	  if ($county2 != $county3) {
			if ($j != 1) {
		    $treeview .= "</ul></li></ul></li></ul>";			
		  }
		  $j++;
		  $treeview .= "<ul style=\"display:none;\">";
		  $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a></div><br />";
		  $county2 = $county3;
		}
		if ($city2 != $city3) {
      $treeview .= "<ul style=\"display:none;\">";
		  $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a></div><br />";
			$city2 = $city3;
      $treeview .= "<ul style=\"display:none;\">";		
		}
		if ($item3) {
		  $treeview .= "<li>".$item3."</li>";
			$item2 = $item3;
		}
	} 
}
$treeview .= "</ul></li></ul></li></ul></li></ul>";

There are 3 lines of code that I have changed from when it works:
Code:

			$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a></div><br />";
		  $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a></div><br />";
		  $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a></div><br />";

From the above 3 lines, the only thing I did which seemed to break the code was move the </div> from in front of <a href ...> to after </a>

So the original lines (where it worked) looked like:
Code:

			$treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$state3."</a><br />";
		  $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$county3."</a><br />";
		  $treeview .= "<li class=\"expandable\"><div class=\"hitarea expandable-hitarea\"></div><a href=\"#\" style=\"margin-left:20px;\">".$city3."</a><br />";

EDIT: Ok... so not everything works in the other browsers either. Basically if I hit refresh with the new code, then collapse and expand seem to work in reverse....

So not sure how to correct this, but any help would be appreciated... Here is what it looks like (Screen shots):

Working Properly in FF

After a refresh in Firefox (This is after hitting collapse)

Working Properly in IE6 (Before making the changes mentioned above)

Not Working in IE6

The site is not currently accessible which is why I'm including screen shots. However, if you need to see them, let me know and I will make it live.... Heading out now, so was trying to get a post up at least before I left...

Thanks.. if you need further information or additional code, let me know.

Any help would, of course, be appreciated.

Hi,

im using different styles for my links on one page. my CSS for some links is not working properly in IE6. i have defined some rules for all the links in my CSS but for some specific links when i try to change the link color and the hover effect of the link, it is not effected. the color of the link remains same as default link. what is the problem.

here is my css code.

a:link { color:#ff8702; text-decoration: underline; font-weight:bold; }

a:visited { color:#ff8702; text-decoration: underline; }

a:hover { color:#ff8702; text-decoration:none; }


.readmore { font-weight:bold; font-size:14px; width:94px; height:35px; background:url(images/read-more.gif) no-repeat; vertical-align:middle; padding:12px 0 0 13px;}

.readmore a {color:#000000; text-decoration: none;}

.readmore a:hover {color:#000000; text-decoration: underline;}

when i assign the "readmore" class to any text, it does not take effect. Please help.

Hi,

I'm currently trying to write a website that will look like this:

http://andrew.estyles.com.au/website.jpg

The website will be anchored to the top left of the screen and will stretch 100%. The main content area (light blue) must stretch vertically to fit the content, and the side bar (purple) must stretch to the same height as the main content area.

What I want to do is let the user hide the side bar by clicking on a button on it (using Javascript). When they click the button, I want the side bar to shrink to about 10-20px in width (enough so that it's still there and you can click another button on it to show it). When the button is clicked to hide it, I want the main content area to move left and fill in the space where the side bar was (and similarly, I want it to move back to the right when the side bar is expanded)

I'm having troubles figuring out the CSS to do this. Here's what I've got so far:


HTML:

Code:

<div id="topBanner">Banner goes here!</div>
<div id="menuBar">{{T_MENU}}</div>
<div id="main">
	<div id="leftBar">Side Bar</div>
	<div id="content">Main Content
	</div>
</div>

CSS:

Code:

/* GENERAL STYLES */

body
{
	margin: 0px;
}

img
{
	border: 0px;
}

/* END GENERAL STYLES */


/* top website banner */
#topBanner
{
	width: 100%;
	height: 100px;
	
	background-color: #CCCCCC;
	
	border: 0px solid black;
}

/* bar containing the menu */
#menuBar
{
	width: 100%;
	height: 20px;
	
	background-color: #666666;
	
	border: 0px solid black;
}

/* container for leftBar and content */
#main
{
	width: 100%;
	
	background-color: #0000FF;
	
	background-image: url('../images/main_background.gif');
	background-repeat: repeat-y;
}

/* left bar containing quick links etc */
#leftBar
{
	float: left;
	
	width: 140px;
	
	padding: 5px;
}

/* main content area */
#content
{
	font-family: Verdana, Ariel, Helvetica, Times New Roman;
}

Using that code, I get my side bar fine etc, it all works fine - but I'm not sure what I should be doing to hide it (I don't mean I don't know the javascript code to do it, I just mean I don't know what I actually need to modify in the divs). Also, you'll note that I'm using the faux column method described here to put in my side bar if that makes a difference. The image I am using is just 150px (size of my side bar) one colour on the left, and then another colour for the rest of it. So when I shrink the side bar, I need to adjust the background images too.


So yeah, if anyone can send me in the right direction I'd appreciate it!

Cheers.

This stylesheet was developed by volunteers (local students) who weren't asked to design for cross-browser compatibility.

In FF and Netscape the background CSS 'runs out' before the content does (problematic with black background) and there isn't any space between objects (adjoining columns, text etc.).

Because I need to make the fix asap (and I am not well versed in CSS for layout) my options here are a) pay my ISP web team to make the adjustments, b) redesign site templates using tables (which I can do, but I know is regressing) or c) get some specific feedback from you folks. The code does not validate (re. W3C CSS Validator) but I'm not experienced enough in this to know how to fix it.

In the long-term, I am definitely looking to improve my knowledge in this area and appreciate your patience with me.

I have copied the code below. Many thanks for any feedback, resources, pointers etc. you may be able to provide.



body{
background-color: Black;
background-position: center;
text-align: center;
vertical-align: center;
margin: 2px;
}

h4{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bolder;
color: black;
}

h6{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7.5pt;
font-weight: normal;
color: black;
}

h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bolder;
color: black;
text-transform: uppercase;
}

h2{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #8B0000;
}


div#wrapper{
background-position: center;
background-color: #F0F1EB;
width: 762px;
height: 420px;
margin: 0px;
border: 1px solid #black;
padding: 0 px;


}

div#top{
background-position: center;
background-image: url(../images/top.jpg);
width: 760px;
height: 123px;
margin: 0px;
border: 0px;
padding: 0 px;
text-align: right;
vertical-align: top;
text-transform: uppercase;
}

div#toplinks{
background-position: center;
width: 634px;
height: 15px;
margin: 0px;
border: 0px;
padding: 2 px;
float: right;
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bolder;
text-align: center;
color: white;

}

div#midlinks{
background-position: center;
background-color: #F0F1EB;
width: 760px;
height: 17px;
margin: 0px;
padding: 0 px;
border-bottom: 1px solid #9E9E9E;;
border-left: 0px;
border-right: 0px;
border-top: 1px solid #9E9E9E;
}


div#midleft{
background-color: white;
width: 126px;
height: 16px;
margin: 0px;
padding: 6 px;
float: left;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid #9E9E9E;
border-top: 0px;
text-transform: uppercase;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: right;


}

div#midleft a, div#midleft a:hover, div#midleft a:visited, div#midleft a:active{
text-transform: uppercase;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: right;
text-decoration: none;
}

div#midright{
width: 631px;
height: 16px;
margin: 0px;
padding: 6 px;
float: right;
border:0px;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: left;
color: white;
text-transform: uppercase;

}

div#midright a, div#midright a:hover, div#midright a:visited, div#midright a:active{
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: left;
color: #990000;
text-transform: uppercase;
text-decoration: none;
}

div#left{
background-position: center;
background-color: #F0F1EB;
width: 125px;
margin: 0px;
padding: 7 px;
float: left;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
border-top: 0px;
text-transform: uppercase;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 900;
text-align: right;
}

div#left a, div#left a:hover, div#left a:visited, div#left a:active{
text-transform: uppercase;
color: #990000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 900;
text-align: right;
text-decoration: none;
}

div#main{
background-position: center;
background-color: White;
width: 635px;
height: 470px;
margin: 0px;
padding: 0 px;
float: right;
border-left: 1px solid #9E9E9E;

}


div#mainl{
background-position: center;
background-color: white;
width: 310px;
height: 289px;
margin: 0px;
border: 0px;
padding: 10 px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-align: left;
color: black;
}

div#main2{
background-position: center;
background-color: white;
width: 317px;
height: 450px;
margin: 0px;
padding: 10 px;
float: right;
border-bottom: 0px;
border-left: 1px solid #9E9E9E;
border-right: 0px;
border-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-align: left;
color: black;
}

div#main1col{
background-position: center;
background-color: white;
width: 625px;
height: 289px;
margin: 0px;
padding: 10 px;
border: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: black;
}

div#main1col td, div#mainl td, div#main2 td{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: black;
}

div#main1col a, div#main1col a:hover, div#main1col a:active, div#main1col a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}

div#mainl a, div#mainl a:visited, div#mainl a:hover, div#mainl a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}


div#main2 a, div#main2 a:visited, div#main2 a:hover, div#main2 a:active{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}

.container { position: relative; left: 1px; top: 1px;}

.text {position: absolute; left: 5px; top: 0px;}


.container a, .container a:visited, .container hover, .container a:active {color: #666; text-decoration: none;}
.text a, .text a:visited, .text hover, .text a:active{color: white; text-decoration: none;}