Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't get rid of tables in my horizontal CSS menu

    Hi all,

    I've got a problem with my CSS/HTML for the navigation element on a site I'm doing. I haven't been able to figure out how to get rid of the tables and I'm sure it can be done.

    I'd appreciate some input on this, if you have a sec.

    The site is http://www.hsd.state.nm.us/ and the relevent CSS and HTML is below:

    Code:
    * {margin: 0; padding: 0;}
    .menu {font-family: "lucida grande", verdana, sans-serif; width:760px; position:relative; font-size:95%;font-weight:bold;text-align:center; color:#333333; }
    .menu ul {list-style-type: none; background-image:url(/images/subbackul.gif);background-position:bottom left; background-repeat:no-repeat;}
    /*topitem background */.menu ul li {float:left; position:relative; width:152px; }
    .menu ul li ul {display: none;}
    .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#ffffff; width:152px;}
    .menu ul li:hover a {color:#ffffff; }
    .menu ul li:hover ul, .menu ul li a:hover ul {display:block; position:absolute; top:50px;left:0; width:152px;}
    /*subitem inactive*/.menu ul li:hover ul li a, /*ie bug fix*/ .menu ul li a:hover ul li a {display:block; background-image:url(/images/subback.gif);background-position:top left; background-repeat:no-repeat; color:#333333; width:132px; line-height:1.5em; padding:10px 10px;}
    /*subitem hover*/.menu ul li:hover {background-image:url(/images/subbackover.gif);background-position:top left; background-repeat:no-repeat;}
    .menu ul li ul li a:hover {background-image:url(/images/subback.gif);background-position:top left;background-repeat:no-repeat;}
    .menu ul a {line-height:45px;}
    .menu ul li a:hover {background-image:url(/images/spacer.gif); background-position:center left; background-repeat:no-repeat;color:#333333; }
    .menu ul li a:hover ul li a:hover {background-image:url(/images/subbackover.gif);background-position:top left; background-repeat:no-repeat;color:#333333; }
    #divhome {background-image:url(/images/navtemplateV3_r1_c1.gif); background-position:center left; background-repeat:no-repeat; text-indent:-5000px; height:50px;}
    #divnews {background-image:url(/images/navtemplateV3_r1_c2.gif); background-position:center left; background-repeat:no-repeat; text-indent:-5000px; height:50px;}
    #divabout {background-image:url(/images/navtemplateV3_r1_c3.gif); background-position:center left; background-repeat:no-repeat; text-indent:-5000px; height:50px;}
    #divcontact {background-image:url(/images/navtemplateV3_r1_c4.gif); background-position:center left; background-repeat:no-repeat; text-indent:-5000px; height:50px;}
    #divworking {background-image:url(/images/navtemplateV3_r1_c5.gif); background-position:center left; background-repeat:no-repeat; text-indent:-5000px; height:50px;}

    Code:
    <div id="nav">
    <div class="menu">
    <ul>
    <li>
    <div id="divhome">
    <a href="/" title="Programs and Services for New Mexicans">Home
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <table summary="Programs and Services for New Mexicans"><tr><td><ul>
    <li><a href="/csed/" title="Providing general child support services">Child Support</a></li>
    <li><a href="/isd/" title="Providing services such as Food Stamps, temporary cash assistance and low income home energy assistance">Income Support</a></li>
    <li><a href="/mad/" title="Ensuring access to medically necessary services for Medicaid-eligible individuals">Medical Assistance</a></li>
    </ul></td></tr></table>
    <!--[if lte IE 6]></a><![endif]-->
    </div>
    </li>
    <li>
    <div id="divnews">
    <a href="/newsroom/" title="News, Press Releases &amp; Publications">Newsroom
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <table summary="News, Press Releases &amp; Publications"><tr><td><ul><li><a href="/newsroom/pressreleases/">Press Releases</a></li>
    <li><a href="/newsroom/diario.html">El Diario sin Nombre</a></li>
    </ul></td></tr></table>
    <!--[if lte IE 6]></a><![endif]-->
    </div>
    </li>
    <li>
    <div id="divabout">
    <a href="/about.html" title="HSD Mission, Goals and Values">About <acronym title="Human Services Department">HSD</acronym>
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <table summary="HSD Mission, Goals and Values"><tr><td><ul>
    <li><a href="/asd/">Administrative Services Division</a></li>
    <li><a href="/doit/">Division of Information Technology</a></li>
    <li><a href="/ohr/">Office of Human Resources</a></li>
    <li><a href="/ogc/">Office of General Council</a></li>
    <li><a href="/oig/">Office of Inspector General</a></li>
    <li><a href="/fhb/" title="(previously Administrative Hearings Bureau)">Fair Hearings Bureau</a></li>
    <li><a href="/oos/">Office of the Secretary</a></li>
    </ul></td></tr></table>
    <!--[if lte IE 6]></a><![endif]-->
    </div>
    </li>
    <li>
    <div id="divcontact">
    <a href="/contact.html" title="HSD Contacts for support and assistance">Contacts
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <table summary="HSD Contacts for support and assistance"><tr><td><ul>
    <li><a href="/contact.html" title="HSD Contacts for support and assistance"><acronym title="Human Services Department">HSD</acronym> Contacts</a></li>
    <li><a href="/communications.html" title="Communications">Communications</a></li>
    <li><a href="/cons.html" title="Handles constituent inquiries, including Senate and House Chief Clerk offices and Senate and House leadership offices">Constituent Services</a></li>
    <li><a href="/oos/nal.html" title="Works with New Mexico's 22 Native American Tribes to foster the government-to-government relationship">Native American Liaison</a></li>
    <li><a href="http://www.health.state.nm.us" title="Dept. of Health Web, NM">Dept. of Health, NM</a></li>
    <li><a href="http://www.hhs.gov" title="Dept. of Health Web, US">US Dept. of Health &amp; Human Services</a></li>
    <li><a href="http://www.newmexico.gov/online_services.php" title="Online Services at NM State Web site">NM Online Services</a></li>
    <li><a href="http://www.newmexico.gov" title="State of NM Web site">State of New Mexico</a></li>
    </ul></td></tr></table>
    <!--[if lte IE 6]></a><![endif]-->
    </div>
    </li>
    <li>
    <div id="divworking">
    <a href="/ohr/" title="What is it like working at HSD?">Working at <acronym title="Human Services Department">HSD</acronym>
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <table summary="What is it like working at HSD?"><tr><td><ul>
    <li><a href="/ohr/jobs.html" title="Lookup open positions &amp; apply.">Job Opportunities</a></li>
    <li><a href="/ohr/employees/" title="Review benefits, policies &amp; notices.">Employee Area</a></li>
    <li><a href="/ohr/verifyemployment.html" title="Confirm present or past employment at HSD.">Verify Employment</a></li>
    <li><a href="/ohr/employees/share/"><acronym title="Statewide Human resource, Accounting, and managerial REporting system">SHARE</acronym></a></li>
    </ul></td></tr></table>
    <!--[if lte IE 6]></a><![endif]-->
    </div>
    </li>
    </ul>
    </div>
    </div>
    I truly would appreciate your help.

    Thanks,

    Robert Kruger

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Not if you expect your drop downs to work in IE without javascript. If you are willing to use JS then yeah you can get rid of them. Its your choice though.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't want to use Javascript, I also don't want to use tables. It appears that you're absolutely convinced that these are the only ways to do it. My research (fairly extensive research) suggests you are right, but I'm HOPING against hope that someone knows how to do it.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm after looking at the code a bit more closely it appears that the tables are there for description purposes. Try this
    Code:
    <div id="nav">
    	<div class="menu">
    		<ul>
    			<li>
    				<div id="divhome"> <a href="/" title="Programs and Services for New Mexicans">Home
    					<!--[if IE 7]><!-->
    					</a>
    					<!--<![endif]-->
    					<ul>
    						<li><a href="/csed/" title="Providing general child support services">Child Support</a></li>
    						<li><a href="/isd/" title="Providing services such as Food Stamps, temporary cash assistance and low income home energy assistance">Income Support</a></li>
    						<li><a href="/mad/" title="Ensuring access to medically necessary services for Medicaid-eligible individuals">Medical Assistance</a></li>
    					</ul>
    					<!--[if lte IE 6]></a><![endif]-->
    				</div>
    			</li>
    			<li>
    				<div id="divnews"> <a href="/newsroom/" title="News, Press Releases &amp; Publications">Newsroom
    					<!--[if IE 7]><!-->
    					</a>
    					<!--<![endif]-->
    					<ul>
    						<li><a href="/newsroom/pressreleases/">Press Releases</a></li>
    						<li><a href="/newsroom/diario.html">El Diario sin Nombre</a></li>
    					</ul>
    					<!--[if lte IE 6]></a><![endif]-->
    				</div>
    			</li>
    			<li>
    				<div id="divabout"> <a href="/about.html" title="HSD Mission, Goals and Values">About <acronym title="Human Services Department">HSD</acronym>
    					<!--[if IE 7]><!-->
    					</a>
    					<!--<![endif]-->
    					<ul>
    						<li><a href="/asd/">Administrative Services Division</a></li>
    						<li><a href="/doit/">Division of Information Technology</a></li>
    						<li><a href="/ohr/">Office of Human Resources</a></li>
    						<li><a href="/ogc/">Office of General Council</a></li>
    						<li><a href="/oig/">Office of Inspector General</a></li>
    						<li><a href="/fhb/" title="(previously Administrative Hearings Bureau)">Fair Hearings Bureau</a></li>
    						<li><a href="/oos/">Office of the Secretary</a></li>
    					</ul>
    					<!--[if lte IE 6]></a><![endif]-->
    				</div>
    			</li>
    			<li>
    				<div id="divcontact"> <a href="/contact.html" title="HSD Contacts for support and assistance">Contacts
    					<!--[if IE 7]><!-->
    					</a>
    					<!--<![endif]-->
    					<ul>
    						<li><a href="/contact.html" title="HSD Contacts for support and assistance"><acronym title="Human Services Department">HSD</acronym> Contacts</a></li>
    						<li><a href="/communications.html" title="Communications">Communications</a></li>
    						<li><a href="/cons.html" title="Handles constituent inquiries, including Senate and House Chief Clerk offices and Senate and House leadership offices">Constituent Services</a></li>
    						<li><a href="/oos/nal.html" title="Works with New Mexico's 22 Native American Tribes to foster the government-to-government relationship">Native American Liaison</a></li>
    						<li><a href="http://www.health.state.nm.us" title="Dept. of Health Web, NM">Dept. of Health, NM</a></li>
    						<li><a href="http://www.hhs.gov" title="Dept. of Health Web, US">US Dept. of Health &amp; Human Services</a></li>
    						<li><a href="http://www.newmexico.gov/online_services.php" title="Online Services at NM State Web site">NM Online Services</a></li>
    						<li><a href="http://www.newmexico.gov" title="State of NM Web site">State of New Mexico</a></li>
    					</ul>
    					<!--[if lte IE 6]></a><![endif]-->
    				</div>
    			</li>
    			<li>
    				<div id="divworking"> <a href="/ohr/" title="What is it like working at HSD?">Working at <acronym title="Human Services Department">HSD</acronym>
    					<!--[if IE 7]><!-->
    					</a>
    					<!--<![endif]-->
    					<ul>
    						<li><a href="/ohr/jobs.html" title="Lookup open positions &amp; apply.">Job Opportunities</a></li>
    						<li><a href="/ohr/employees/" title="Review benefits, policies &amp; notices.">Employee Area</a></li>
    						<li><a href="/ohr/verifyemployment.html" title="Confirm present or past employment at HSD.">Verify Employment</a></li>
    						<li><a href="/ohr/employees/share/"><acronym title="Statewide Human resource, Accounting, and managerial REporting system">SHARE</acronym></a></li>
    					</ul>
    					<!--[if lte IE 6]></a><![endif]-->
    				</div>
    			</li>
    		</ul>
    	</div>
    </div>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Tried that, it doesn't display the subitems when you hover unless it has the table tag there.

    I copied and pasted your text to test, and it doesn't work, but to clarify, the change you made was simply to remove the table tr and td tags right?

  • #6
    New Coder
    Join Date
    Sep 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone? I'm still lost as to what to do here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •