CSS - Empty Div Causing Problems

I am creating a CMS system that will be implementing nested drop down menus. It being a CMS, the clients will be able to adjust what menu items are to be displayed. Hopefully, I can explain my problem here clearly.

The drop down menu works as follows. When a user moves his mouse over the menu item, the menu item is highlighted and the children of that menu item are displayed. Then if the mouse is moved over one of the children, the child menu item is highlighted and any children of that menu item are displayed, etc. To do the highlighting I am using Javascript to change the element's class from 'menuitem' to 'menuitem_highlighted' using onMouseOver and onMouseOut. Now to my problem: I want to use <a> tags for the menu items on the menu, not just onClicks. So I have used CSS to assign a class definition to 'menuitem a' and 'menuitem_highlighted a' Now this works fine for the top level menu, however, when you get to the nested menus, CSS causes all of the children <a> tags to use the 'menuitem_highlighted a' class even when the mouse is not over top of them.

A simplied example of the problem that I have run into is this:
Code:

<!--- CSS --->
  .tableinfo {
	width: 200px;
	padding: 0px;
	margin: 0px;
  }
  .tableinfo .menuitem { 
  	background-color:#666666;
	color:#FFFFFF;
	text-align:left;
	border: 1px solid #FF0000;
  }
  .tableinfo .menuitem a { 
	color:#FFFFFF;
	text-decoration:none;
  }
  .tableinfo .menuitem_highlighted { 
  	background-color:#FFFFFF;
	color:#666666;
	text-align:left;
	border: 1px solid #FF0000;
  }
  .tableinfo .menuitem_highlighted a { 
	color:#666666;
  }

Code:

<!--- HTML --->
<table class="tableinfo">
  <tr>
    <td class="menuitem_highlighted">
      <a href="index.html">Text</a>
      <table class="tableinfo">
        <tr>
          <td class="menuitem">
            <a href="index.html">Text</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

In the example, I expect the first link to use the 'menuitem_highlighted a' class, however, I was hoping that the second would use the 'menuitem a' class, but no such luck.

If you need any further informatoin, please let me know. Thanks for your help!

Mitchell Killian (II Cor. 12:9)
Integrity Design and Coding
http://www.integritydc.net
"Except a man be born again, he cannot enter into the kingdom of heaven." John 3:3

Hi guys,

I've applied a clearfix to contain two floating elements (the checkbox and submit button - see below), unfortunately, this doesn't seem to work too well with the rounded corners technique I'm using.

Before adding floating elements and clearfix
http://www.soapshoe.co.uk/testa.php

After adding floating elements and clearfix
http://www.soapshoe.co.uk/test.php

Anyone got any advice on what's going wrong?

I really can't seem to even find the words to describe this error. I have posted before in regards to another issue that seemed to have alluded you guys so i am posting again for another error that is more important.

What is the Error?
Ok basically the yahoo(google has same issue) ad lags when you scroll up and down. When I say lag i mean it sort of stays in it's position while the rest of the layout moves on, after a second it corrects itself.

I have excluded everything in my layout except the header, and even tried removing the ad from the div and everything and can't seem to figure out what is causing this issue.

http://www.unlimitedgamer.net/header_re.php

For users on WINDOWS (for some reason it works fine on MAC) based computers simply focus your eyes on the advertisement, and scroll up and down while watching it. It's impossible not to see it.

Note, this issue doesn't occur in IE7 (note sure about IE6)

Any help would be greatly appreciated as this lil bug is holding up the opening of my layout

100% height, floats, renders fine in FF but in IE I get a scrollbar and a bit of space underneath the wrapper div. I can put up a screenshot if needed. I've been trying to solve the issue for 2 days now. Thanks for the help.

CSS
Code:

@charset "utf-8";
/* CSS Document */
html, body {
	height: 100%;
}

body {
	background-color: #63aacf;
	margin-top: 0;
	margin-left: 0;
	padding: 0;
}

h1 {
	margin-top: 0;
	padding: 0;
}

#header {
	background-image: url(images/top.png);
	background-repeat: repeat-y;
	margin-bottom: 0;
}

#content {
	margin-top: 0;
}

#spacer {
	background-image: url(images/supra_02.png);
	background-repeat: no-repeat;
}

#wrapper {
	width: 800px;
	min-height: 100%;
	margin: 0;
	padding: 0;
	background-image: url(images/bg.png);
	background-repeat: repeat-y;
	overflow: hidden;
}

* html #wrapper {
	height: 100%;	
}

#sidebar {
	width: 200px;
	float: left;
}

#mainContent {
	width: 600px;
	float: right;
}

#clearfloats {
	height: 0;
	clear: both;
	overflow: hidden;
}

HTML
Code:

<div id="wrapper">
	<div id="header">
    	<h1>boogy</h1>
        <div id="spacer">&nbsp;</div>
    </div>
    <div id="content">
    	<div id="sidebar">
        Link <br /> Link <br /> Link        </div>
        <div id="mainContent"> Hello World</div>
        <div id="clearfloats"></div>
    </div>
</div>

Hi,

I am finishing up my site and I have decided to add to footer image to each page but when I attempt to add it on a page that has padding whether it be after the text with padding or not the image is detached by approx the padding size from the bottom.

I have been toying around for hours but with no success.
I have also been reading some of the tutorials given to me by the members here which have helped greatly but I am stumped.

The image in question is Code:

<img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" />

If you need me to upload the pics I can do that (website down atm hence the code instead of a url)
(With how great you guys are, I can nearly guarantee that It will only require an extra line added to the css)

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" />  <link rel="stylesheet" type="text/css" href="./index.css" media="all" />  <link rel="shortcut icon" href="http://torquesro.info/favicon.ico" />  <meta name="verify-v1" content="RhiSLQkMtmAKlbQN7TUe1DnWYD/Mxl0ROy7UiZlDGCU=" />  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  <title>TorqueSRO - FAQ</title>  <meta name="description" content="We offer tools for Silkroad Online in order to provide advanced functions, automate game options and deliver new functionality."/>  <meta name="keywords" content="Silkroad, Silkroad Online, Torque, TorqueSRO, tClientless, silkroad clientless, silkroad walkthrough, silkroad tools, Mmorpg, silk, sr33, cheat, hack, sro"/>  <meta name="copyright" content="Copyright TorqueSRO - 2009"/>  <meta name="author" content="UrbanGrafix"/>  <meta name="Distribution" content="Global"/>  <meta name="Rating" content="General"/>  <!--[if IE]>  <style type="text/css" media="all">.borderitem {border-style:solid;}</style>  <![endif]-->  </head>  <body>  <div id="container">  <div id="main">  <a href="/index.html"><img src="images/HomeButton.jpg" id="HomeButton"  alt="TorqueSRO" /></a>  <a href="/tclientless.html"><img src="images/clientless.jpg" id="clientless"  alt="tClientless" /></a>  <a href="/faq.html"><img src="images/FaqButton.jpg" id="FaqButton"  alt="FAQs" /></a>  <a href="/videos.html"><img src="images/VideosButton.jpg" id="Links"  alt="Videos" /></a>  <a href="/forum"><img src="images/ForumButton.jpg" id="AboutButton"  alt="Forum" /></a>  </div>    <div id="ad">  </div>    <div id="main1">  <img src="images/mainlogo.jpg"  alt="TorqueSRO" name="Domi2" id="Domi2" /><img src="images/Main2ndBannerSRO.jpg"  alt="" name="Main2ndBanner" id="Main2ndBanner" /></div>      <div id="Content">  <div id="ContentMain">  <p style="text-align: left"><a href="#a">Q. I’m getting an error when  I run tClientless, it says the side-by-side configuration is incorrect.</a></p>  <p style="text-align: left"><a href="#b">Q. How do I login multiple  accounts?</a></p>  <p style="text-align: left"><a href="#c">Q. tClientless crashed! Why  did this happen?</a></p>  <p style="text-align: left"><a href="#d">Q. How can I make a  character a master for every character logged in through tClientless?</a></p>  <p style="text-align: left"><a href="#e">Q. I want to delete an  alias, how can I do that?</a></p>  <p style="text-align: left"><a href="#f">Q. tClientless says the  authentication failed and/or cannot connect to the server.</a></p>  <p style="text-align: left"><a href="#g">Q. I missed out on the BETA,  will I be able to use tClientless?</a></p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>    <p style="text-align: left"><strong><a name="a" id="a"></a>Q. I’m getting an error when  I run tClientless, it says the side-by-side configuration is incorrect.</strong><br />    A.  Download and install this: <a href="http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en">http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en</a> </p>      <p style="text-align: left"><br />    <strong><a name="b" id="b"></a>Q. How do I login multiple  accounts?</strong><br />    A.  Simply type the account information and hit login again, tClientless will  handle everything.</p>      <p style="text-align: left"><br />    <strong><a name="c" id="c"></a>Q. tClientless crashed! Why  did this happen?</strong><br />    A.  Well, first you should note that tClientless is only in the BETA (development)  stages. The reason it crashed it likely due to incorrect parsing, send the  “lastpacket.txt” file to bot90210 so that I can fix this issue.</p>      <p style="text-align: left"><br />    <strong><a name="d" id="d"></a>Q. How can I make a  character a master for every character logged in through tClientless?</strong><br />    A.  Go to File->Master Manager and enter the character’s name. They will be  saved as a global master and will be able to use master commands for every  character.</p>      <p style="text-align: left"><br />    <strong><a name="e" id="e"></a>Q. I want to delete an  alias, how can I do that?</strong><br />    A.  Go to File->Alias Manager and delete the alias entry.</p>      <p style="text-align: left"><br />    <strong><a name="f" id="f"></a>Q. tClientless says the  authentication failed and/or cannot connect to the server.</strong><br />    A.  This could happen for various reasons, the most common are that our server is  experiencing issues or you are not registered with the BETA test.</p>      <p style="text-align: left"><br />    <strong><a name="g" id="g"></a>Q. I missed out on the BETA,  will I be able to use tClientless?</strong> <br />    A. Possibly.  We’ve limited the users that can join the BETA because we don’t want to  overload the server, if the server can handle 300 users comfortably then you  will increase the limit. We’ve made tClientless connect to our servers because  we’re sick of people posting it elsewhere.</p>  </div>  <img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" />  </div>        <form action="http://www.google.com/cse" id="cse-search-box" target="_blank">  <div align="right">    <input type="hidden" name="cx" value="partner-pub-4151060843783741:adaty3-25z5" />    <input type="hidden" name="ie" value="ISO-8859-1" />    <input type="text" name="q" size="20" />    <input type="submit" name="sa" value="Search" />  </div></form><script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>    <a href="http://validator.w3.org/check?uri=referer"><img          src="http://www.w3.org/Icons/valid-xhtml10-blue"          alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>  <a href="http://jigsaw.w3.org/css-validator/check/referer">      <img style="border:0;width:88px;height:31px"          src="http://jigsaw.w3.org/css-validator/images/vcss-blue"          alt="Valid CSS!" /></a>      </div>  <script type="text/javascript">  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));  </script>  <script type="text/javascript">  try {  var pageTracker = _gat._getTracker("UA-10605650-1");  pageTracker._trackPageview();  } catch(err) {}</script>  <!-- Piwik -->  <script type="text/javascript">  var pkBaseURL = (("https:" == document.location.protocol) ? "https://torquesro.info/piwik/" : "http://torquesro.info/piwik/");  document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));  </script>  <script type="text/javascript">  try {  var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);  piwikTracker.trackPageView();  piwikTracker.enableLinkTracking();  } catch( err ) {}  </script><noscript><p><img src="http://torquesro.info/piwik/piwik.php?idsite=1" style="border:0" alt=""/></p></noscript>  <!-- End Piwik Tag -->  </body>  </html>  

Code:

html, body {  	margin:0;  	padding:0;  }    body {  	background-image: url(images/bglong209.png) ;  	background-repeat: repeat-x;      text-align:center;  	padding:0px;  }  .p {  	margin:0px;  	padding:0px;  	font-size: inherit;  	font-family: inherit;  	font-weight: inherit;  	text-align: inherit;  	color: inherit;  	line-height: inherit;  	vertical-align: top;  }  #container {  	width:654px;  	margin:0px auto;  	top: 0;  }  #ad {  	  }  p {  	padding-top:0px;  	margin-top:0px;  	color: #000;  	background-color: #FFF;  }  img {  	border:0px;  }  .AbsWrap {  	position: relative;  	left: 0;  }  .rowWrap {  	width: 100%;  }  .clearfloat {  	clear:both;  	height:0px;  }  #main {  	width:654px;      margin:0px auto;  	border: 0px none #f0f0f0;  	top:0;  }  #main1 {  	width:654px;      border: 0px none #f0f0f0;  	margin:0px auto;  		  }  #main2 {  	width:654px;      border: 0px none #f0f0f0;  	margin:0px auto;  }  #Content {  	background:#fff;  	clear:both;  	width: 654px;  	font-family: Arial, Helvetica, sans-serif;  	font-size:10px;  }  #ContentMain {  	padding-left: 10px;  	padding-right: 10px;  	padding-top: 20px;  	margin:0px auto;  	border: 0px none #f0f0f0;  	}    #HomeButton {  	margin:0px auto;  	margin-top:0px;  	width:163px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #clientless {  	margin-left:0px;  	margin-top:0px;  	width:164px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #FaqButton {  	margin-left:0px;  	margin-top:0px;  	width:101px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Links {  	margin-left:0px;  	margin-top:0px;  	width:99px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #AboutButton {  	margin-left:0px;  	margin-top:0px;  	width:127px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Domi {  	margin-left:0px;  	margin-top:59px;  	width:320px;  	height:272px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #Domi1 {  	margin-left:0px;  	margin-top:59px;  	width:334px;  	height:272px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #Domi2 {  	margin-left:0px;  	margin-top:59px;  	width:654px;  	height:271px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #tClientlessBanner {  	margin-left:0px;  	margin-top:59px;  	width:333px;  	height:192px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #MainBlueBanner1 {  	margin-left:0px;  	margin-top:0px;  	width:59px;  	height:83px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap3 {  	float:left;  	width:273px;  	margin-top:0px;  	margin-left:0px;  }  #DownloadButton {  	margin-left:0px;  	margin-top:0px;  	width:47px;  	height:48px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap5 {  	float:left;  	width:226px;  	margin-top:0px;  	margin-left:0px;  	border: 0px solid #f0f0f0;    }  #Downloadlatestversionbanner {  	margin-left:0px;  	margin-top:0px;  	width:226px;  	height:25px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap7 {  	float:left;  	width:89px;  	margin-top:0px;  	margin-left:0px;  	border: 0px solid #f0f0f0;    }  #BlueTinyBanner {  	margin-left:0px;  	margin-top:0px;  	width:7px;  	height:11px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Bluelongbanner3 {  	margin-left:0px;  	margin-top:0px;  	width:89px;  	height:11px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Bluelongbanner2 {  	margin-left:0px;  	margin-top:0px;  	width:137px;  	height:23px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #MainBlueBanner2Long {  	margin-left:0px;  	margin-top:0px;  	width:274px;  	height:35px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Main2ndBanner {  	margin-left:0px;  	margin-top:0px;  	width:654px;  	height:87px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #interface {  	margin-left:0px;  	margin-top:0px;  	width:654px;  	height:615px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #footer {  	margin-left:0px;  	margin-top:0px;  	width:655px;  	height:93px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #Version {  	font-size:9px;  	color: #FFF;  	font-weight: bold;  	font-variant: small-caps;  	background-color: #416F7C;  	font-family: Verdana;  	text-align: left;  }  #container #Content #ContentMain p a font {  	color: #0000FF;  }