Just cant get my H2 Tag to go red :-(

**Zygoma** · May 22, 2009, 03:43

Greetings from rainy and wet UK :-(

On this page http://www.pauserefreshment.co.uk/talktous.html I just cant get the H2 Tag "We love coffee machines" to change color or anything else foe that matter

Below is the full code... Any insights welcome

Code:

<!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">
<head>
<title>coffee machine | coffee machines | office coffee |   </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
@import "css/all.css";
</style>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="pagewidth">
<div id="header">
  <p> <a href="index.html"> Pause </a> </p>
  <ul>
    <li> <a href="whoweare.html" class="who"> who we are... </a> </li>
    <li> <a href="ourrange.html" class="our"> our range... </a> </li>
    <li> <a href="happycustomers.html" class="happy"> happy customers... </a> </li>
    <li> <a href="talktous.html" class="come"> come &amp; say hello... </a> </li>
    <li> <a href="usefulinfo.html" class="useful"> useful things... </a> </li>
    <li> <a href="http://www.pausewebshop.co.uk" class="on-line"> on-line shop... </a> </li>
    <li> <a href="supportingyourworld.html" class="show"> show you care... </a> </li>
  </ul>
</div>
<div id="main">
  <div id="content">
    <h1><span>let's talk coffee machines</span></h1>
    <div class="left">
    ]<div id="h2">We love coffee machines
      </div><p>The coffee's brewing and we’d love a chat about coffee machines. Coffee machines for your office, coffee machines for your shop or a coffee machine for your salon. Whatever coffee machine you need, you can:</p>
      <p>buz us on...<br />
        <br />
        <strong>0800 707 6050</strong><br />
        <br />
        email<br />
        <br />
        <a href="mailto:hello@pause.co.uk"><strong>hello@pause.co.uk</strong></a><br />
        <br />
        or contact your nearest centre.</p>
      <p>Or, just click on one of the options below:</p>
      <p> <a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/askusaquestion.html" target="_self">There’s something I’d like to ask you</a><br />
        <a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/letuscallyou.html" target="_self">I’m busy now, but please call me back</a><br />
        <a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/makeasuggestion.html" target="_self">I’ve had an idea…</a><br />
        <a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/newslettersignup.html" target="_self">I’d like to sign up for your newsletter</a> </p>
    </div>
    <div class="right"><img src="images/biscuit.jpg" alt="biscuit"  class="image" /></div>
  </div>
  <!-- Come and say hello nav -->
  <div id="sidebar">
    <div id="sidebar">
      <ul>
        <li><a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/talktous.html"> come & say hello<span class="dotspink">...</span></a><br />
        </li>
        <li> <a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/askusaquestion.html"> ask us a question<span class="dotspink">...</span></a> </li>
        <li> <a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/letuscallyou.html"> let us call you<span class="dotspink">...</span></a> </li>
        <li> <a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/ourcentres.html"> our centres<span class="dotspink">...</span></a> </li>
        <li> <a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/makeasuggestion.html"> make a suggestion<span class="dotspink">...</span></a> </li>
        <li class="activepink"><a href="#">pause Dec Newsletter<span class="dotspink">...</span></a>
          <ul>
            <li><a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/winhamper.html">Win a hamper<span class="dotspink">...</span></a>
            <li><a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/jute_bag.html">Bag your self a Jute bag<span class="dotspink">...</span></a>
            <li><a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/christmas_tree.html">Christmas tree recycling<span class="dotspink">...</span></a>
            <li><a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/ecogarden.html">Office Eco Garden<span class="dotspink">...</span></a>
            <li><a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/deccompetition.html">Win CAFEOLOGY mugs<span class="dotspink">...</span></a>
            <li><a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/habits.html">old habits<span class="dotspink">...</span></a>
          </ul>
        <li> <a href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/newslettersignup.html"> newsletter signup<span class="dotspink">...</span></a> </li>
      </ul>
    </div>
  </div>
</div>
<div id="footer">
  <ul>
    <li><a class="special" href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/index.html">Home</a></li>
    <li><a class="special" href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/pressreleases.html">Press</a></li>
    <li><a class="product" href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/largeorganisations.html">Large Organisations</a></li>
    <li><a class="product" href="/pdf/large_organisations.pdf">Brochure</a></li>
    <li><a class="new" href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/legal.html">Legal</a></li>
    <li><a class="our" href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/pausepromise.html">pause promise</a></li>
    <li><a class="pause" href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/supportingyourworld.html">Show you care</a></li>
    <li><a class="special" href="file:///C|/Documents and Settings/honand/My Documents/www.pauserefreshment.co.uk/pauserefreshment.co.uk/www/webroot/index.html">Copyright 2008 © pause</a></li>
  </ul>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-4432210-1";
urchinTracker();
</script>
</body>
</html>

And heres the CSS

Code:

body {
	margin:0;
	background:url(../images/bg-body.gif) repeat-x 0 0;
	font:11px Arial, Courier, Helvetica, sans-serif;
	color:#712453;
	min-width:985px;
}
img {
	border:none;
	display:block;
}
a {
	color:#702453;
	text-decoration:underline;
}
a:hover {
	text-decoration:underline;
}
#pagewidth {
	width:985px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
#header {
	height:130px;
	width:985px;
	overflow:hidden;
}
#header p {
	margin:0;
	position:absolute;
	top:13px;
	left:18px;
}
#header p a {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	width:207px;
	height:103px;
	background:url(../images/logo.gif);
}
#header ul {
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	top:12px;
	left:244px;
}
#header ul li {
	float:left;
}
#header ul li a {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	height:109px;
	background-image:url(../images/text-topnav.jpg);
	background-repeat:no-repeat;
}
#header ul li a.who {
	width:91px;
	background-position:0 0;
	margin:0 12px 0 0;
}
#header ul li a.our {
	width:93px;
	background-position:-91px 0;
	margin:0 7px 0 0;
}
#header ul li a.happy {
	width:105px;
	background-position:-184px 0;
	margin:0 5px 0 0;
}
#header ul li a.come {
	width:103px;
	background-position:-289px 0;
	margin:0 9px 0 0;
}
#header ul li a.useful {
	width:93px;
	margin:0 14px 0 0;
	background-position:-392px 0;
}
#header ul li a.on-line {
	width:94px;
	margin:0 13px 0 0;
	background-position:-485px 0;
}
#header ul li a.show {
	width:95px;
	background-position:-579px 0;
}
#main {
	width:985px;
	overflow:hidden;
}
#content {
	float:right;
	width:734px;
}
#content .left {
	float:left;
	width:357px;
	padding:0 0 28px;
}

#content .h2 {
padding:0px;
font-size:100px;
color:red;
}

**AutisticCuckoo** · May 22, 2009, 04:09

Why are you using <div id="h2"> instead of <h2>?

If it's a heading, using a div is semantically incorrect.

Anyway, the immediate issue is that you are using id="h2" in your markup, but you use a class selector (.h2) in your CSS.

Either change the markup to <div class="h2"> or your CSS to #content #h2.

Or better yet, change your markup to <h2> and your CSS to #content h2.

**Zygoma** · May 22, 2009, 06:14

Thank you so much :-) Your solution worked

The SitePoint Forums have moved.

User Tag List

Thread: Just cant get my H2 Tag to go red :-(

Thread Tools

Display

Just cant get my H2 Tag to go red :-(

Bookmarks

Bookmarks

Posting Permissions