Problems getting text color correct

5 replies [Last post]

Wed, 2010-08-18 19:02

woza

Offline

newbie

Timezone: GMT+1

Joined: 2010-08-18

Posts: 3

Points: 6

Hi all,

Here is a link to the test page.

The problem is with the right side menu, not the top menu.

I am using php to mark the active link. The css code for the .current class is the same as the hover. The hover works as expected but the active marker text doesn't change color. It should be white yet remains grey.

Side menu CSS code

#side h1 {
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	text-transform: uppercase;
	font-weight: normal;
	font-style: normal;
	font-size: 1.0em;
	margin: 0;
	background-color: #4fa3c6;
	color: white;
	padding: 5px 0 5px 10px;
}
 
ul.sidemenu {
	list-style-type: none;
	background-color: #f1f1f1;
	margin: 0;
	font-size: 0.8em;
	padding: 0;
}
 
ul.sidemenu li {
	border-top: 1px solid white;
}
 
ul.sidemenu li a {
	text-decoration: none;
	display: block;
	color: #3f3f3f;
	padding: 8px 5px 8px 10px;
	-webkit-transition-property: background, color;
	-webkit-transition-timing-function: linear, ease-in;
	-webkit-transition-duration: 250ms;
	-moz-transition-property: background;
	-moz-transition-timing-function: linear, ease-in;
	-moz-transition-duration: 250ms;
}
 
ul.sidemenu a:hover, ul.sidemenu li.current {
	background-color: #5ab9e1;
	color: white;
}

HTML code

<?php
$navsection = 'timetable';
?>
<?php
$sidenavsection = 'tap';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hype Dance Academy - Tap, Jazz &amp; Modern Dance Timetable Autumn 2010</title>
<link rel="stylesheet" type="text/css" href="css/general.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/top-menu.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/side-menu.css" media="screen" />
<meta name="keywords" content="hype, dance, academy, company, streetdance, street, timetable" />
<meta name="description" content="" />
</head>
 
<body>
 
	<!-- Begin header -->
	<?php
	include "includes/header.php";
	?>
	<!-- End header -->
 
	<!-- Begin menu -->
	<?php
	include "includes/menu.php";
	?>
	<!-- End menu -->
 
	<!-- Begin wrapper -->
	<div id="wrapper">
 
		<!-- Begin main -->
		<div id="main">
 
		<!-- Table Markup -->
		<table id="timetable" summary="Hype Dance Academy Tap, Jazz &amp; Modern Dance Class Timetable, Autumn 2010">
			<!-- Table Header -->
			<thead>
				<tr>
					<th scope="col" class="rounded-day">Day</th>
					<th scope="col" class="rounded-time">Time</th>
					<th scope="col" class="rounded-class">Class</th>
					<th scope="col" class="rounded-level">Level</th>
					<th scope="col" class="rounded-price">Price</th>
					<th scope="col" class="rounded-notes">Notes</th>
				</tr>
			</thead>
			<!-- End Table Header -->
 
			<!-- Table Footer -->
			<tfoot>
				<tr>
					<td colspan="6" class="rounded-foot">Information correct as of September 4th 2010. Subject to change without notice.</td>
				</tr>
			</tfoot>
			<!-- End Table Footer -->
 
			<!-- Table Body -->
			<tbody>
				<tr>
					<td>Thursday</td>
					<td>18:30 - 19:30</td>
					<td>BATD Tap</td>
					<td>Grades 4 &amp; 5</td>
					<td>5.00</td>
					<td>Studio Two</td>
				</tr>
				<tr>
					<td>Thursday</td>
					<td>19:30 - 20:15</td>
					<td>Adult Tap</td>
					<td>Intermediate / Advanced</td>
					<td>4.00</td>
					<td>Studio Two</td>
				</tr>
				<tr>
					<td>Thursday</td>
					<td>20:15 - 21:00</td>
					<td>Adult Tap</td>
					<td>Beginners</td>
					<td>4.00</td>
					<td>Studio Two</td>
				</tr>
 
				<tr>
					<td colspan="6" class="rounded-blank">
					</td>
				</tr>
 
				<tr>
					<td>Saturday</td>
					<td>09:00 - 09:45</td>
					<td>Jazz</td>
					<td>Senior</td>
					<td>4.00</td>
					<td>Studio One</td>
				</tr>
				<tr>
					<td>Saturday</td>
					<td>09:45 - 10:30</td>
					<td>BATD Modern</td>
					<td>Pre Primary</td>
					<td>4.00</td>
					<td>Studio One</td>
				</tr>
				<tr>
					<td>Saturday</td>
					<td>10:30 - 11:15</td>
					<td>BATD Modern</td>
					<td>Grade 5</td>
					<td>4.00</td>
					<td>Studio One</td>
				</tr>
				<tr>
					<td>Saturday</td>
					<td>11:15 - 12:15</td>
					<td>BATD Jazz &amp; Modern</td>
					<td>Grades 1 &amp; 2</td>
					<td>5.00</td>
					<td>Studio One</td>
				</tr>
				<tr>
					<td>Saturday</td>
					<td>12:15 - 13:00</td>
					<td>BATD Modern</td>
					<td>Grade 4</td>
					<td>4.00</td>
					<td>Studio One</td>
				</tr>
				<tr>
					<td>Saturday</td>
					<td>13:00 - 13:45</td>
					<td>BATD Jazz</td>
					<td>Grade 5</td>
					<td>4.00</td>
					<td>Studio One</td>
				</tr>
				<tr>
					<td>Saturday</td>
					<td>13:45 - 14:30</td>
					<td>BATD Jazz</td>
					<td>Grade 3</td>
					<td>4.00</td>
					<td>Studio One</td>
				</tr>
				<tr>
					<td>Saturday</td>
					<td>15:15 - 16:15</td>
					<td>DanceStar Performance</td>
					<td>Teen</td>
					<td>5.00</td>
					<td>Studio One</td>
				</tr>
 
				<tr>
					<td colspan="6" class="rounded-blank">
					</td>
				</tr>
 
			</tbody>
			<!-- End Table Body -->
		</table>
		<!-- End Table Markup -->
 
		</div>
		<!-- End main -->
 
		<!-- Begin Side -->
		<?php
		include "includes/tt-side-menu.php";
		?>
		<!-- End Side -->
 
		<!-- Begin footer -->
		<?php
		include "includes/footer.php";
		?>
		<!-- End Footer -->
 
	</div>
 
</body>
</html>

Any help greatly appreciated.

Thanks in advance
A

Tags:

CSS Styling

Wed, 2010-08-18 19:11

Ed Seedhouse

Offline

Guru

Timezone: GMT-7

Joined: 2005-12-14

Posts: 3544

Points: 643

Please read our posting

Please read our posting guides and follow them. In particular you must validate your html. You cannot have a closing "EM" tag without an opening "EM" tag, and you have this error multiple times. It's a miracle that browsers display that page at all.

Ed Seedhouse

Posting Guidelines

High on a hill, in Wrangellia.

Wed, 2010-08-18 19:26

woza

Offline

newbie

Timezone: GMT+1

Joined: 2010-08-18

Posts: 3

Points: 6

I did read your

I did read your guidelines.

The html validates link and the css validates apart from the css3 content.

The "EM" tag has both opening and closing elements and it isn't that code that is the problem anyway...

<!-- Begin Navigation -->
<div id="menu-outer">
<ul class="menu">
  <li<?php echo ($navsection == 'home') ? ' class="current"' : ''; ?>>
    <a href="home.php">
      <span>HOME</span><em></em>
    </a>
  </li>
  <li<?php echo ($navsection == 'classes') ? ' class="current"' : ''; ?>>
    <a href="classes.php">
      <span>CLASSES</span><em></em>
    </a>
  </li>
  <li<?php echo ($navsection == 'timetable') ? ' class="current"' : ''; ?>>
    <a href="timetable.php">
      <span>TIMETABLE</span><em></em>
    </a>
  </li>
  <li<?php echo ($navsection == 'workshops') ? ' class="current"' : ''; ?>>
    <a href="workshops.php">
      <span>WORKSHOPS</span><em></em>
    </a>
  </li>
  <li<?php echo ($navsection == 'groups') ? ' class="current"' : ''; ?>>
    <a href="groups.php">
      <span>GROUPS</span><em></em>
    </a>
  </li>
  <li<?php echo ($navsection == 'tutors') ? ' class="current"' : ''; ?>>
    <a href="tutors.php">
      <span>TUTORS</span><em></em>
    </a>
  </li>
  <li<?php echo ($navsection == 'news') ? ' class="current"' : ''; ?>>
    <a href="news.php">
      <span>NEWS</span><em></em>
    </a>
  </li>
  <li<?php echo ($navsection == 'hire') ? ' class="current"' : ''; ?>>
    <a href="hire.php">
      <span>HIRE</span><em></em>
    </a>
  </li>
  <li<?php echo ($navsection == 'contact') ? ' class="current"' : ''; ?>>
    <a href="contact.php">
      <span>CONTACT</span><em></em>
    </a>
  </li>
</ul>
</div>
<!-- End Navigation -->

Wed, 2010-08-18 22:23

Ed Seedhouse

Offline

Guru

Timezone: GMT-7

Joined: 2005-12-14

Posts: 3544

Points: 643

Well, it validates now. But

Well, it validates now. But I'm pretty it didn't when I checked it. Even now the "html validator" firefox add on warns against multiple empty SPAN elements.

Ed Seedhouse

Posting Guidelines

High on a hill, in Wrangellia.

Thu, 2010-08-19 01:23

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8140

Points: 1322

Jeez Ed you could've actually

Jeez Ed you could've actually answered the question if you even bothered to look at the CSS posted.

ul.sidemenu a:hover, ul.sidemenu li.current should be .sidemenu a:hover, .sidemenu .current a (and you don't need to preface each element with ul, li etc.).

(As an aside: please don't post PHP code in future; we need to see the HTML as sent to the browser, not the server side code.)

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Thu, 2010-08-19 07:54

woza

Offline

newbie

Timezone: GMT+1

Joined: 2010-08-18

Posts: 3

Points: 6

Thank you very much Tyssen.

Thank you very much Tyssen. That has fixed it. As for the php, I forgot I had made the php includes and when I tried to post the full html I kept getting a "not allowed, spam filter" message on my posts...

@Ed - You would have seen the code validated the first time, if you had bothered to take the time to look at it properly rather than jumping in with both feet and your superior attitude. It's a miracle that you can help anyone at all - although looking at some of your recent posts it seems you don't...

Once again, thanks Tyssen...

Problems getting text color correct

Please read our posting

I did read your

Well, it validates now. But

Jeez Ed you could've actually

Thank you very much Tyssen.

New forum topics

User login

Navigation