Page 1 of 1

CSS Issue with display: block

Posted: Tue May 25, 2004 1:25 pm
by sinewave
I am building a table to look like a menu where a hover will change the background of the cell (or appear to...doesn't really).


Here is the Table Code:

Code: Select all

<div id="Menu">
						<table width="100%" border="0" cellpadding="0" cellspacing="1">
							<tr >
								<td width="17%" align="center"><a href="#">Weekly</a></td>
								<td width="17%" align="center"><a href="#">Sales</a></td>
								<td width="17%" align="center"><a href="#">Sales</a></td>
								<td width="17%" align="center"><a href="#">Safety</a></td>
								<td width="17%" align="center"><a href="#">Safety</a></td>
								<td width="*" align="center"><a href="#">Packages</a></td>
							</tr>
						</table>
					</div>

Here is the CSS:

Code: Select all

#Menu A&#123;
						display: block;
						font-family: verdana, arial, helvetica;
						font-size: 12px;
						line-height: 15px;
						text-decoration: none;
						color: #ffffff; 
						background-color: #8fb9da;
						border: 1px solid #555555;
						padding: 2px 2px;
			&#125;
			#Menu A:hover&#123;
						font-family: verdana, arial, helvetica;
						font-size: 12px;
						line-height: 15px;
						text-decoration: none;
						color: #ffffff;
						display: block;
						background-color: #9AC8EC;
						padding: 2px 2px;
			&#125;

This works perfectly fine with the first cell, then each of the other cells only work when you hover over the words (not just anywhere in the cell).

Anyone have any ideas?

Posted: Tue May 25, 2004 1:42 pm
by jason
Works fine for me. Using Epiphany, which uses the Gecko engine. What browser are you using?

Posted: Tue May 25, 2004 2:07 pm
by sinewave
IE 6.0

A simple solution for your CSS problem

Posted: Mon May 31, 2004 6:20 pm
by coreyb
Try

Code: Select all

<style type="text/css">
.Menu &#123;
	border: 1px solid #555555;
	font-family: Arial,Helvetica;
	width: 100px;
	font-size: 12px;
	margin: 0;
	vertical-align: middle;
	text-align: center;
	padding: 0;
&#125;
.Menu a &#123;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #8fb9da ;
	display: block;
	margin: 0;
&#125;

.Menu a:hover &#123;
	background-color: #9AC8EC ;
&#125;
</style>
and for the HTML try

Code: Select all

<table border="0" cellpadding="0" cellspacing="2">
	<tr valign="top">
		<td>
			<div align="center" class="Menu"><a href="#">Sales</a></div> 
		</td>
		<td>
			<div align="center" class="Menu"><a href="#">Sales</a></div> 
    	</td>
	</tr>
</table> 
It should give you the effect you are looking for. The block feature only highlights the word, it is similar to the underline feature but highlights the anchored words.

:D Good Luck, and keep using CSS

Posted: Tue Jun 01, 2004 11:56 am
by johnperkins21
I know that I had a similar problem with IE 6. It appears that along with many other things, IE does not always react to the hover property very well. I never could get it working in IE, and eventually gave up.