CSS - Css Dropdown Not Working Properly In Ie.

Hi,

I'm using C++ to create a single .cgi script. I'm now trying to incorperate some more CSS. I have added this line:

<style>body { font-family: times-roman; font-size: 16px; font-weight: bolder; }</style>

Now sometimes it works and sometimes it doesn't.
I will keep on clicking the refresh button and it is about 1 out of 10 that there are not any fonts on the page and the table sizes jump.

Does anyone know why this is possibly happening?

Mike

Hi,

While testing our webpage, we found that in all browsers the CSS menu works fine
except in Safari, on browsing the child nodes of the menu. The menu just closes
on the second or third select.

I would greatly appreciate any help to fix this bug.

The CSS code is below.

Regards,
Sharon.

Code :
<style type="text/css" media="screen">
/**************** menu coding *****************/
#menu {
width: 100%;
background: #eee;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->

gday

i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't..

eg.
<table style"display: none;"></table>

with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space

thoughts?

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.

Hello guys

I sure would appreciate some help integrating a css dropdown menu into a site. If you visit in FF, the drop down works find, If you open it in IE9 the dropdown does not work.
i am new to css.so cant solve the poblem.



Thanks for any help.

Greetings, I sure would appreciate some help integrating a css dropdown menu into a site. If you visit www.mts-diesel.com in FF, the drop down works find, If you open it in IE9 the dropdown does not work, BUT if you open this page www.mts-diesel.com/menu.html in IE9 the dropdown works. This leads me to think that it might be some type of z-index issue perhaps but I cant put my finger on it. Thanks for any help. Tom

Built a dropdown menu (which I use on all my websites fine) and for some reason it's not working at all in IE (Using 8.0.7600), I've literally no idea why.

Here's the CSS for the navigation:
Code:

#subnav {
	display: block;
	margin: 25px 0 0 0;
	padding:0 0 0 0;
	width: 196px;
}

#subnav ul {
	width: 196px;
	margin: 0;
	padding: 0;
	list-style: none;	
	font: 11px "Verdana", "Arial", "Helvetica", "sans-serif";
	
	
}

#subnav ul ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#subnav ul li {
	float: left;
	width: 196px;
	display: block;
	height: auto;
	margin: 0;
	padding: 0;
	font-weight: bold;
}

#subnav ul li a {
	color: #017490;
	display: block;
	width: 100%;
	height: auto;
	padding: 10px 0 10px 23px;
	text-decoration: none;
	text-shadow: 0px 1px 1px #fff;
}

#subnav ul li li {
	padding: 0;
	margin: 0px 0 0 0;
}

#subnav ul li li a {
	padding: 10px 0 10px 5px;
	line-height: normal;
	text-shadow: 0px 1px 1px #000;
}

#subnav ul a.first-level {
	background: #047691 url(../images/arrow.gif) top right no-repeat;
}

#subnav ul a.sub-level {
	background: #047691 url(../images/arrow.gif) 200px 6px no-repeat;
	
}

#subnav ul li a:hover, #subnav ul li a:active, #subnav ul li:hover a, #subnav ul li.sfhover a {
	/*color: #c7bb98;*/
	text-decoration: none;
	background: url(../images/nav-bg-over.jpg) 0 2px no-repeat;
}

#subnav ul ul li:hover, #subnav ul ul li.sfhover {
	color: #FFF;
}

#subnav ul li li:hover a, #subnav ul li li.sfhover a, #subnav ul li li:hover li:hover a, #subnav ul li li.sfhover li.sfhover a, #subnav ul li li:hover li:hover li:hover a, #subnav ul li li.sfhover li.sfhover li.sfhover a {
	color: #FFF
}

/* This line cancels the highlight effect for all sub-level buttons */
body.nav-1 #subnav ul li#subnav ul-1 li a, body.nav-1 #subnav ul li#subnav ul-1 li li a, #subnav ul li li a, #subnav ul li li li a {
	background-image: none
}

body.nav-1 #subnav ul li#subnav ul-1 a, body.nav-2 #subnav ul li#subnav ul-2 a {
	color: #048451;
}
	
	#subnav ul li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		z-index: 9999;
		margin-left : 215px;
		margin-top : -32px;
		padding: 5px 5px 5px 0px;
		background-color:#047691;
		text-transform: none!important;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		-moz-border-radius-topright: 5px;
		-moz-border-radius-bottomright: 5px;
		-moz-box-shadow: 0px 2px 2px #033f4d;
		-webkit-box-shadow: 0px 2px 2px #033f4d;
		box-shadow: 0px 2px 2px #033f4d;

	}
	
	#subnav ul li ul ul { /* third-and-above-level lists */
		left: -999em;
	}
	
	/* Normal color */
	#subnav ul li li a:link, #subnav ul li li a:visited, #subnav ul li:hover li a, #subnav ul li.sfhover li a, #subnav ul ul li.sfhover li a, 
	#subnav ul li:hover li:hover li a, #subnav ul li.sfhover li.sfhover li a,
	#subnav ul li:hover li:hover li:hover li a, #subnav ul li.sfhover li.sfhover li.sfhover li a {
		color : #FFF;
		background: #047691;
	}
	
	/* Hover color */
	#subnav ul li li a:hover, #subnav ul li li a:active, 
	#subnav ul ul li:hover a, #subnav ul ul li:hover li:hover a,
	#subnav ul li.sfhover li.sfhover a, #subnav ul li.sfhover li.sfhover li.sfhover a, #subnav ul li.sfhover li a:hover, 
	#subnav ul li.sfhover li li a:hover, #subnav ul li.sfhover li.sfhover li.sfhover li.sfhover a:hover, 
	#subnav ul li:hover li:hover a, #subnav ul li:hover li:hover li:hover a, #subnav ul li:hover li a:hover, 
	#subnav ul li:hover li li a:hover, #subnav ul li:hover li:hover li:hover li:hover a:hover
	{
		color : #FFF;
		background-color: #045669}
	
	#subnav ul li:hover ul ul, #subnav ul li:hover ul ul ul, #subnav ul li.sfhover ul ul, #subnav ul li.sfhover ul ul ul {
		left: -999em;
	}
	
	#subnav ul li:hover ul, #subnav ul li li:hover ul, #subnav ul li li li:hover ul, #subnav ul li.sfhover ul, #subnav ul li li.sfhover ul, #subnav ul li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}
	

The live site is demo2 . abcguide .com
(Sorry if I'm not supposed to link that.. I'll take it down.. ?)

Hey there again!

I have been at it ALLLLLLLLLLLL day, trying to figure out this blasted css menu to work in IE6!!!

It works fine in FF but dosnt seem to like IE6 and was wondering if someone could please help me figure out the problem

The first dropdown block ( <ul class="nav"> ) works fine but the second block ( <ul class="sub"> ) inside the first block ( <ul class="nav"> ) doesn't show properly in IE6!!

Here is a screen shot of my problem:


Here is my css:
PHP Code:
.navbar :hover ul.nav {
padding:0; margin:0; 
left:0; top:40px; 
width:136px; 
z-index:604;
background-color:#333333; }

.navbar :hover ul.nav li a {
display:block; 
height:24px; width:136px;}

.navbar :hover ul.nav li a:hover {background:#ad8d12;}

.navbar :hover ul.nav :hover ul.sub{
padding:0; margin:0; 
left:104px; top:-4px; 
width:200px; 
z-index:606; 
background-color:#333333;}

/* keep the 'next' level invisible by placing it off screen. */
.navbar ul.nav, 
.navbar :hover ul.nav ul.sub
{position:absolute; left:-9999px;} 






Here is my HTML code:
PHP Code:
<ul class="navbar">
    <li><a href="#">Link<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="nav">
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link2<!--[if IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="sub">
                    <li><a href="#">Link3</a></li> 
                    <li><a href="#">Link3</a></li>
                    <li><a href="#">Link3</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul> 







Thanks a million for even reading up to here

Hi,

I am trying to make a dropdown menu by using only CSS and no Javascript.

Here is my HTML

Code:

<ul id="nav">
										                                            <li>
<a href="/family-flowers.html"><span>Family Flowers</span></a>
<ul>
<li>
<a href="/family-flowers/anniversary-flowers.html"><span>Anniversary Flowers</span></a>
</li>
<li>
<a href="/family-flowers/birthday-flowers.html"><span>Birthday Flowers</span></a>
</li>

<li>
<a href="/family-flowers/christmas-bouquets.html"><span>Christmas Bouquets</span></a>
</li>
<li>
<a href="/family-flowers/new-baby.html"><span>New baby</span></a>
</li>
</ul></li>
                                                                                    <li class="level item-2 nav-congratulation">
<a href="/congratulation.html"><span>Congratulation</span></a>
</li>
                                                                                    <li class="level item-3 nav-corporate">
<a href="/corporate.html"><span>Corporate</span></a>

</li>
                                                                                    <li class="level item-4 nav-get-well">
<a href="/get-well.html"><span>Get Well</span></a>
</li>
                                                                                    <li class="level item-5 nav-love">
<a href="/love.html"><span>Love Bouquets</span></a>
</li>
                                                                                    <li class="level item-6 nav-mixed">
<a href="/mixed.html"><span>Mixed</span></a>
</li>
                                                                                    <li class="level item-7 nav-monthly">

<a href="/monthly.html"><span>Monthly</span></a>
</li>
                                                                                    <li class="level item-8 nav-funeral">
<a href="/funeral.html"><span>Funeral</span></a>
</li>
                                                                                    <li class="level item-9 nav-window">
<a href="/window.html"><span>Window plants</span></a>
</li>
                                                                                
										</ul>
						

and this is my CSS
Code:

#nav { list-style:none; margin:0; padding:0; width:150px; }

#nav li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}

#nav li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

#nav li:hover ul { display: block; }

everything is fine, only on my hovering, the sub UL is not displaying even i made it to display as BLOCK on hover.

can anybody help with this please?

thank you very much

[edit]

in fact it is working in FF but not in IE

[/edit]

I have a map on an html page.

If you mouseover "Savannah" the color of "Savannah" will change. The same will happen for "Broad". The problem is that the color doesn't change on "Broad" until you mouseover the top right part of "Broad". (Savannah and Broad are the only two that are active at this time.)

You have seen this all over the web. I don't want to use Javascript. I want to do this using CSS.

I do not have something quite right in my CSS. I have checked and checked and nothing stands out. I have looked at examples of Stu Nichols code similar to this, but I can't see anything.

I thought it was a problem with the z-index, but nothing happens when I change the numbers.

What am I doing wrong?

Gayle


CSS code:

PHP Code:
#imap {
    display: block;
    width: 801px;
    height: 677px;
    background: url(Images/RiverBasinMap_DENR.jpg) 0 0 no-repeat;
    position: relative;
    /*margin : 0 auto 2em auto; */
margin: 0 0;
    background-image: url(Images/RiverBasinMap_DENR.jpg);
} 

#imap a { 
color: #000; 
font-family: arial, sans-serif; 
font-size: 1.2em; 
font-weight: bold; 
text-transform: uppercase; 
} 
a#title, a#title:visited { 
display: block; 
width: 801px; 
height: 0; 
padding-top : 260px; 
position : absolute; 
left: 0; 
top: 0; 
cursor: default; 
text-decoration: none; 
} 
* html a#title { 
height: 677px; 
height: 0; 
} 
#imap a#title:hover { 
background: transparent url(Images/RiverBasinMap_DENR.jpg) 0 0 no-repeat; 
overflow: visible; 
color: #c00; 
z-index: 10;
} 

/*BROAD*/

a#broad {
    display:block;
    width:141px;
    height:159px;
/*padding-top : 120px;*/
    overflow:hidden;
    position: absolute;
    left: 285px;
    top: 295px;
    overflow: hidden;
} 

* html a#broad { 
    height: 159px; 
    height: 0; 
} 

a#broad:hover { 
    background: transparent url(images/Broad_Over.gif) no-repeat 0 0; 
    overflow: visible; 
    z-index: 21;
}

/*SAVANNAH*/

a#savannah {
    display: block;
    width: 181px;
    height: 313px;
/*<!--    padding-top : 120px;-->*/
    overflow: hidden;
    position: absolute;
    left: 226px;
    top: 318px;
    overflow: hidden;
} 

* html a#savannah  { 
    height: 313px; 
    height: 0; 
}

a#savannah:hover { 
    background: transparent url(images/Savannah_Over.gif) no-repeat 0 0; 
    overflow: visible; 
    z-index: 20;
} 






HTML code:

PHP Code:
<body>
<dl id="imap" name="imap">
    <dt><a id="map" href="#nogo">Test Map</a></dt>
        <dd><a href="#" name="broad" title="Broad" id="broad"></a></dd>
        <dd><a href="#" name="savannah" title="Savannah" id="savannah"></a></dd>
</dl>
</body> 

Something I think I'm not doing.

I'm using something called niftyCorners and thought that was what was cauing the problem, but now I'm not so sure. I am trying to have this appear on a webpage for the reader to use:

<script language="JavaScript">
<!--
alert("Sample JavaScript alert box 1.");
alert("Sample JavaScript alert box 2");
alert("There you go, alert boxes \nTa da, and one with a new line!");
// -->
</script>

Now, I need to have the <pre> tag nested inside a div tag, but this doesn't validate. So, I nested the code tag inside the pre tag and it breaks my layout in IE 6.0.

Why am I nesting at all? niftyCorners doesn't work very well when you put padding or margin on any div you want to have rounded corners. So, I'm trying to put a div round my pre tag, so I can round the div and I can use the pre tag to control margin/padding.

If anyone has any ideas, I'd appreciate it.

Hi. Any help would be appreciated. I am trying to cut down on my image sizes on my website: http://toptiertemplates.com, but i am having a few difficulties. I have this table which was created in photoshop which is off to the side. I would like to take just a slice of the table and repeat the image the full length of the table's original length. The page is written by placing everything with divs. I know how to set the image as a background and all and repeat it, however, when i do so, it replaces my website's background and just shows up as a white space.

So i am wondering if I have to use layers of some sort or anything else. I'd appreciate some help. Thanks.

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 there,
I'm trying to get the images from each page to be centered in their td's, which appears to work fine in FF, but not in IE. Any help is greatly appreciated.

here's the css;
Code:

.borders {
	border: 1px solid #666666;
	text-align:left;
	font-family:Century Gothic, Arial, sans-serif;
	font-size:11px;
	align:center;
}

}
.text {
	font-family:Century Gothic, Arial, sans-serif;
	font-size: 11px;
	color: #333333;
	text-align:center;
	
}

}
.listtext {
	font-family:Century Gothic, Arial, sans-serif;
	font-size: 11px;
	color: #333333;
	text-align:left;
	border: 1px solid #666666;
}


table.menu {
border:1px solid #999999;
background:#CCCCCC;
align:center;
}
table.menu a:link, table.menu a:visited {
display:block;
font-family:Century Gothic, Arial, sans-serif;
font-size:12px;
line-height:16px;
color:#006600;
text-decoration:none;
padding: 2px 2px;

}
table.menu a:active, table.menu a:hover {
color:#CCCCCC;
background:#006600;
}


table.menu a {
	width:144px;
	display:block;
	font-family:Century Gothic, Arial, sans-serif;
	font-size:12px;
	line-height:16px;
	color:#006600;
	text-decoration:none;
	padding: 2px 2px;
 } 

.GPlink {
font-famil:Century Gothic, Arial, sans-serif;
font-size:10px;
color:#000000;
}
.GPlink a {
font-family:Century Gothic, Arial, sans-serif;
font-size:10px;
align:center;
color:#333333;
}

.pagetitletext {
font-family:Century Gothic, Arial, sans-serif;
font-size:13px;
align:left;
color:#006600;
font-weight:bold;
}

.piccenterind 
{width: 212px; margin-left: auto; margin-right: auto;}

.piccentercont
{width: 322; margin-left: auto; margin-right: auto;}

and the html;

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Kyrtsakas Law - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Kyrtsakas Law Office - Title Insurance from an experienced Real Estate Lawyer offers the best protection for your investment">
<meta name="keywords" content="Kyrtsakas, Law, Law Office, Lawyer, real estate, estate, will, title, Windsor, purchases, mortgages, power of attorney, attorney, CAW">
<link href="kyrtsakas_styles.css" rel="stylesheet" type="text/css">
</head>

<body topmargin="0" bgcolor="#666666">
	
	<table width="640" align="center" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC" class="menu">
  		<tr valign="top">
			
    		<td align="center" width="640" colspan="6"> 
					<img src="images/Kyrtsakas_Header.jpg" alt="Kyrtsakas Law Office" name="header" id="header"> 
   			</td>
		</tr>
		<tr valign="top">
			<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com">Home</a>
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com/profile.htm">Profile</a>
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com/tools.htm">Online Tools</a>
			</td>
			<td class="borders" width="106" colspan="1">
				<a href="http://www.kyrtsakaslaw.com/contact.htm">Contact</a>
			</td>
			<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>
		</tr>
		<tr valign="top">
			<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>

			<td width="212" colspan="2" class="borders">
					<br>
					<div class="pagetitletext">Home</div><br>
					Welcome to <b>Kyrtsakas Law Office</b>.<br><br>
					<b>Christos Kyrtsakas</b>, <b>L L .B.</b><br><br>
					"For Nineteen years I have practiced law with an emphasis on <b>Real Estate</b>, including <b>Purchases, Sales, Mortgages</b>,
					and <b>Estate Law</b>, including <b>Wills, Powers of Attorney, and Probate</b>."<br><br> 
					Call me today at (519)-974-6303 for an appointment to discuss your particular needs.<br><br>
					CAW Plan Welcome!<br><br>
					"<i>Having a Lawyer Makes it Safer for You</i>!"<br><br>
			</td>
			
			<td colspan="2" width="212">
				<div class="piccenterind"><img src="images/Kyrtsakas_sign_sm.jpg"></div>
			</td>
			
    		<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>

		</tr>
		<tr valign="top">
			<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>

			<td class="borders" width="428" colspan="4">
				&nbsp;
			</td>
			
    		<td class="borders" width="106" colspan="1">
				&nbsp;
			</td>

		</tr>
	</table>
	<table bgcolor="#CCCCCC" align="center" width="640">
		<tr>
			<td align="center" class="GPlink" colspan="6">
				website designed & maintained by <a href="http://www.graphixplus.com" target="_blank">Graphix Plus Web Development</a> - 2005
			</td>						
		</tr>
	</table>
</body>
</html>