Galen Posted August 8, 2009 Share Posted August 8, 2009 I thought I had this one figured out but ran into a new problem. I'm trying to get a CSS drop-down using tables, which I thought would make it easier to get the borders implemented. I've tried two techniques:1. Using diplay: none / block. This works, but in any browser but IE the revealed TDs are only the length of the text, not the entire row. I might be able to fix this cosmetically but the whole row is no longer clickable, which is what the .navlink class is meant for. Putting width: 100% for the td has no effect. Using pixels does work, but I want to keep the width of the bars relative.2. Using visibility: hidden / visible (this was my fix). This looks fine on all browsers, but the hover works for the invisible portion as well. This is presumbably because I have hover on the table instead of the first row, but when I get the first row a class name and hover on that (note "h2" for the first menu", it doesn't work. I'm really not sure why that is.would appreciate any help, I suppose I could always scrap the table and trying again with ULs, but hoping to avoid that.thanks<?xml version="1.0" encoding="UTF-8"?><!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" xml:lang="en" lang="en"><head><style type="text/css" media="all">body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: auto;}#navbar { width: 100%; height: 30px; font-size: 16px !important; border: thin blue; background-color: #497FBF; position: relative; z-index: 1;}.menu { background-color: #497FBF;/* visibility: hidden;*/ display: none;}.heading { text-align: center; float: left; width: 15%; border: none;}.heading tr td { padding: 4px 0px 5px 0px;}.heading tr td{ border-right: 1px solid blue; border-bottom: 1px solid blue;}.menu td{ border-left: 1px solid blue; border-top: 0; border-right: 1px solid blue; border-bottom: 1px solid blue;}.heading:hover .menu { /* visibility: visible; */ display: block;}.heading:hover { background-color: #00B5EF;}.navlink { display: block; width: 100%; color: black; text-decoration: none;}</style></head><body><div id="navbar"><table class="heading" cellspacing="0"><tr class="h2"><td>Screen Size</td></tr><tr class="menu"><td><a class="navlink" href="#" >Small</a></td></tr><tr class="menu"><td><a class="navlink" href="#" >Medium</a></td></tr><tr class="menu"><td><a class="navlink" href="#" >Large</a></td></tr></table><table class="heading" cellspacing="0"><tr><td>Font Size</td></tr><tr class="menu"><td><a class="navlink" href="#">Small</a></td></tr><tr class="menu"><td><a class="navlink" href="#">Medium</a></td></tr><tr class="menu"><td><a class="navlink" href="#">Large</a></td></tr><tr class="menu"><td><a class="navlink" href="#">X-Large</a></td></tr></table></div></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted August 8, 2009 Share Posted August 8, 2009 That's because tables, table rows and table cells aren't displayed as blocks like other elements are.When using visibility: hidden, the element is still there takes up space, and you can still hover over it even if it can't be seen. Link to comment Share on other sites More sharing options...
Galen Posted August 8, 2009 Author Share Posted August 8, 2009 Thanks, sounds like #2 is a no go. But it looks like setting the ".menu td" width to something like 1000px solves the problem with technique #1. I'll go with that and see how it works. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.