...

View Full Version : I cannot change the text color.



effpeetee
11-11-2008, 12:08 PM
I am haveing trouble trying to change the colour of this text-
Frank's den - where it all happens
on this site. (http://www.exitfegs.co.uk/index.html):confused:

Any help appreciated.

Frank


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Opening page of the Taylor websiteb.</title>
<base href="http://exitfegs.co.uk/">
<link rel="stylesheet" type="text/css" href="websiteb.css" />
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
background-color:#200;
color:#FFF;
font-family:11px Arial, Helvetica, sans-serif;
font-weight:700;
height:100%;
width:100%;
}
#cap {
color:#FF0;
float:left;
font-size:50px;
font-weight:700;
height:34px;
line-height:24px;
margin-right:1px;
margin-top:2px;
}
#clockbox0 {
color:#dd0;
font-weight:700;
left:3em;
position:absolute;
}
#clockbox1 {
color:#dd0;
font-weight:700;
position:absolute;
right:3em;
}
#header {
left:120px;
margin:10px;
position:fixed;
}
#header h1 {
color:red;
text-align:center;
}
#imgcaption {
color:black;
font-size:.8em;
margin:0 25% 0 0;
text-align:center;
}
#imgcaption2 {
color:#000;
font-size:.8em;
margin:10px;
text-align:center;
}
#intro {
color:#FFF;
float:left;
width:165px;
}
#intro p {
margin:0;
padding:0;
}
#links {
background-color:#300;
color:#FFF;
float:left;
font:.6em Arial, Helvetica, sans-serif;
line-height:1.2;
margin:40px 0 0 0 0;
padding:5px;
text-align:left;
text-decoration:none;
width:200px;
}
#links ul {
color:#FFF;
list-style:none;
margin:0;
padding-left:3px;
}
#links ul a {
color:#FFF;
font-size:1.3em;
font-weight:400;
text-decoration:none;
}
#links ul a:hover {
text-decoration:underline;
}
#links ul li {
padding-left:20px;
}
#main {
background:url(59.jpg) no-repeat ;
}
* html #main {
height:480px;
}
#main a img {
border:2px solid #FFF;
}
#main a:hover img {
border-color:orange;
}
#main p {
color:#fff;
text-align:center;
}
#valids {
clear:both;
margin:auto;
padding:2px;
width:176px;
}
#wrap {
margin:auto;
position:relative;
min-width:950px;
}
* html #cap {
margin-right:-2px;
margin-top:3px;
}
.capital {
background:#000;
color:#FFF;
float:left;
font:78px/35px Arial, Helvetica, sans-serif;
padding-bottom:12px;
}
.clear {
clear:both;
line-height:0;
font-size:0;
}
.h1 {
font-size:15px;
}
.p, a:visited {
color:#FFF;
}
a img {
border:none;
}
a:link, a:active {
color:#00F;
}
h1 {
color:#00ee00;
font-size:24px;
text-align:center;
padding:0 4% 1% 0;
}
li.nobullet, li.nobullet ul li {
list-style:none;
}

</style>
<script type="text/javascript" src="include.js"></script>
<!--[if lt IE 8]>
<script type="text/javascript" src="http://ie7-js.googlecode.com/svn/version/7.0.6001.18000/IE8.js" ></script>
<![endif]-->
</head>
<body>
<div id="wrap"> <span id="clockbox0"></span><span id="clockbox1"></span><br>
<h1 id="greet">
<script type="text/javascript">
greet();
</script>
</h1>
<div id="links">
<ul>
<li><A href="two.html">Betty and Frank.</a></li>
<li><A href="three.html">Little Ted and Dmitri.</a></li>
<li><A href="four.html">Lovely Betty and Pussycat.</a></li>
<li><A href="five.html">Betty and the Bears.</a></li>
<li><A href="seven.html">Steven and Joyce and Mark.</a></li>
<li><A href="twelve.html">Ritcroft family group.</a></li>
<li><A href="Eddie.html">Eddie, relaxing at home.</a></li>
<li><A href="Bluebell1.html">Steven at ease.</a></li>
<li><A href="Steveintrain.html">Steve on the Bluebell Line.</a></li>
<li><A href="steveviewing.html">Steve at the box.</a></li>
<li><A href="Barker.html">Claire, Yvonne and Susan.</a></li>
<li><A href="xmas2006.html">Christmas 2006 at Yvonne's.</a></li>
<li><A href="nine.html">Family pictures.</a></li>
<li><A href="hol1.html">Holiday snaps.</a></li>
<li><A href="alifetime.html">A life span.</a></li>
<li><a href="web19large.html">In the middle of the above.</a></li>
<li><A href="LittleBoyBlue.html">Little Boy Blue</a></li>
<li><A href="Tarantella.html">Do you remember an inn.</a></li>
<li>(One of Betty's favourite poems.)</li>
</ul>
<br>
<ul>
<li><A href="Picchoose.html">Picture menu - complete.</a></li>
<li><A href="Picchoosea.html">Picture menu part 1.</a></li>
<li><A href="Picchooseb.html">Picture menu part 2.</a></li>
<li><A href="Picchoosec.html">Picture menu part 3.</a></li>
<li><A href="steve.html">Steven.</a></li>
<li><A href="frwall1.html">The Lounge.</a></li>
<li><A href="Alice.html">Alice.</a></li>
<li><A href="Sources.html">Useful.</a></li>
<li>Updated 10th November,2008</li>
</ul>
</div>
<div id="main">
<p id="imgcaption">Frank's den - where it all happens.</p>
</div>
<div class="clear">&nbsp;</div>
</div>
</body>
</html>

rangana
11-11-2008, 12:51 PM
Don't ask me why, but at times like this, digging through the element (usually) helps:


#main #imgcaption {
color:black;
font-size:.8em;
margin:0 25% 0 0;
text-align:center;
}

abduraooft
11-11-2008, 01:20 PM
Your CSS


#main p {/*index.html (line 115)*/
color:#FFFFFF;
text-align:center;
}
#main p {/*websiteb.css (line 109) this is actually an unwanted repeat*/
color:#FFFFFF;
text-align:center;
}
overrides your


#imgcaption {/*index.html (line 52)*/
color:black;
font-size:0.8em;
margin:2% 2% 0pt 0pt;
text-align:center;
}
So, to apply the desired effect you'd need to choose a more specific selector. See http://htmldog.com/guides/cssadvanced/specificity/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum