CSS Issue with display: block

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
sinewave
Forum Commoner
Posts: 41
Joined: Tue Sep 10, 2002 4:35 pm
Location: Canada

CSS Issue with display: block

Post 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?
jason
Site Admin
Posts: 1767
Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:

Post by jason »

Works fine for me. Using Epiphany, which uses the Gecko engine. What browser are you using?
sinewave
Forum Commoner
Posts: 41
Joined: Tue Sep 10, 2002 4:35 pm
Location: Canada

Post by sinewave »

IE 6.0
coreyb
Forum Newbie
Posts: 3
Joined: Mon May 31, 2004 6:20 pm
Location: Salt Lake City, Utah

A simple solution for your CSS problem

Post 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
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

Post 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.
Post Reply