CSS - Firefox And Css A:* Elements

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.

I'm making a webpage for myself, and am coding to current Transitional XHTML and CSS standards. I'm using Firefox 0.9.2 for viewing the page.

The problem I'm having is with adding a class to a <td> element and getting it to work correctly in IE 6. The CSS class I'm using for the <td> element is as follows:

Code:

.w3type{color: black; background-color: #FFCE6B;}

Code:

.w3type:hover{color: white; background-color: red; background-image: url(images/mrgreen.gif); background-repeat: no-repeat; background-position: right;}

I add this class to a <td> tag:

Code:

<td class="w3type">

and when i view it in FF, the text and background work correctly, changing color and adding a little image to the right when I hover my mouse over it.

The problem is that when I go to view the code in action with IE 6, neither the background nor the image will appear on hover. Is this a problem with IE, or my code?

If you want to see the code on my site, here's the link. The css formatting in question is on the lower left corner of the page (the W3C webbadges).

Thanks for any help

I'm trying to learn CSS. I've taken great pains to get everything right. My pages all validate and they look correct on Firefox and mostly correct on Chrome. However IE is all over the place. If you view the below pages side by side on Firefox and IE, the following occur (in order of importance):
- the top main box is pushed below where the left boxes end
- the upper-right drop-down stuff is totally off in the weeds (Chrome also looks like IE)
- "Recipes" tab isn't borderless on the bottom edge
- left boxes are the wrong size and push "Clear List" out of bounds
- search button is off in relation to search box

mcrackan.com/recipes/csstest.htm
mcrackan.com/recipes/css/default.css
(Sorry about the non-links. I'm apparently not allowed to post click-able links yet.)

Can anyone point me in the right direction for whatever I'm doing wrong?

- Dinah

hello everyone, 'tis my frist post... Just had'a quick question

I'm working on a page, and l'm trying to create a text input with a background image, that has NO border, so that it nests inside of a table cell with no excess fluff.

However the input has a 1 pixel high "line" that spans across the top of the element, and a 1 pixel high "line" across the bottom as well. I can't seem to get rid of it, is it possible?

here's the code, l was trying to get to work with this:

Code:

<HTML>
<HEAD>
<style>

/*Left searchBar Cap*/
td.leftCap{
	background-color: #c0c0c0;
	background-image: url('images/searchBar_1x1.gif');
	background-position: 0px 0px;
	width: 28;
	height: 50;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}
/*right searchBar Cap*/
td.rightCap{
	background-color: #c0c0c0;
	background-image: url('images/searchBar_1x3.gif');
	background-position: 0px 0px;
	width: 34;
	height: 50;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}


/*searchBar Top bar*/
td.searchTop{
	background-color: #c0c0c0;
	background-image: url('images/searchBar_1x2.gif');
	background-repeat: repeat-x;
	background-position: 0px 0px;
	width: 425;
	height: 16;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}

/*searchBar Bottom*/
td.searchBottom{
	background-color: #c0c0c0;
	background-image: url('images/searchBar_3x1.gif');
	background-repeat: repeat-x;
	background-position: 0px 0px;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
	width: 425;
	height: 15;
}


/*center of searchBar*/
td.searchCen{
	background-color: limegreen;
	background-position: 0px 0px;
	width: 425;
	height: 19;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}

BODY {
	background-color: #c0c0c0;
	background-attachment: scroll;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 0;
	margin-left: 0;
}

/*input*/
.input {
	background-image: url('images/searchBar_2x1.gif');
	color: #191919
	border-width: 0px;
padding: 0px;
border-style: hidden;
border: 0;
border-top-width: 0px;
border-bottom-width: 0px;
	font-family: Comic Sans MS (cursive);
	font-weight: extra-bold;
	font-size: 10pt;
	width: 425; 
	height: 19;
}


</style>
</HEAD>
<BODY>
<center>
<form>
<table cellpadding="0" cellspacing="0">
<tr><td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="leftCap">
</table>
<td>
<table bgcolor="#c0c0c0" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="searchTop">
<tr>

<td class="searchCen">
<input type="text" size="40" class="input" value="search google ... ">


<tr><td class="searchBottom">
</table>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="rightCap">
</table>
<td>

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#c0c0c0" align="center">
<a onClick="javascript:searchGoogle();" href="#">
<img border="0" src="images/searchBar_1x4.gif" width="113" height="50"></a>
</table></table>
</form>
<script>
query = document.forms[0].elements[0].value;
function searchGoogle(){
if(query){
url = "http://www.google.com/search?hl=en&lr=&q="+query+"&btnG=Search";
window.open(url);
}}
</script>

</BODY>
</HTML>

Thanks for your help!
Samantha G.

Hi,

q)I have a horizontal menu of 4 text buttons on top on screen and another bit of text on the left of it . I have a text element on far left and 4 text elements on far right . The whole section is in a div tag which displays it in a horizontal bar of 10% height.

To place the text elements of far right I use float but this displays it on line below where i want it. I want text on far left and menu on far right (no spaces between each link) all in the same line.

Code:

#t1 a {font-size:10px;
	font-family:verdana;
	font-weight:bold;
	border:1px outset aqua;
	background-color:aqua;
	color:#000000;
	text-decoration:none;
	display:inline;
	width:15%
	word-spacing: 0;



}
...
<div id="t1">


 This is the 
place where the logo goes

 <a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>      
  <a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>  
</div>

Firstly, I'd like to say that I've been browsing this forum for a while now, as well as sites such as w3schools, and I've found it all to be very helpful. But now I have a situation that I haven't been able to solve on my own.

Essentially, I want to make a clear and simple CSS-based layout that will work across browsers and platforms. I use a Mac myself, and it's difficult for me to check for problems with Internet Explorer. The problem I'm currently having concerns layout and positioning.

Here's a link to the splash page I'm working on for a student organization: http://individual.utoronto.ca/ghp/fasu2006/

Before I make the full site I want to work out layout troubles I've been having.

I got on a PC and the text when viewed with IE did not seem to properly align within the opaque white box I made for it. I've been feeling a little overwhelmed with concepts of absolute vs. relative positioning, unit values such as percents, px, em, and making use of things like padding, margins etc. and I'm hoping I can get some advice.

So in one sentence, here is my question: How can I position elements (text, divs, images, anything) on the screen using CSS in an efficient way that will produce a similar result in different browsers?

Here is the code that I think is relevant:

Code:

p {font-size: .75em; font-weight: bold; margin-left: 12em;
		margin-top: 8em;}

	#content {margin-top: 10px; margin-bottom: 10px;
		margin-right: auto; margin-left: 3em;
		width: 800px; padding: 20px;
		background: transparent;}

	#overlayback {position: absolute; top: 8em;
		left: 15em; width: 250px; height: 250px;
		z-index: 0;
		filter: alpha(opacity=80); opacity: .80;
		background: #FFF;}

	#overlaytext {position: absolute; top: 3em;
		left: 15em; z-index: 1;}
		
	h1 {font-size: 6em; margin-left: .1em;
		margin-top: .75em;}

	h2 {font-size: 1em; font-weight: normal;
		margin-left: 9em; margin-top: -4.5em}
</style>
</head>
<body>
	<div id="content"><img src="images/tower.gif" width="297" height="422" alt="tower">
		<div id="overlayback"></div>
		<div id="overlaytext"><h1>fasu</h1>
		<h2>2006-2007</h2>
		<p>coming soon</p></div>
	</div>

I hope I've been clear and thanks in advance for any advice. It's very much appreciated.

Hi guys, I don't know if this is possible..

I have a table with position: fixed and width: 100% height: 100% so it covers the entire screen. There is text behind it, you can see through the table and there is text back there. My problem is you can't click on anything in the background, behind the table. You can't select the text and you can't click the links because the table is blocking them.

So my question is it possible to click through the table element on the links in the background and stuff?

http://perfbase.com/beta/tablesector/v7/

I tried setting the middle td to visibility: hidden and display: none but that didn't work.

I tried javascript events but click, mousedown, mouseover, none of them work for the text in the background.

Thanks a lot!

I don't know if that is what one would call this topic...but I'm having a lot of trouble understanding "referencing elements" in CSS.

for example what is the difference between:
Code:

ul li { } 

and
Code:

li ul{ } 

Or let's say I have:
Code:

<div id="bottom">
 <a id="copy" href="http://www.whatever.com">Whatever</a><br>
 <a class="credits" href="http://www.anothersite.com">Another Site</a><br>
 Some other random text
</div>

What is the CSS to reference the link with id="copy"? or the link with class="credits"?

Many menus use nested <ul>s and <li>s and have IDs or classes for them as well. I'm very confused as to the syntax to reference an <li> in a <ul> as opposed to a <ul> in an <li>.

Anyone have links to some documentation on this?

Hi,
here's what i'm looking to do;
i have a css style set for <ul> and <li> elements. Is there a way to bypass the styles for certain lists?

Thank you in advance.

Hi all, after my last query it was suggested that my use of absolute positioning for every element was not necessary.
I should go with the flow.
So I copied a basic page structure and twiddled a little.

Here is the result so far
html link

css link

A couple of questions.
1. Would you say I'm on the right track, or should I be looking at a different style structure?
2. The page appears in ie to have gaps around the elements.
In Mozilla it looks like I hoped it would look.
How to close up gaps in ie. I'm trying padding, margin, negative values etc, Checking in the morning in hope of miraculous fix.
No luck so far. Any help, advice appreciated.
Thanks Solar..

Hi everyone -- first post here in the forums. I hope I can get some pointers on how to get my page to display correctly in IE.

I have 2 div tags at the top of my page that are built sorta like this:

Code:

<div>
   <ul>
     <li>
       some thing (images in my case, and a search bar)
     </li>
   </ul>
</div>

My css for these elements has "list-style:none;" -- and this works great in modern browsers like firefox, chrome, safari, opera... but the old dinosaur which 30% of my visitors still use doesn't handle this all right. See, I am displaying these list elements in a single horizontal row, but IE wants them in a single vertical column. UGH.

I have a post with a screen shot from firefox and IE at this link:

http://corneveaux.com/blog/new-animated-banner-and-internet-explorer-sucks

So, I am sure its something I have done wrong -- but I cannot get my arms around the problem with firebug or IE developer tool bar. I am a total CSS newb here, so any tips much appreciated. Oh, and I checked and indeed my CSS validates.

Thanks everyone!

I'm floating an image left and on the right, I'm placing a tabbed menu. FF lines the menu at the top-right corner, IE lines it up at the bottom-right(which is correct). I've tried margin, padding, vertical-align, but nothing will pull that menu down without severely affecting IE. Any suggestions?

Hi everyone

Hoping someone can help with a niggly problem. My site is working great in Mozilla but I'm getting a gap between two divs in IE6 and Opera 7. Compare the following in IE6, Opera 7 and Mozilla and see the gap below both the 'welcome' and 'latest' graphics:

http://www.crashingbydesign.com.au/newsite/

The relevant code is as follows:

Code:

<div id="content_container">
  <div id="belowbg">
    <div id="left"> 
       <div id="h3lft"> 
          <h3>Welcome</h3>
       </div>
       <div id="contentlft">
	<p>Lorem ipsum ...</p>
       </div>
       <div id="footlft"></div>
     </div>
     <div id="right"> 
       <div id="h3rght"> 
          <h3>Latest</h3>
        </div>
	<div id="contentrght">
				<p>Lorem ipsum ...</p>
	</div>
	<div id="footrght"></div>
     </div>
   </div>
   <div id="footer"> 
      <p>text</p>
    </div>
</div>

The relevant CSS is as follows:

Code:

#content_container {
	position: absolute;
	top: 406px;
	left: 50%;
	margin: 0 0 0 -372px;
	width: 742px;
	height: auto;
	z-index: 10;
}

#belowbg {
	padding: 0 11px 11px 11px;
	width: 720px;
	height: auto;
	background-color: #313131;
}

/*hack to ensure that Mozilla encloses the floats with the #belowbg div*/
#belowbg:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

#left {
	float: left;
	width: 481px;
	height: auto;
	padding: 0;
	margin: -25px 0 0 0;
}

#h3lft {
	width: 481px;
	height: 25px;
	background: url(images/welcomehd.gif) no-repeat;
	text-indent: -9000px;
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}

#contentlft {
	width: 459px;
	height: auto;
	background-color: #293942;
	border: 1px solid #636B73;
	margin: -1px 0 0 0;
	padding: 10px 10px 0 10px;
	font-size: 1.2em;
	line-height: 1.6;
	display: block; 
}

#footlft {
	width: 481px;
	height: 20px;
	margin: -1px 0 0 0;
	background: url(images/welcomeft.gif) no-repeat;
	display: block;
}

#right {
	float: right;
	width: 230px;
	height: auto;
	padding: 0;
	margin: -25px 0 0 0;
}

#h3rght {
	width: 230px;
	height: 25px;
	background: url(images/latesthd.gif) no-repeat;
	text-indent: -9000px;
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}

#contentrght {
	width: 208px;
	height: auto;
	background-color: #525252;
	border: 1px solid #636B73;
	margin: -1px 0 0 0;
	padding: 10px 10px 0 10px;
	font-size: 1.2em;
	line-height: 1.6;
	display: block;
}

#footrght {
	width: 230px;
	height: 20px;
	margin: -1px 0 0 0;
	background: url(images/latestft.gif) no-repeat;
	display: block;
}

#footer {
	position: relative;
	top: 0;
	left: 0;
	width: 720px;
	height: 188px;
	padding: 20px 10px;
	margin: 0;
	background: url(images/btmhatlines.gif) right no-repeat;
	font-size: 1.1em;
	line-height: 1.6;
	text-align: center;
}

Can anyone see my mistake?

Cheers

Hi All,

Still working on a site for a friend.

www dot helenstow-cpsychol.co.uk/faqs dot html

On this page, I want the scrolling '#content1' box to be about 200-250 pixels longer, but in making it longer it overlaps vertically with other elements on the page ('#nav1' etc) and displaces them.

The way elements are placed relative to each other was designed by someone very kind on another forum. I find it quite confusing to be honest (Im a total newb.) and was wondering if this is the best way to do this or if there is a way of aligning elements by just specifying where on the page they should be without necessarily affecting the position of other elements? (Is this possible using z-index?)

If this is possible, how might I go about it and is it a good or bad idea? (the guy who helped me previously appeared to be pretty smart, so I'm guessing there's a reason he laid things out the way he did)

Here is my CSS:

Code:

* {
    padding:0;
    margin:0;
    list-style-type:none;
 }
.link1 a:link,.link1 a:visited,.link1 a:active { 
    color:#000000;
    font-family:arial,helvetica,sans-serif;
    font-weight:bold;
 }
.link1 a:hover { 
    background-color:#000000;
    text-decoration:none;
 }
.link2 a:link,.link2 a:visited,.link2 a:active { 
    color:#00def5;
    font-family:arial,helvetica,sans-serif;
    font-size:16px;
    font-weight:bold;
 }
.link2 a:hover { 
    color:#fff;
    background-color:#286d8c;
    text-decoration: none;
 }
.link3 a:link, { 
    color:#FFFFFF;
    font-family:arial,helvetica,sans-serif;
    font-size:24px;
    font-weight:bold;
 }
.link3 a:visited,.link3 a:active { 
    color:#42daf5;
    font-family:arial,helvetica,sans-serif;
    font-size:24px;
    font-weight:bold;
 }
.link3 a:hover { 
    color:#FFFFFF;
    text-decoration: none;
 }
body {
    background-color:#000;
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:100%;
    text-align: center;
 }
h1 {
    font:bold 20px tahoma,helvetica,arial,sans-serif;
    color:#ffa507;
    text-shadow:0 1px 1px #000;
    text-align:center;
    text-decoration:underline;
 }
h2 {
    font:bold 18px tahoma,helvetica,arial,sans-serif;
    color:#ffff01;
    text-shadow:0 1px 1px #000;
    text-align:center;
    text-decoration:underline;
 }
h3 {
    font:italic 16px tahoma,helvetica,arial,sans-serif;
    color:#fff;
    text-shadow: 0 1px 1px #000;
    text-align: center;
 }
h4 {
    font:bold 16px tahoma,helvetica,arial,sans-serif;
    color:#000;
    text-shadow: 0 1px 1px #ffa507;
    text-align:center;
    text-decoration:underline;
 }
h5 {
    font:bold 16px tahoma,helvetica,arial,sans-serif;
    color:#000;
    text-align:center;
 }
#container1 {
    width:1008px;
    height:1168px;
    margin:auto;
    background-image:url(../images/Alt-Pages-BG.jpg);
 }
#content1 {
    width:515px;
    height:448px;
    padding-top:20px;
    padding-bottom:0px;
    padding-right:5px;
    padding-left:5px;
    border:3px solid transparent;
    margin-top:0px;
    margin-bottom:0px;
    margin-right:0px;
    margin-left:55px;
    text-align:center;
    overflow:auto;
 }
#content2 {
    width:900px;
    height:20px;
    border:3px solid transparent;
    padding:0px 0px 0px 0px;
    margin:185px 54px 0px 54px;
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:14px;
    color:#fff;
    text-align:center;
    overflow:auto;
 }
 #content3 {
    width:260px;
    height:100px;
	padding-top:0px;
    padding-bottom:0px;
    padding-right:15px;
    padding-left:15px;
    margin-top:20px;
    margin-bottom:0px;
    margin-right:110px;
    margin-left:110px;
    border:3px solid #000;
    background-color:#fff;
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:14px;
    color:#000;
    text-align:center;
    overflow:auto;
 }
	#content4 {
    width:400px;
    height:180px;
	padding-top:0px;
    padding-bottom:0px;
    padding-right:15px;
    padding-left:15px;
    margin-top:20px;
    margin-bottom:0px;
    margin-right:0px;
    margin-left:42px;
    border:3px solid #000;
    background-color:#fff;
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:14px;
    color:#000;
    text-align:center;
    overflow:auto;
 }
#nav1 {
    margin-bottom:36px;
    overflow:hidden;
 }
#nav1 li {
    margin-bottom:40px;
    position:relative;
 }
#li1a {margin-left:835px;}
#li1 {margin-left:761px;}
#li2 {margin-left:687px;}
#li3 {margin-left:613px;}
#li4 {margin-left:539px;}
#li5 {margin-left:465px;}
#li6 {margin-left:391px;}
#li7 {margin-left:28px;}
#li8 {margin-left:96px;}
#li9 {margin-left:90px;}
#li10 {margin-left:92px;}
#li11 {margin-left:332px;}
 }
#nav1 a,#nav2 a { 
    position:relative; 
    display:block;
    height:30px;  
    background-image:url(../images/Icons.jpg);
 } 
#nav1 span,#nav2 span { 
    position:absolute;
    top:0;
    left:0;
    height:30px; 
    z-index:1;
    background-image:url(../images/Icons.jpg);
    cursor:pointer;
 }
#home,#home span {
    width:149px;
    background-position:-835px -584px;
 }
#about,#about span {
    width:223px;
    background-position:-761px -644px;
 }
#appts,#appts span {
    width:297px;
    background-position:-687px -704px;
 }
#fees,#fees span {
    width:371px;
    background-position:-613px -764px;
 }
#faq,#faq span {
    width:445px;
    background-position:-539px -824px;
 }
#links,#links span {
    width:519px;
    background-position:-465px -884px;
 }
#blog,#blog span {
    width:593px;
    background-position:-391px -944px;
 }
#home:hover span {
    width:149px;
    background-position:-835px -3px;
	background-image:url(../images/Icons.jpg);
 }
#about:hover span {
    width:223px;
    background-position:-761px -63px;
    background-image:url(../images/Icons.jpg);
 }
#appts:hover span {
    width:297px;
    background-position:-687px -123px;
    background-image:url(../images/Icons.jpg);
 }
#fees:hover span {
    width:371px;
    background-position:-613px -183px;
    background-image:url(../images/Icons.jpg);
 }
#faq:hover span {
    width:445px;
    background-position:-539px -243px;
    background-image:url(../images/Icons.jpg);
 }
#links:hover span {
    width:519px;
    background-position:-465px -303px;
    background-image:url(../images/Icons.jpg);
 }
#blog:hover span {
    width:593px;
    background-position:-391px -363px;
    background-image:url(../images/Icons.jpg);
 }
#nav2 li {
    float:left;
    display:inline;
    position:relative;
 }
#nav2 a {
    height:124px;
 }
#nav2 span { 
    height:124px; 
 }
#bps,#bps span {
    width:131px;
    background-position:-28px -1041px;
 }
#hps,#hps span {
    width:131px;
    background-position:-180px -1041px;
 }
#scp,#scp span {
    width:131px;
    background-position:-332px -1041px;
 }
#pay,#pay span {
    width:131px;
    background-position:-484px -1041px;
 }
#email,#email span {
    width:131px;
    background-position:-849px -1041px;
 }
#bps:hover span {
    width:131px;
    background-position:-28px -460px;
    background-image:url(../images/Icons.jpg);
 }
#hps:hover span {
    width:131px;
    background-position:-180px -460px;
    background-image:url(../images/Icons.jpg);
 }
#scp:hover span {
    width:131px;
    background-position:-332px -460px;
    background-image:url(../images/Icons.jpg);
 }
#pay:hover span {
    width:131px;
    background-position:-484px -460px;
    background-image:url(../images/Icons.jpg);
 }
#email:hover span {
    width:131px;
    background-position:-849px -460px;
    background-image:url(../images/Icons.jpg);
 }

I'd also like to be able to move '#content1' down about 10 pixels from the top of the page (but when I add 10 pixels to the 'margin-top' it moves the background image for '#container1' down with it!?

I would be incredibly grateful for any and all help.

My very best wishes,

Tom

I am new to css and just had a quick question. (please forgive me for any invalid lingo... hopefully you can make sense of my question)

I am creating a dynamic calendar of events page, the calendar will be built using a table. If I put "table.calendar" in my style sheet to format the overall table, and I have th.calendar, td.calendar, do I have to add the "class" property to th or td, or will they automatically be in the calendar class because they are part of the table.

For example...
Do I do this?
Code:

<table class="calendar">
<tr><th></th></tr>
<tr><td></td></tr>
</table>

Or this?
Code:

<table class="calendar">
<tr><th class="calendar"></th></tr>
<tr><td class="calendar"></td></tr>
</table>