CSS - Divs Next To Each Other In Ie8/ff/chrome (great!), But Below Each Other In Ie7?

I'm pretty green with CSS (okay, ALL of html )

I used a template from Mollio.org, then modified it, problem is things just dont look right in IE.

url:
http://www.m87-blackhole.org/foo/

css file:
http://www.m87-blackhole.org/foo/css/wushuwest.css

js
http://www.m87-blackhole.org/foo/js/common.js

The biggest problem is the handling of png+transperancy, I added a fix for it in common.js but it doesnt seem to work very well. Also, the head image, in firefox it has a width of 800, which is what I want, but in IE it spans the entire page, how can I fix that?

Any ideas, pointers or resources?

Thanks,
Mike

Please look at the menu on this page,

http://www.dougswansonre.com/

In IE7 it looks perfect, in FF it looks terrible???

I'm beating my head against the wall on this one and could use some expert help. In full disclosure, I am using a css template site I found on a open source template site. The site renders fine in Firefox and Opera, but is problematic with some pages.


Here is one of the pages I am having trouble with in IE:

http://worldwidemediaproject.com/tvrating.php

You'll notice that in IE it appears like there are a bunch of <br>'s after the TV Stations header. This does not appear in either Firefox or Opera.

The strange thing is this one appears fine in IE:

http://worldwidemediaproject.com/tvrating.php?id=71&language=all&genre=all

but this one doesn't:

http://worldwidemediaproject.com/tvrating.php?id=216&language=all&genre=all

The only real difference is that the table size is larger in the pages that have display problems.

Is there some kind of IE hack that I need to apply?


Many thanks....

Yesterday I was able to get my page to validate with strict XHTML and get it looking exactly how I want it to in Firefox:

http://www . restonheights . com/

However, the design falls apart a bit in IE6. Viewing in it IE6 causes the feedback div to grow causing a left-right scroll bar. Scary things also happen if you reduce the width of your browser. Again, it behaves perfectly in FF.

Can anyone recommend an IE hack that would get that feedback div to behave?

Check out this site (WIP)... the issue specifically is with the Screenshots table...

Firefox displays exactly like I would expect it to, screenshots contained within a div, with overflow: auto... looks great in firefox, nicely aligned, no vert. scrollbar... perfect.

Now look at it in IE... looks like it is automatically expanding to include ALL 10 screenshots, which stretches the whole page...

I've done a little research on this, but I can't find a way to get IE to behave... tried word-wrap: break word (as suggested on another site), but this fails as I'm using images.

What makes IE decide to expand the <div> tag automatically.

Here's the code pertaining just to the screenshots section.

Any help or advice you might give me would be appreciated, I've spent a long time developing the site in css and have only opted to use tables for this particular page... thanks!

the CSS:
---------------------------------------------------------
.screenshots_table {
width: 100%;
border: 1px solid #000;
backgroung-color: #061840;
line-height: 15px;
}

#screenshots_table_overflow {
overflow: auto;
padding: 0px;
display: block;
}
---------------------------------------------------------

the html:
---------------------------------------------------------
/* --- START SCREENSHOTS CONTAINER --- */
// establish the number of screens in the directory
$dir_path = "Game Archive/" . $platform_name . "/". $title . "/Screen Captures/";
$screen_count = count (glob ($dir_path . "screen*.jpg"));

echo"<td colspan='5'>";
echo"<table border='0' cellpadding='0' cellspacing='0'>";
echo"<tr>";
/* start screenshots details tab */
echo"<td>";
echo"<table border='0' cellpadding='0' cellspacing='0'>";
echo"<tr>";
echo"<td><img border='0' width='38px' class='display_block'";
echo"src='images/tab_left.jpg'></td>";
echo"<td width='100%' background='images/tab_bg.jpg'></td>";
echo"<td><img border='0' class='display_block' width='70px'";
echo"src='images/tab_screenshots.jpg'></td>";
echo"</tr>";
echo"</table>";
echo"</td>";
/* end screenshots tab */
echo"</tr><tr>";

/* start screenshots */
echo"<td>";
echo"<div id='screenshots_table_overflow'>";
echo"<table width='100%' border='0' class='screenshots_table'";
echo" cellpadding='0' cellspacing='0'>";
echo"<tr>";

// iterate through loop and display linked screenshots as req'd
for ($i = 1; $i < $screen_count + 1; $i++) {
echo"<td cellspacing='1' valign='top' bgcolor='#04112d'>";
echo "<a href='Game Archive/" . $platform_name . "/" .
$title . "/Screen Captures/screen" . $i . ".jpg' rel='lightbox'
class='horizontal'><img border='0' class='border'
src='Game Archive/" . $platform_name . "/" .
$title . "/Screen Captures/small" . $i . ".jpg' /></a>";
echo"</td>";
}

echo"</tr>";
echo"</table>";
echo"</div>";
echo"</td>";
/* end screenshots */
echo"</tr></table>";
echo"</td>";
/* --- END SCREENSHOTS CONTAINER --- */
---------------------------------------------------------

Essentially it lines up correctly but when I view it in firefox it doesn't. How should I tweak my code to make this work?

Here is the url:

http://www.westcadet.com/designs/index.htm

Here is the CSS code snippet that is making this all work

Code:

/*--------------- Navigation Layout Begin ---------------*/
#HeaderTopLeftInnerRight {
	width:618px;
	height:100px;
	vertical-align:top;
}

#NavMenu {
	width:600px;
	padding-top:22px;
	
}

#NavMenu ul {
	list-style: none;
	margin-left:22px;
}

#NavMenu li {
	float: left;
	padding-left:8px;
	padding-right:8px;
}

#NavMenu li a {
	color:#FFFFFF;
	text-decoration: none;
}

#NavMenu li a:hover {
	color:#EB2A2D;
}

.NavChosen {
	background-color: #858181;
	color:#FFFFFF;
}

Hi folks. I'm new to this forum, but I'm not new to CSS. I've inherited a little problem that was left behind by my client's original developer. Here is the code the makes up the header on my page:

Code:

<body>
	<div id="issingle">
	<div id="container">
		<div id="sitename">
			<a href="http://www.nectardesign.com"><img src="http://www.nectardesign.com/blog/wp-content/themes/default/nectar-product-development.gif" border="0" alt="Nectar Product Development"/></a>
		</div>
	<div id="mainmenu">
		<ul>
			<!--<li class=""><a href="http://www.nectardesign.com/blog">Home</a></li>-->

			<li class="page_item"><a href="http://www.nectardesign.com/about/">about</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/service/">service</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/category/all-products">portfolio</a></li>
			<li class="page_item current_page_item"><a href="http://www.nectardesign.com/blog/">blog</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/blog/category/news/">news</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/career/">career</a></li>

			<li class="page_item no_bar"><a href="http://www.nectardesign.com/contact/">contact</a></li>
		</ul>
	</div>

And here is the css pertaining to that code:
Code:

body {
	background:#fff;
	color:#303030;
	font: normal 12px /*Verdana,Tahoma,*/Arial, sans-serif;
	margin:0 auto;
	padding:0;
	text-align:center;
	width:850px;
}
#container {
	position: relative;
	background:url('http://www.nectardesign.com/images/headerbg.jpg') top center repeat-x;
	color:#303030;
	border:1px solid #C8C8C8;
	margin:10px;
/*	padding:10px;*/
	text-align:left;
	height:598px;

}
html>body #container {height: 1%; min-height: 598px;}
#mainmenu {
	position: absolute;
	right: 10px;
	top: 27px;
	margin-right: 5px;
}

#mainmenu li.page_item {
	float:left;
/*	height:35px;*/
	list-style:none;
	margin:0;
	padding:0;
}

#mainmenu a {
	border-right:1px solid #b0b0b0;
	color:#808080;
	display:block;
	margin: 0;
	padding: 1px 8px;
	text-transform:lowercase;
}

Basically, this page's header looks correct in Firefox and Safari, but terrible in IE 5.x (Mac). Not only do the horizontal links (About, Service, Portfolio...) not show up correctly--they're actually on the left sidebar--but the repeating image doesn't repeat like it should. It doesn't even show up at all.

Since I'm new, please don't hesitate to let me know if I'm forgetting to include any other important info.

Thank you!!
J

Fun title

anyway - pretty straight forward question :

essentially i have 2 divs, we'll say Div A and div B -- now heres their relation :

Code:

<div id="a"> 
  <div id="b">
  </div>
</div>

=====
css info : 

/*DIV A*/

#pageContent {  
position : absolute;
display : block;
top : 6.75em;
left : 38em;
width : 340px;
overflow: hidden;
height : 19em;
z-index: 2;
font-family :arial;
font-size : 12px;
color : #c8c8c8;

}

/* DIV B */

#scrollo { 
overflow: scroll;
width : 150px;
height : 150px;
margin: .1cm;
z-index: 1;
font-family :arial;
font-size : 12px;
color : #c8c8c8;
}

in my CSS file, DIV A has a specific Width / Height set -- AND -- an "overflow" setting of "hidden" ( aka hides anything that exceeds its boundries - obviously. )

DIV B has it's overflow set to "scroll"

OK WHY ?

essentially I wish to hide the horizontal scroll bar (since its of no use).


THE CATCH 22 :

Safari : This works fine.

FireFox 1.5.x : Horizontal Scroll bar is still displayed.


3 cheers for standards right? Anyway - I was curious if anyone has encounted this, and if so, knows a work around .

Thanks !

edit: The child being Z-indexed lowwer then the parent was just a "logic attempt" on my part - it does not change the outcome if its zindexed to the same or high lever.

Hi!
I am making an online store for a very important client of mine. I build a shopping sub-list which floats to the left of the main page... and it looks BEAUTIFUL in Safari. But the images are not displaying correctly in Firefox.

I was hoping somebody could help me. Also, could somebody tell me how it looks on IE? I have a mac, and my client is probably using IE... so I can't see how it looks


Anyway, the site is.... blocked



and the CSS

#shoppinglist1 li {
float:right;
list-style: none;
display:block; }

#shoppinglist1 a{
width:100px;
height:20px;
text-decoration:none;
background-image:url(images/shoppingmenu-bgsmall.gif);
background-repeat: repeat;
background-position: center center; }

#shoppinglist1 a:hover {
width:100px;
height:20px;
text-decoration:none;
background-image: url(images/shoppingmenu-hover.gif);
background-position: center center;
}

#shoppinglist1 a:active {
width:100px;
height:20px;
text-decoration:none;
background-image: url(images/shoppingmenu-active.gif);
background-position: center center;
}

and the HTML

<div id="shoppinglist">
<img src="images/shoppingmenu_top.gif" style="margin: -15px auto;"/>
<ul id="shoppinglist1">
<li><a href="#"><img src="images/shoppingmenu_03.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_04.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_05.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_06.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_07.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_08.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_09.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_10.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_11.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_12.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_13.gif" align="center" border="0"/></a></li>
<li><a href="#"><img src="images/shoppingmenu_14.gif" align="center" border="0"/></a></li>

</ul>
<img src="images/shoppingmenu_bottom.gif" />
</div>
Thank you so much for your help!

Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right.

To simplify my problem, look at this example.
Code:

<html>
  <body>
    <div style="float:right">
      Hello there!
    </div>
    <hr>    
  </body> 
</html>

If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly.

It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so:

Code:

<html>
  <body>
    <div style="border: 1px solid #000; ">
      <div style="float:right">
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
      </div>
      <div style="clear: both"></div>
    </div>
    <hr>    
  </body> 
</html>

Am I missing something fundamental here? Is there a better solution? Thanks in advance.

Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF.

Here's the site in Question: http://www.winchps.vic.edu.au

It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6.

Here's the CSS code for the basic layout:

Code:

body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}

#header {
width: 802px;
}

#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}

#content {
padding: 0px;
margin: 0px;
}

#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}

#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}

#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}

#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc).

Anyone got any ideas?

The Example

I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div.

How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content.

Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems:

In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box.

There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px.

Any help would be appreciated. Here's the code:

HTML:

Code:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="reset.css" />
		<link rel="stylesheet" type="text/css" href="testBox.css"> 	
	</head>
	<body>

		<div class="box">
			<div class="boxRowTop">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>
			<div class="boxRowMiddle">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>
			<div class="boxRowBottom">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>

	</body>
</html>

And here is the layout css file:

Code:

/* Box classes */
.box {
	background: rgb(120,120,120);
	height: 200px;
	width: 500px;
}
.boxRowTop {
	height: 16px;
	position: relative;
	width:%100;
}
.boxRowMiddle {
	height: auto;
	width:%100;
	position: relative;
}
.boxRowBottom {
	height: 16px;
	width:%100;
	position: relative;
}
.boxCellLeft {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 16px;
}
.boxCellMiddle {
	height: 100%;
	margin-left: 16px;
	margin-right: 16px;
	width: auto;
}
.boxCellRight {
	height: 100%;
	left: 100%;
	position: absolute;
	top: 0;
	width: 16px;
}


/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
	background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
	background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
	background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
	background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
	background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
	background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
	background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
	background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
	background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}

And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them.

Code:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
}

* {font-size:1em; font-family: inherit;}

:focus {outline:none;}

body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */

p {	margin: 0 0 1.2em 0; }

a			{ color:#ff0000;	text-decoration:none; }
a:link		{ color:#ff0000;	text-decoration:nonee; }
a:visited	{ color:#ff0000;	text-decoration:none; }
a:active	{ color:#ff0000;	text-decoration:none; }
a:hover		{ color:#ff0000;	text-decoration:none; }

a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
	font-weight:bold;
	display:block;
	text-decoration:none;
	color:Black;
}

h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */

fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }

textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }

small { font-size:.9em; }

ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul,   ul ol,   ul dir,   ul menu,   ul dl,
ol ul,   ol ol,   ol dir,   ol menu,   ol dl,
dl ul,   dl ol,   dl dir,   dl menu,   dl dl,
dir ul,  dir ol,  dir dir,  dir menu,  dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
	margin:0;
	padding: 0 0 0 1.5em;
}

hr { margin:0.75em 0; padding:0; }

Any help would be GREATLY appreciated, as I've been working on this for a while!

Thanks!

Thanks for taking the time to read my question.

I'm having to update a site I did a while ago, and am now quite out of practice, as I've done nothing since. I made the site before Chrome was released, and now, since I'm updating it, would like to make sure it displays properly in Chrome as well.

I have buttons for my top nav, that when you hover over them increase in size. The text on the button is not a part of the image. The text in question is "Contact Us" in FF and IE the text wraps after Contact, with the Us underneath it. In Chrome it stays on one line. If I decrease the size of my <div> by one pixel the text wraps in Chrome. I can't do that though as it shaves off one pixel of my button image.

I can't seem to find a site that will tell me what the difference is between Chrome IE and FF.

Here is my css and html for my nav if it helps.

attached is a pic of the difference. The red is to sho the navcontainer div. Notice the difference in the Contact Us button.

Thanks,

Brad

HTML:
Code:

<div id="navcontainer">
        	<ul>
              <li class="Active OneLineAct">Home</li>
              <li class="NotActive1 OneLine"><a href="ZoneAll-Products.htm">Products</a></li>
              <li class="NotActive1 TwoLine"><a href="ZoneAll-ContactUs.htm">Contact Us</a></li>
              <li class="NotActive2"><a href="wadsz3000.htm">Wiring Diagrams</a></li>
              <li class="NotActive1 TwoLine"><a href="stahr.htm">What&rsquo;s New</a></li>
              <li class="NotActive2"><a href="application.htm">Sample Specs</a></li>
              <li class="NotActive2"><a href="tshooting.htm">Trouble Shooting</a></li>
            </ul>
        </div>

CSS:
Code:

#navcontainer ul
{
margin: 10px 8px 0px 0px;
padding: 0px;
/*background-color: transparent;*/
background-color:red;
color: #000000;
width: 728px;
font-family:Arial, Helvetica, sans-serif;
float: right;
}

#navcontainer ul li
{
display: inline;
}

#navcontainer ul li.Active {
text-decoration: none;
text-align: center;
float: left;
width: 104px;
height: 70px;
background-image:url(Images/BigBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
/*letter-spacing: .1em;*/
/*padding: 20px 0px 0px 0px;*/
margin: 0px 0px 0px 0px;
font-size: 22px;
}

#navcontainer ul li.OneLineAct{
padding: 20px 0px 0px 0px;
}

#navcontainer ul li.TwoLineAct{
padding: 10px 0px 0px 0px;
letter-spacing: .11em;
}

#navcontainer ul li.NotActive1 a {
text-decoration: none;
color: #000000;
text-align: center;
float: left;
background-image:url(Images/SmallBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
width: 79px;
height: 53px;
margin: 10px 12px 0px 13px;
font-size: 14px;
}

#navcontainer ul li.NotActive2 a {
text-decoration: none;
/*color: #000000;*/
color:#990000;
text-align: center;
float: left;
background-image:url(Images/SmallBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
width: 79px;
height: 53px;
letter-spacing: .1em;
margin: 10px 12px 0px 13px;
padding: 12px 0px 0px 0px;
font-size: 14px;
}

#navcontainer ul li.NotActive1 a:hover {
text-align: center;
background-image:url(Images/BigBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
text-decoration: none;
/*letter-spacing: .1em;*/
width: 104px;
height: 70px;
margin: 0px 0px 30px 0px;
font-size: 20px;
float: left;
}

#navcontainer ul li.NotActive2 a:hover {
text-align: center;
background-image:url(Images/BigBlueButton.jpg);
background-repeat:no-repeat;
background-position:top;
text-decoration: none;
/*letter-spacing: .1em;*/
width: 104px;
height: 70px;
margin: 0px 0px 13px 0px;
padding: 8px 0px 0px 0px;
font-size: 20px;
float: left;
}

#navcontainer ul li.OneLine a{
padding: 18px 0px 0px 0px;
}

#navcontainer ul li.TwoLine a{
padding: 12px 0px 0px 0px;
letter-spacing: .11em;
}

#navcontainer ul li.OneLine a:hover {
padding: 20px 0px 0px 0px;
}

#navcontainer ul li.TwoLine a:hover {
padding: 10px 0px 0px 0px;
}