CSS just won't apply to DIV tag

[abasel]

I used Artisteer to build the following Joomla 2.5 template (http://upgrade.rosmini.school.nz/). I needed to add an extra position called #icon-menu. I have done this but for some reason none for the icon-menu css is being applied to the div tag. When I inspect the element via Chrome, I can't see the CSS being used of overwritten anywhere. Its been a while since I've worked on CSS so am sure that I am overlooking something very obvious.... but just can't see what.

      <div class="ros-header">
        <?php if ($view->containsModules('position-0')) : ?>
        	<div class="icon-menu"><?php echo $view->position('position-0'); ?></div>
        <?php endif; ?>
        <div class="ros-headerobject"></div>
        <div class="ros-logo">
          <h1 class="ros-logo-name"><a href="<?php echo $document->baseurl; ?>/"><?php echo $this->params->get('siteTitle'); ?></a></h1>
          <h2 class="ros-logo-text"><?php echo $this->params->get('siteSlogan'); ?></h2>
        </div>
      </div>

#icon-menu {
	position: absolute;
	top: 12px;
	display:block;
	left: 500px;
}

[Paul O'B]

Hi,

You have used a class in the html but used an id in the css

#icon-menu {
	position: absolute;
	top: 12px;
	display:block;
	left: 500px;
}

It should be:

.icon-menu {
	position: absolute;
	top: 12px;
	left: 500px;
}

[abasel]

Twit that I am... I knew that it was something simple... very embarrassing, but thanks :-)

[Paul O'B]

No worries - we all do it at some time