CSS - Why Is My Line-spacing Or <h1> Not Working On Ie But Firefox Ok?

I'm not that familiar with css yet...so this might be a stupid question.
I'm creating this website for my department. on the index page, there are several lists of links. between the links there is line spacing. but some link name is too long it got wrapped under. the wrapped under text also have line spacing. this makes the viewer feels that there are 2 links instead of one. how can i make the wrapped under text go right under without the line spacing?
here is the link if you wanna see how it looks like now.
http://www.scienceevents.uwaterloo.ca/

for example under the first left hand side menu, international year of astronmy is one link. but it looks like 2 links. how can i make them move together?

this is the css for the primary nav
Code:

#primary_navigation { 
	background:url(../images/primary_navigation_bg.jpg) no-repeat; /* This controls the background image on the home page. */
	width:960px;
	height:200px;
	margin-top:20px;
	font-size:0.75em;
	clear:both;
}

#primary_navigation ul {
	list-style:none;
	margin-left:-20px;
	height:110px;
}

#primary_navigation ul li {
	line-height:2.0em;
	margin-right:5px;
}

Is it possible to adjust the line spacing in text using CSS because pressing return in text, the spacing is either too big or too small. I want control of line spacing so that I can have text and paragraph control like I do with Word documents.
eg.
A
B
I want the distance from A to B to be either greater or smaller.

Can you also control the space between letters?
eg.
AB
I want the spacing between A to B further or closer.

Is this all possible on a HTML page without having to use images for text or using tables to seperate each text line on a table to create different line spacing.

If I have a couple of paragraphs of text and would like to adjust the space when you press return to start a new paragraph, how would I add it to my styles code below. Right now, a hard and soft return is too big and I would like the spacing to be about half the font size of the text.

How would I add it to my stylesheet code in this example: Code:

.bodytext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
	text-align:right;
	font-weight: none;
	background-color: #ffffff;
        line-height:1.5;
        letter-spacing:-0.02em;
}

is there a way to control the pixel amount a br will space in IE and FF so it's the same distance or is there just an issue in my css causing extra space?

I am trying to build out this site
http://realitysol.com/index.php#

In IE it shows up fine. In Firefox there is a space above the navigation Panel.

Any help would be appreciated.

Below is the CSS used for the navigation Section.
Code:

#navibg {
	background-image: url(../images/navibg.jpg);
	width: 500px;
	height: 40px;
	background-repeat: repeat-x;
}

#headerImg {
	height: 250px;
	width: 500px;
}

#navcontainer ul li
{
	list-style-type: none;
	margin: 0;
	display: block;
	float: left;
	background: url(../images/navi-normal.jpg) repeat-x 20px;
	font: 10px/20px "Lucida Grande", verdana, sans-serif;
	text-align: center;

}

#navcontainer a
{
	color: #000;
	text-decoration: none;
	display: block;
	width: 70px;
	border: 1px solid #666666;


}

#navcontainer li#active { background: url(../images/navi-hover.jpg) repeat-x 20px; }
#navcontainer a:hover { background: url(../images/navi-hover.jpg) repeat-x 20px; }
#navcontainer {
	margin-top: 10px;
	margin-left: 30px;

}

I created a CSS box where there's a header image & a css box under it, having 3 sides (no top border). It looks good in firefox, but can't get the box to close all the way (by meeting the header image) in explorer. There's a 2-3 px space there.

li'l help please?

Hey there. im working on a website project and want to remove the cellspacings....


Im working with mm dreamweaver and got this code from the reference which is buildin: "cell-spacing"

but its not working...

any ideas?

Hi everybody. I'm attempting to format video thumbnails horizontally across a page, and I'm experiencing some very weird behaviors.

A bit of basic background on the site - this is a Drupal 5 site sporting a customized version of the "Lite Jazz" theme. XHTML & CSS are both valid.

Basically, I just want to have the thumbnails scroll horizontally from left to right, then break and continue directly underneath. However, I am getting this odd "stair" effect in Firefox (for lack of a better way to put it). The alignment looks fine in IE, however in IE the thumbnail furthest to the right is squashed up against the side of the border. I have attached two screenshots to give you an idea. Below is a sample of the video thumbnail HTML that is output by Drupal and all (what I think is) all of the pertinent CSS styling. Additionally, I am aware that I can combine several of these CSS classes, so there is no literal need for multiple div tags, but these divs are generated by a short series of tpl files, and I don't think they are hurting anything. I could of course be wrong, but it would be hard to really consolidate them they way that the template is structures.

Here's the HTML involved:
Code:

<div class="node">
      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/48"><img src="http://kathleenmackie.com/files/48_AtlantaFinal.jpg" alt="Watch this video!" /></a><br />
vid: 48<br />
type: video<br />
status: 1<br />
created: 1207090735<br />
</div></div>
  
  </div>

<div class="node">
      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/47"><img src="http://kathleenmackie.com/files/47_FirefoxScreenSnapz003.jpg" alt="Watch this video!" /></a><br />
vid: 47<br />
type: video<br />
status: 1<br />
created: 1206652960<br />
</div></div>
  
  </div>

<div class="node">

      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/45"><img src="/sites/all/modules/flashvideo/thumbnail_MIA.png" alt="thumbnail unavailable" /></a><br />
vid: 45<br />
type: video<br />
status: 1<br />
created: 1204256880<br />
</div></div>
  
  </div>

And the CSS as well....
Code:

.node {
display: inline;
padding: 5px 10px 10px;
}
.node .content, .comment .content {
margin: 0;
}
.node .taxonomy {
font-size: 0.8em;
padding-left: 1.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
 
}
 
.video {
border: 1px solid #1e6730;
background-color: #beff93;
padding: 5px 10px 10px;
clear: right;
float: left;
display: inline;
margin: 15px;
}
 
#header, #content {
width: 100%;
}
.node .content, .comment .content {
margin: 0; 

I would include a bbcode link to the site, but apparently new users cannot do that (I suppose that makes sense from a spamming standpoint). Site is located at kathleenmackie.com. I also have screenshots from IE and Firefox detailing the problems, but again I apparently can't attach files or images (??).

Thanks folks... hoping somebody has an idea or two. Again, I do have screenshots as well.....

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

Why does firefox render the dotted line so different than IE?

I think IE does a much better job of rendering it, is there a way to get the same look in firefox?

HellO~! I'm current trying to code a website for someone, but I'm having some problems getting the menu to work properly in Firefox. It works great in Chrome and Safari but I have no idea how to make it work properly for firefox.

So basically, I have a drop line menu, but instead the sub links all showing up in the same spot when I hover, I want the sub links to show up under the link I'm hovering over. Now, I managed to get this working great by just changing the position of the sub ul and il hover to relative.

URL


But in Firefox, when you hover over a link, that link expands to the width of the sub navigation and pushes the other links to the right. It just looks terrible and I don't know how to fix this.

URL

I've tried searching for a solution, but no luck! I'd really appreciate if someone could enlighten me on how this could be fixed? Or if it's even possible? I'm still new to working with drop downs and would love the help!

Advance thanks for those who read this! Hopefully someone can help me out with this!

EDIT: Looks like my images wont show up after all . Hopefully you will all know what I mean.

CSS CODE:
Code:

* {
margin:0;
padding:0;
}

#nav {
	list-style:none;
	position:relative;
}

#nav li {
	float:left;
	text-align:center;
}

#nav a {
	display:block;
	text-decoration:none;
}

#nav a:active, #nav a:focus, #nav a:hover {
	background:#254563;
}

/* --------- Sub Nav --------- */
#nav li.current ul {
	left:0px;


}

#nav ul {
	position:absolute;
	left:-999em;
	list-style:none;
	padding:0 0 0;
	width: 500px;
}

#nav ul li {
	width: auto;
	margin: 3px 3px 0 0px;

}

#nav ul a {
	font-size: 12px;
	height: auto;
	padding: 5px 10px;
	background: #dfeec9;
	border-radius: 8px;
	-moz-border-radius: 8px;
	width: auto;
}

#nav li:active ul, #nav li:hover ul { 
	height: 30px;
	left: 10px;
	position: relative;
	padding: 0px 3px 5px 3px;
	background: none;
	width: 500px;
}

.navi01 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 33px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_01.png);
	}

.navi02 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 133px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_02.png);
	}

.navi03 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 86px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_03.png);
	}

.navi04 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 83px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_04.png);
	}

.navi05 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 92px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_05.png);
	}

.navi06 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 82px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_06.png);
	}

.navi07 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 30px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_07.png);
	}

HTML NAV CODE:
Code:

 <ul id="nav"> 
			<li><span class="navi01">&nbsp;</span></li> 
			  <li><a href="originalart/gallery.php"><span class="navi02">&nbsp;</span></a> 
<ul> 
	  <li><a href="originalart/gallery.php">Original Art</a></li> 
	  <li><a href="fanart/gallery_fanart.php">Fan Art </a></li> 
	  <li><a href="commissions/gallery_commissions.php">Commissions</a></li> 
	  <li><a href="roughwork/gallery_roughwork.php">Rough Work</a></li> 
	  </ul> 
</li> 
			<li><a href=""><span class="navi03">&nbsp;</span></a> 
<ul> 
	  <li><a href="info.php">Info</a></li> 
	  <li><a href="http://luisarafidi.deviantart.com/journal/11831940/">FAQ </a></li> 
	  </ul> 
 
</li> 
			<li><a href="oldartwork/gallery_oldartwork.php"><span class="navi04">&nbsp;</span></a></li> 
			<li><a href="http://blog.luisarafidi.com/"><span class="navi05">&nbsp;</span></a> 
 <ul>	<li><a href="#">Old Artwork</a></li> 
	  <li><a href="#">More</a></li> 
</ul> 
</li> 
			<li><a href=""><span class="navi06">&nbsp;</span></a></li> 
			<li><span class="navi07">&nbsp;</span></li> 
</ul>	

I'm trying to control the line-height of a list element. I've tried percentage, numbers, and points, without much luck. I'm trying to decrease the vertical spacing between each list element and can successfully do so in Firefox with the line-height property, but when it's viewed in IE, the bottom half of the characters get cut off. Is there a better method to do this in IE?

Thanks!

OK, I have NO hair left and a bruise on my forehead from banging my head against the wall.

I'm creating my html in php, and sending it to a table for display. A cell looks like:
<td><input id="usersalonrow" type="text" name="Title[]" value=' . '"' . $_SESSION['SalonEntryData'][$i]['Title'] . '"' . ' /></td>' .

The CSS looks like:
#usersalonrow {
text-align:left;
background-color:#ffffff;
width:100%;
color:#000;
font-size:14px;
border:0px;
}

This works FINE in IE8, Firefox, and Chrome..... I presume it'll work pretty much everywhere.

BUT, in an error situation, I want to display the EXACT same line with a red background:

<td><input id="errorusersalonrow" type="text" name="Title[]" value=' . '"' . $_SESSION['SalonEntryData'][$i]['Title'] . '"' . ' /></td>' .

so I changed "usersalonrow" to "errorusersalonrow". That's the ONLY CHANGE.. And the CSS looks like:

#errorusersalonrow {
text-align:left;
background-color:#ff0000;
color:#000;
width:100%;
font-size:14px;
border:0px;
}

Works FINE in Firefox. In IE I get no red background, my font changes to a smaller size, and there's a border around the entry.......

BUT, if I TAKE the exact set of entries OUT OF THE CSS and embed them in the line:
'<td><input style="text-align:left; background-color:#ff0000; color:#000; width:100%; font-size:14px; border:0px;"
type="text" name="Title[]" value=' . '"' . $_POST['Title'][$i] . '"' . ' /></td>' .

it AGAIN works fine in all the browsers... Red background and so on.. WHAT have I messed up THIS TIME?

Hi! I have simple page, it has 600X400 no repeat static background, and 3 flash windows positioned over it correctly. In IE all shows fine. But Firefox completely ignores margin commands, and absolution position of third flash window, while in IE all show correctly, as well as in dreamweaver. Where the problem might be?

Here is the full code:

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=utf-8" />
<title>Untitled Document</title>

<style type="text/css"> 
<!-- 
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}


.thrColEls #container {
	width: 600px;  /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-image: url(basic.png);
	background-repeat: no-repeat;
	height: 400px;
} 


.flashtop{
	margin-left: 224px;
	margin-top: 39px;
};
.flashleft{
	margin-left: 29px;
	margin-top: 20px;
	position: relative;
};
.flashright{
	position: absolute;
	left: 296px;
	top: 0px;
};
.thrColEls #sidebar1 h3, .thrColEls #sidebar1 p, .thrColEls #sidebar2 p, .thrColEls #sidebar2 h3 {
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;
}

.thrColEls #mainContent {
  margin: 0 12em 0 12em; /* the right margin can be given in ems or pixels. It creates the space down the right side of the page. */
} 

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body class="thrColEls">

<div id="container">
<div class = "flashtop"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="149" height="50">
        <param name="movie" value="radio/nativeradio.swf" />
        <param name="quality" value="high" />
      <embed src="radio/nativeradio.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="149" height="50"></embed>
  </object></div>
<div class = "flashleft"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="245" height="245">
      <param name="movie" value="radio/nativeradio.swf" />
        <param name="quality" value="high" />
      <embed src="radio/nativeradio.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="245" height="245"></embed>
  </object>
  <div class = "flashright">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="245" height="245">
      <param name="movie" value="radio/nativeradio.swf" />
        <param name="quality" value="high" />
      <embed src="radio/nativeradio.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="245" height="245"></embed>
  </object>
  </div>
  </div>
  

</div>
</body>
</html>

I am using the following css, can someone please show me how to get it to work in firefox it works fine in IE.

Thanks
Tim
PHP Code:
 body {margin: 0px;}
#header {width:100%; height:65px; padding:0px; margin:0px; postion: absolute; top:0px; left:0px; text-align: center; background-image:url(greenback.gif)}
#line {width:100%; height:2px; background-color:black; padding:0px; margin:0px; float:left;}
#bbar {
width: 98.5%;
position: fixed;
bottom: 0px;
background: #000000;
text-align: center;
}
td.tab {background-color: #D52031;}
#frame {width: 960px; height: 400px; padding: 0px; margin: 0px; float: left}
#line {width: 100%; height: 5px; background-color: #E1A63A; padding: 0px; margin:0px;}
td.tab {background-color: #D52031;}
#wrapper {width: 100%; height: 100%; padding: 2px; margin: 2px; float: left;}
#ad1 {width: 200px; height: 60px; border: solid 1px black; float: left;  background-color: #E1A63A; font-size: 8pt; font-family: tahoma; color: white; padding: 1px; margin: 1px;}
#ads {width: 200px; height: 200px; border: solid 1px black; float: left; font-size: 8pt; font-family: tahoma; color: white; padding: 1px; margin: 1px; font-size: 10pt; color: black; font-family: tahoma;}
#sidebar {width:200px; height: 100%; padding: 0px; margin: 0px; float: left;}
#hspace {width: 20px; height: 400px; float: left; padding: 0px; margin: 0px;}
#news {width: 500px; height: 100%; padding: 0px; margin: 0px; float: left;}
#nheader {width: 100%; height: 18px; border: solid 1px black; background-color: #008000; font-size: 12pt; font-family: tahoma; color: white; padding: 2px; margin: 2px;}

#nbox {width: 100%; height: 150px; border: solid 1px black; padding: 2px; margin: 2px;}
#rbar {width: 220px; height: 100%; float: left;}
#subscribe {width: 100%; border: solid 1px black;}
#subhead {width: 100%; height:18px; border-bottom: solid 1px black; background-color:#B92422; padding: 0px; margin: 0px; font-size: 10pt; font-family: tahoma; color: white;}
#subnews {width: 100%; height:55px; padding: 1px; margin: 1px; font-size: 10pt; font-family: tahoma; color: black;
#nobox-inner {width: 100%; height: 100%; padding: 1px; margin: 1px; float: left;}
#nobox-img {width: 150px; height: 100%; padding: 1px; margin: 1px; float: left;}
#nobox-links {width: 350px; height: 100%; padding: 1px; margin: 1px; float: left;}
#test1 {visibility: hidden;}

a:link {font-size: 8pt; font-family: tahoma; color: white; text-decoration: none}
a:visited {font-size: 8pt; font-family: tahoma; color: white; text-decoration: none}a:active {font-size: 8pt; font-family: tahoma; color: white; text-decoration: none}
a:hover {font-size: 8pt; font-family: tahoma; color: #000000; text-decoration: none}

        a.ad:link {font-size: 8pt; font-family: tahoma; color: white; text-decoration: none}
    a.ad:visited {font-size: 8pt; font-family: tahoma; color: white; text-decoration: none}
    a.ad:active {font-size: 8pt; font-family: tahoma; color: white; text-decoration: none}
    a.ad:hover {font-size: 8pt; font-family: tahoma; color: black; text-decoration: none}

        a.tab:link {font-size: 12pt; font-family: tahoma; color: white; text-decoration: none}
    a.tab:visited {font-size: 12pt; font-family: tahoma; color: white; text-decoration: none}
    a.tab:active {font-size: 12pt; font-family: tahoma; color: white; text-decoration: none}
    a.tab:hover {font-size: 12pt; font-family: tahoma; color: black; text-decoration: none}

        a.tab2:link {font-size: 8pt; font-family: tahoma; color: black; text-decoration: none}
    a.tab2:visited {font-size: 8pt; font-family: tahoma; color: black; text-decoration: none}
    a.tab2:active {font-size: 8pt; font-family: tahoma; color: black; text-decoration: none}
    a.tab2:hover {font-size: 8pt; font-family: tahoma; color: red; text-decoration: none}

.mainframe {width:100%; height:400px; padding:0px; margin:0px; float: left;}
.innerframe {width: 800px; height:300px; padding:0px; margin:0px; float: left;}
font.head {font-size:12pt; font-family: tahoma; color: black;}
font.head2 {font-size:12pt; font-family: tahoma; color: white;}
font.copy {font-size:8pt; font-family:tahoma; color:white;}

.subscribe {width: 180px; height: 100px; border: solid 2px black; position: absolute; right: 5px; top: 115px; font-size: 8pt; font-family: tahoma;}
.business {width: 180px; height: 100px; border: solid 2px black; position: absolute; right: 5px; top: 235px;}
.general {width: 180px; height: 100px; border: solid 2px black; position: absolute; right: 5px; top: 355px;}
.subhead {width:180px; height:18px; background-color: black; padding: 0px; margin: 0px; float: left; font-size:10pt; font-family: tahoma; color: white;}
.news1 {width: 470px; height: 75px; border: solid 2px black; padding:2px; margin: 2px;}
.news2 {width: 470px; height: 75px; border: solid 2px black; position: absolute; top: 225px; left: 300px;}
.news3 {width: 470px; height: 75px; border: solid 2px black; position: absolute; top: 330px; left: 300px;}
.newshead {width:470px; height:18px; background-color: black; padding: 0px; margin: 0px; float: left; font-size:10pt; font-family: tahoma; color: white;}
td {font-size: 8pt; font-family: tahoma;}
input {font-size: 8pt; font-family: tahoma; color: black; border: solid 1px black;}
textarea {font-size: 8pt; font-family: tahoma; color: black; border: solid 1px black;}