CSS - Converting To Pixels

Hi guys, I'm pretty new to CSS. I had this style sheet set up, and it was working in Firefox just fine. When I tested it on IE, the center logo instead of being approximately 15 pixels down from the top, it's right at the top. I was able to get those 15 pixels to appear in IE with 2 changes, but now there is an extra 15 pixels in Firefox, so it is down approx. 30 pixels. Can anybody see what I'm doing wrong, or provide a hack that will fix it?

css Code:
Original - css Code /* This CSS works in FF. I have put the changes in comments that will make it work in IE. Both changes were in the Header section. */ body { margin:0px; margin-bottom:50px; padding:0px; text-align:center; background-image:url(../images/bg-grn2.gif); } a:link {color:#0000EF;} a:active {color:#EF0000;} a:visited {color:#52188C;} div#FS-Logo { position:absolute; top:10px; left:10px; height:110px; width:100px; background:url(../images/left-logo.gif) top left no-repeat; margin:10px; padding:0; } div#FWS-Logo { position:absolute; top:10px; right:10px; height:110px; width:100px; background:url(../images/right-logo.gif) top right no-repeat; margin:10px; padding:0; } div#Header { width:300px; height:140px; /*change this to 155px*/ margin:0px auto; text-align:center; font-family:"Trebuchet MS", serif; background:url(../images/center-logo.gif) no-repeat top center;/*change this to 'no-repeat center center'*/ } div#Main-content { width:55%; height:500px; margin:0px auto; text-align:left; padding:0px; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Left-column { position:absolute; top:155px; left:15px; width:15%; height:500px; margin:0; text-align:left; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Right-column { position:absolute; top:155px; right:15px; width:15%; height:500px; margin:0; text-align:left; border:1px dashed #333; background-color:#ded794; font-family:verdana, sans serif; font-size:12px; } div#Footer { position:static; bottom:10px; right:15px; width:100%; margin:0; padding:0; text-align:center; font-family:verdana, sans serif; font-size:14px; } .hd-header {color:#8A4B2C;} .hd-footer {color:#000000;} .hd-main {color:#FFFFFF;}

  

 /* This CSS works in FF. I have put the changes in comments that will make it work in IE. Both changes were in the Header section.  */


 body {


     margin:0px; 


     margin-bottom:50px;


     padding:0px;


     text-align:center;


     background-image:url(../images/bg-grn2.gif);


     }


     


 a:link {color:#0000EF;}


 a:active {color:#EF0000;}


 a:visited {color:#52188C;}


  


 div#FS-Logo {


     position:absolute;


     top:10px;


     left:10px;


     height:110px;


     width:100px;


     background:url(../images/left-logo.gif) top left no-repeat;


     margin:10px;


     padding:0;


     }


     


 div#FWS-Logo {


     position:absolute;


     top:10px;


     right:10px;


     height:110px;


     width:100px;


     background:url(../images/right-logo.gif) top right no-repeat;


     margin:10px;


     padding:0;


     }


     


 div#Header {


     width:300px;


     height:140px; /*change this to 155px*/


     margin:0px auto;    


     text-align:center;


     font-family:"Trebuchet MS", serif;


     background:url(../images/center-logo.gif) no-repeat top center;/*change this to 'no-repeat center center'*/


     }


  


 div#Main-content {


     width:55%;


     height:500px;


     margin:0px auto;


     text-align:left;


     padding:0px;


     border:1px dashed #333;


     background-color:#ded794;


     font-family:verdana, sans serif;


     font-size:12px;


     }


     


 div#Left-column {


     position:absolute;


     top:155px;


     left:15px;


     width:15%;


     height:500px;


     margin:0;


     text-align:left;


     border:1px dashed #333;


     background-color:#ded794;


     font-family:verdana, sans serif;


     font-size:12px;


     }


  


 div#Right-column {


     position:absolute;


     top:155px;


     right:15px;


     width:15%;


     height:500px;


     margin:0;


     text-align:left;


     border:1px dashed #333;


     background-color:#ded794;


     font-family:verdana, sans serif;


     font-size:12px;


     }


     


 div#Footer {


     position:static;


     bottom:10px;


     right:15px;


     width:100%;


     margin:0;


     padding:0;


     text-align:center;


     font-family:verdana, sans serif;


     font-size:14px;


     }


  


 .hd-header {color:#8A4B2C;}


 .hd-footer {color:#000000;}


 .hd-main {color:#FFFFFF;} 

My html page is this.

html Code:
Original - html Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="styles/decaid.css"> </head> <body> <div id="FS-Logo"> <p>&nbsp;</p> </div> <div id="Header"> <p>&nbsp;</p> </div> <div id="FWS-Logo"> <p>&nbsp;</p> </div> <div id="Left-column"> <p>Main Links Will be here</p> </div> <div id="Main-content"> <p class="hd-main">Main content is here.</p> </div> <div id="Right-column"> <p>External Links here</p> </div> <div id="Footer"> <p class="hd-footer">Footer goes here</p> </div> </body> </html>

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles/decaid.css">
</head>

<body>
  <div id="FS-Logo">
    <p>&nbsp;</p>
  </div>
  <div id="Header">
   <p>&nbsp;</p>
  </div>
  <div id="FWS-Logo">
    <p>&nbsp;</p>
  </div>
  <div id="Left-column">
    <p>Main Links Will be here</p>
  </div>
  <div id="Main-content">
    <p class="hd-main">Main content is here.</p>
  </div>
  <div id="Right-column">
    <p>External Links here</p>
  </div>
  <div id="Footer">
    <p class="hd-footer">Footer goes here</p>
  </div>

</body>
</html>

http://www.richarddoyle.net/tests/float is what I'm currently working on, trying to get a basic layout together.

I'm pretty close to what I want, except you'll notice the white box is touching the nav area. I want about 20 pixels of space between the two, and the background gray to show through. They're touching because I'm currently only floating one element, but if I float both the content goes below the nav in Firefox.

I tried not floating anything and using relative positioning to move the content up and into place, but of course that causes the page to be much longer because it still takes up the area the content would have taken up.

I'm guessing how I'm structuring my code is flawed. Help!

Alright here goes. I just redesigned my website. To see how it *SHOULD* display, use Mozilla, Safari, etc... Use Internet Explorer on Windows to see how it displays incorrectly.

The first way that I wanted to do it was to have everything either float: left; or float: right; and then use relative positioning on the left menu to bump it left. The problem with this is that Internet Explorer didn't want to do that and since I'm designing with every internet user in mind, I must make everything viewable for eve

I assume that the problem lies with the stylesheet in these two sections...

Code:

#menu {
	position: absolute;
	top: 115px;
	left: 145px;
	width: 50px;
	padding-right: 0px;
	padding-top: 0px;
	text-align: left;
	font-family: LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
	margin-top: 0px;
	voice-family: "\"}\"";
	voice-family: inherit;
	z-index: 200;
	}
	
a.tab, a.tab:link {
	background-color: #222222;
	border: 1px solid #EFEFEF;
	padding: 12px 0em 12px 10px;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: bold;
	float: left;
	width: 95px;
	margin: 5px 0px 5px 0px;
	text-decoration: none;
	}
a.tab:visited {
	color: #FFFFFF;
	}
a.tab:hover {
	background-color: #666666;
	color: #FFFFFF;
	}
a.tab:active {
	color: #FFFFFF;
	}
a.tab.activeTab, a.activeTab:link {
	border-right-width: 0px;
	width: 100px;
	background-color: #000000;
	}

and Code:

.rightContent {
	float: right;
	width: 535px;
	background-color: #000000;
	border: 1px solid #EFEFEF;
	margin-left: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	margin-right: 5px;
	text-align: center;
	color: #FFFFFF;
	}

The (X)HTML for this section looks like this...

Code:

<div id="menu">
		<a class="tab activeTab" href="http://www.paularms.com">Home</a><br />
		<a class="tab" href="http://www.paularms.com/archives.html">Archives</a><br />
		<a class="tab" href="http://www.paularms.com/about/downloads.html">Downloads</a><br />
		<a class="tab" href="http://www.paularms.com/about/tutorials.html">Tutorials</a><br />
		<a class="tab" href="http://www.paularms.com/about/index.html">About</a><br />
</div>

<div id="content">
	<div class="rightContent">
..........

Does anyone know WHY Internet Explorer is displaying this wrong? Even more helpful would be HOW to fix the problem.

Thanks everyone.

Hello, is it possible to start a border-left css 1 or 2 pixels from the left of the element instead of it going to the far left of the element??

I've had a look at the CSS for this website onerailway .com but cannot seem to find out how the width of the entire site is defined.

If you are using any screen res upto 1024x768 its 100% of the browser (assuming its not windowed) but then go over 1024x768 and it limits its self to around 1000 px wide.

This is the sheet it appears to be using

Many thanks if anyone can point me in the correct way for finding out how to do this

Hey, I have two main columns of content. I want them both to be relative to the center. So the div on the left would be centerd minus 410 pixels and the right would be centerd plus 10 pixels.

margin-left: auto;
margin-right: auto;

Centers it, but there is no way to add or subtract pixels to that amount. Any ideas?

I'm trying to create an image-navigation system using the popular css sprites technique. However, on the very first image (doesn't occur with any images following), IE6 (and below) increases the height of that image.

Here's a very simple code. There are no other codes or elements to interfere with this issue, and yet, it is still present.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Title Goes Here</title>



<style type="text/css">

.nav_top{background:url('http://i185.photobucket.com/albums/x14/mMaNgOeZz/nav-1.gif'); float:left; }
#img1{background-position: 0px 0px; width: 1200px; height: 14px; }
#img2{background-position: 0 -14px; width: 101px; height: 34px;}

</style>

</head>

<body>

<a class="nav_top" id="img1"></a>
<a class="nav_top" id="img2"></a>

</body>


</html>

Any help would be appreciated to no end. Thanks in advance.

I have a div that just serves as a horizontal rule, it's 800px wide and 3px high.

Firefox renders it properly, but internet explorer is adding 10 pixels totaling 13 pixels high.

I have tried the traditional <hr> tag, but it adds an ugly subtle border around it in IE that can't be removed.

EDIT: sorry, I forgot to mention that it's internet explorer version 6

The markup:
Code:

<div id="header">
    <div id="banner">

    </div>
    <div id="nav">
        <div id="floatleft">

        </div>
        <div id="floatright">

        </div>
    </div>
</div>
<div id="header_hr">
</div>
<div id="main">

</div>

The CSS:
Code:

#header
{
	margin:0 auto;
	width:800px;
	font-size:11px;
}

#banner
{
	background-image:url('../images/banner.jpg');
	height:29px;
	width:800px;
}

#nav
{
	width:800px;
}

#floatright
{
float:right;
}

#floatleft
{
float:left;
}

#header_hr
{
	background-color:#464646;
	clear:both;
	height:3px;
	margin:0 auto;
	width:800px;
	border:0;
}

#main
{
	width:800px;
	margin:0 auto;
}

Here's the output:

Hello. I've been playing with css for about a week now and after tearing my hair out and calling it a stupid language a number of times, have eventually solved all my problems.

However todays problem I thought I'd ask about.

There are 3 or 4 white pixels at the corners of my css image changing navigation buttons that I didn't put there. They don't show up when viewed in photoshop or when I use Javascript rollovers. I can't find any help anywhere else either.

he
http://www.cycloid.f9.co.uk/basic.gif

is my problem

he
http://www.cycloid.f9.co.uk/basic.htm
http://www.cycloid.f9.co.uk/basic.css

is the htm/css with the rest of the garbage (forms etc) taken out

the browsers shown are IE6,FF1,NS7 and opera (though i cant remember the version, all have been updated in the past month though as this is a new computer!)

i know this is nit picking but the heading sizes are different accross the browsers, and some appear to have padding too. the rest of my elements seem to size/margin/stack the same but not the H tags. anyone got any suggestions how to get them to listen to my rules! or could it be a case of rounding errors in each browser's calculations once the font sizes get particularly large?

or do i have to <div class='h1'>heading</div> instead!?

anyway, i personally am not bothered about things being pixel perfect alas it's not a perfect world and simply getting things to line up how im asked to at work and getting paid at the end of the month is more important to me than doing it all in em's!

cyc

Not sure if this is really a CSS problem but...

In IE only, the bottom pixels are missing from some images. It's fine in Firefox though: Example

The images in quesiton are the Zodiac and 13 Moon images (underneath the avatar).

Anyone know what might cause this?

Thanks,

Hi there developers!

im new here and desperately trying to be resonable at developing myself!

i basically have an issue with my css, which is causing one of my drop down menus to appear slightly to the right in internet explorer - it looks spot on in firefox. i've googled this soooo much and heard about the 5 pixels problem between any browser and ie, but i cannot seem to fix it with all my changes made. see image - highlighted in red!
Code:

URL

can anyone help me tidy this mess up please? this has taken me so long, because i wanted the locations of the drop downs to stay exactly in proportion when people zoom in and out of their browsers.



html code:
<div id="columnSubTop">
<div class="submenudropdown">
<div class="floatLeft width25 padL300 padTOP25">
<form action="search_for_vouchers_by_town" method="post" name="search" id="search">
<select name="fldCountyID">
<option value="">Please Select</option>
<%
While (NOT CountyList.EOF)
%>
<option value="<%=(CountyList.Fields.Item("fldCountyID").Value)%>"><%=(CountyList.Fields.Item("fldCountyName").Value)%></option>
<%
CountyList.MoveNext()
Wend
If (CountyList.CursorType > 0) Then
CountyList.MoveFirst
Else
CountyList.Requery
End If
%></select>
</div>
<div class="floatRight width25 padR10 padTOP25">
<select name="fldTownID">
<%
While (NOT TownList.EOF)
%>
<option value="<%=(TownList.Fields.Item("fldTownID").Value)%>"><%=(TownList.Fields.Item("fldTownName").Value)%></option>
<%
TownList.MoveNext()
Wend
If (TownList.CursorType > 0) Then
TownList.MoveFirst
Else
TownList.Requery
End If
%></select>
</div>
</div>
<div class="submenubutton">
<input type="image" src="images/search_button.gif" alt="Submit button" />
</form>
</div>

</div>

CSS code:
#columnSubTop {
height: 85px;
width:940px;
margin: 0 auto;
float:left;
background-image:url(../images/css/subheader.gif);
background-position: top left;
background-repeat: no-repeat;
clear:none;
}

.submenudropdown{
float:left;
width:750px;
}

.submenubutton{
float:right;
margin:0 auto;
padding:24px 62px 0 0;
}

Has anyone heard of Firefox 4 or Firefox 3.5 positioning a Div 3 pixels higher on a web page than all other A-Grade browsers?

If you want to see what I mean, go to baampblue . asystechonline . com / ReconstructIndex.php. Sorry I could not insert a link. I'm a new member. I password protected this to keep bots from scanning it. The username is the word demo. The password is also the word demo. Look for "Carl Gohm" on the right side of the page, under "BAAMP Honors Lifetime Members". Click on the Carl Gohm link. A new rounded corner box will open up in the "Featured Projects" display with a picture and information about Carl. If you look at the new box in IE 8, Opera 11, Chrome 11, or Safari 5.0.5 the new box fits perfectly inside of the Featured Projects display. If you look at the new box in Firefox 4 or 3.5, you should notice that the new box is shifted up 3 pixels too high.

The HTML and CSS validate with no errors on the W3C validators.

I'm using jQuery to generate the new box for Carl Gohm. I have ruled out the jQuery as the cause of the problem by creating a minimal test case that doesn't involve jQuery.

I tried using a clean version of Firefox from Spoon.net, because I thought maybe one of the Add-Ons in Firefox was causing the problem. That didn't make any difference.

I tried viewing this on another computer that is running Firefox 4 on Windows XP, but the problem was still there.

I used Firebug to disable and then re-enable each line of CSS one at a time to see if there was a CSS problem. I didn't notice an improvement.

I just need to know if I am wasting my time trying to troubleshoot something that is not correctable.

Thank you in advance for your time.

i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width.
The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu.

here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu.
http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm

Also , i get wierd result in netscape navigator. please help

Hello, as im waiting for a reply to one previous thread today, i though i would also write this one too, as i REALLY need help. With the html page below, how "would" i make this all STRICT css and still have it look exactly the same.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<style type="text/css">
<!--
body {
	margin-top: 0px;
}
.menuBlue {
	FONT-SIZE: 11px; COLOR: #3c2c7c; FONT-FAMILY: Verdana, Helvetica, sans-serif
}
.menuBlue A {
	COLOR: #3c2c7c; TEXT-DECORATION: none
}
.menuBlue A:visited {
	COLOR: #3c2c7c; TEXT-DECORATION: none
}
.menuBlue A:hover {
	COLOR: #99091c; TEXT-DECORATION: none
}

-->
</style></head>

<body onload="MM_preloadImages('images/Home_On.gif','images/About_On.gif','images/Search_On.gif','images/ContactUs_On.gif')">
<table width="407" height="91" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="70" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/Home_On.gif',1)"><img src="images/Home_Off.gif" alt="Homepage" name="home" width="70" height="18" border="0" id="home" /></a></td>
    <td width="134" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/About_On.gif',1)"><img src="images/About_Off.gif" alt="About RE/MAX" name="about" width="134" height="18" border="0" id="about" /></a></td>
    <td width="86" height="18"><DIV id=divSearch onmouseover="MM_showHideLayers('divSearch','','show')"
style="Z-INDEX: 6; VISIBILITY: hidden; WIDTH: 200px; POSITION: absolute; TOP: 18px; HEIGHT: 95px" onmouseout="MM_showHideLayers('divSearch','','hide')">
        <table id="Table10" cellspacing="0" cellpadding="0" width="200" border="0">
          <tbody>
            <tr>
              <td bgcolor="#3c2c7c" colspan="3"><img height="1" alt="" hspace="0" 
      src="images/Spacer.gif" width="200" border="0" /></td>
            </tr>
            <tr>
              <td width="1" bgcolor="#3c2c7c"><img height="1" alt="" hspace="0" 
      src="images/Spacer.gif" width="1" border="0" /></td>
              <td><table id="Table11" cellspacing="0" cellpadding="0" width="198" border="0">
                  <tbody>
                    <tr>
                      <td width="198" bgcolor="#dce4ec" colspan="2"><img height="3" alt="" 
            src="images/Spacer.gif" width="1" border="0" /></td>
                    </tr>
                    <tr bgcolor="#bcccdc">
                      <td width="18"><img height="1" alt="" src="images/Spacer.gif" 
            width="10" border="0" /><img height="14" alt="" 
            src="images/ArrowRight.gif" width="8" border="0" /></td>
                      <td class="menuBlue" width="180">&nbsp;<a 
            href="#">Properties</a></td>
                    </tr>
                    <tr bgcolor="#dce4ec">
                      <td><img height="1" alt="" src="images/Spacer.gif" width="10" 
            border="0" /><img height="14" alt="" src="images/ArrowRight.gif" 
            width="8" border="0" /></td>
                      <td class="menuBlue">&nbsp;<a 
            href="#">Land</a></td>
                    </tr>
                    <tr bgcolor="#bcccdc">
                      <td><img height="1" alt="" src="images/Spacer.gif" width="10" 
            border="0" /><img height="14" alt="" src="images/ArrowRight.gif" 
            width="8" border="0" /></td>
                      <td class="menuBlue">&nbsp;<a 
            href="#">Commercial</a></td>
                    </tr>
                    <tr bgcolor="#dce4ec">
                      <td><img height="1" alt="" src="images/Spacer.gif" width="10" 
            border="0" /><img height="14" alt="" src="images/ArrowRight.gif" 
            width="8" border="0" /></td>
                      <td class="menuBlue">&nbsp;<a 
            href="#">Office and Agents</a></td>
                    </tr>
                    <tr bgcolor="#bcccdc">
                      <td><img height="1" alt="" src="images/Spacer.gif" width="10" 
            border="0" /><img height="14" alt="" src="images/ArrowRight.gif" 
            width="8" border="0" /></td>
                      <td class="menuBlue">&nbsp;<a 
            href="#">Franchise Opportunities</a></td>
                    </tr>
                    <tr>
                      <td width="198" bgcolor="#dce4ec" colspan="2"><img height="3" alt="" 
            hspace="0" src="images/Spacer.gif" width="1" 
      border="0" /></td>
                    </tr>
                  </tbody>
              </table></td>
              <td width="1" bgcolor="#3c2c7c"><img height="1" alt="" 
      src="images/Spacer.gif" width="1" border="0" /></td>
            </tr>
            <tr>
              <td bgcolor="#3c2c7c" colspan="3"><img height="1" alt="" 
      src="images/Spacer.gif" width="200" 
border="0" /></td>
            </tr>
          </tbody>
        </table>
      </DIV>
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('search','','images/Search_On.gif',1)"><img src="images/Search_Off.gif" alt="Search" name="search" width="86" height="18" border="0" id="search" onmouseover="MM_showHideLayers('divSearch','','show')" onmouseout="MM_showHideLayers('divSearch','','hide')" /></a></td>
    <td width="117" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/ContactUs_On.gif',1)"><img src="images/ContactUs_Off.gif" alt="Contact Us" name="contact" width="117" height="18" border="0" id="contact" /></a></td>
  </tr>
  <tr>
    <td height="73">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>