CSS Help

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Can anyone give me any pointers on why the code below isn't working correctly?
Here's my problem: The first link in the #utility_bar_top isn't showing up correctly. The link and active colors are wrong, and only the hover color is correct. Any ideas on how to correct this? By the way, sorry I posted so much code here at once.

<style type="text/css">
/* CSS Document */
a:link {text-decoration: none; color: #A4A4A4;}
a:visited {text-decoration: #A4A4A4;}
a:active {text-decoration: none; color: #642EFE;}
a:hover {text-decoration: underline; color: #642EFE;}

body {
font-family: "Lucidia Grande","Arial Unicode MS", sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color:#cccccc;
background-image: url(http://i988.photobucket.com/albums/af8/xander360tips/ohmygodiseestars7_zps26773ef4.jpg);
background-repeat:repeat;
background-position:top left;
background-attachment:fixed;
text-decoration: none; color: #FFFFFF;
}

td, tr {
font-family: "Lucidia Grande","Arial Unicode MS", sans-serif;
font-size: 12px;
color: #FFFFFF;
}

body {
margin-top: 0px;
}

.container {
width: 900px;
margin: 0px auto;
}

#banner {
width: 900px;
height: 125px;
padding: 1px 0 0 0;
}

#utility_bar_top {
width: auto;
height: auto;
float: right;
}

#copyright_container {
width: 200px;
height: 20px;
text-align: center;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;

background-image: -webkit-gradient(linear, left top, left bottom, from
color-stop( 0.0, rgba(0, 0, 0, 0) ), to
color-stop( 1.0, rgba(76, 75, 75, .55) ));

/* Chrome 10+ Safari 5.1+ Mobile Safari */
background-image: -webkit-linear-gradient(top,
rgba(0, 0, 0, 0),
rgba(76, 75, 75, .55) );

/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top,
rgba(0, 0, 0, 0),
rgba(76, 75, 75, .55) );

/* IE 10+ */
background-image: -ms-linear-gradient(top,
rgb(0, 0, 0),
rgb(76, 75, 75) );

/* Opera 11.10+ */
background-image: -o-linear-gradient(top,
rgba(0, 0, 0, 0),
rgba(76, 75, 75, .55) );

/* W3C */
background-image: linear-gradient(top,
rgba(0, 0, 0, 1),
rgba(76, 75, 75, .55) );
}

</style>

<body>
<div class="container">
<div id="banner" name="banner" style="background: url(http://i988.photobucket.com/albums/af8/xander360tips/reachasteroidjpgcropped900x126o-181-283s1440x900_zpsff97e10d.jpg);">
</div>
<br>
<table style="width: 100%;"><tr>
<td style="width:78.74109263657957%;">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>X3T Navigation Bar</title>
<link href="http://xander360tips.yolasite.com/resources/X3T_Navbar/x3t_nav2.css" rel="stylesheet" type="text/css" media="screen">

</head>
<body onLoad="X3T_Menu()">
<div id="menuwrapper">
<ul id="x3tnavbar">
<li><a href="xander360tips.yolasite.com">Home</a></li>
<li><a class="trigger" href="http://xander360tips.yolasite.com/mw3.php">Call of Duty</a>
<ul>
<li><a href="http://xander360tips.yolasite.com/mw3.php">MW3</a></li>
<li><a href="http://xander360tips.yolasite.com/more-mw3">&#9674; Achievements</a></li>
<li><a href="http://xander360tips.yolasite.com/black-ops.php">Black Ops</a></li>
<li><a href="http://xander360tips.yolasite.com/modern-warfare-2.php">MW2</a></li>
<li><a href="http://xander360tips.yolasite.com/more-mw2.php">&#9674; Achievements</a></li>
<li><a href="http://xander360tips.yolasite.com/cod4.php">CoD 4: Modern Warfare</a></li>
<li><a href="http://xander360tips.yolasite.com/more-cod4.php">&#9674; Acievements</a></li>

</ul>
</li>
<li><a class="trigger" href="http://xander360tips.yolasite.com/gta-iv.php">Grand Theft Auto IV</a>
<ul>
<li><a href="http://xander360tips.yolasite.com/more-gta-iv.php">&#9674; Achievements</a></li>
</ul>
</li>
<li><a class="trigger" href="http://xander360tips.yolasite.com/halo-4.php">Halo</a>
<ul>
<li><a href="http://xander360tips.yolasite.com/halo-4.php">Halo 4</a></li>
<li><a href="http://xander360tips.yolasite.com/reach.php">Halo: Reach</a></li>
<li><a href="http://xander360tips.yolasite.com/commendations.php">&#9674; Commendations</a></li>
<li><a href="http://xander360tips.yolasite.com/commendations_campaign.php">&#8970; Campaign</a></li>
<li><a href="http://xander360tips.yolasite.com/commendations_firefight.php">&#8970; Firefight</a></li>
<li><a href="http://xander360tips.yolasite.com/commendations_multiplayer.php">&#8970; Multiplayer</a></li>
<li><a href="http://xander360tips.yolasite.com/halo-3.php">Halo 3</a></li>
<li><a href="http://xander360tips.yolasite.com/halo-ce.php">Halo: CE Anniversary</a></li>
<li><a href="http://xander360tips.yolasite.com/perfect-1000-roadmap.php">&#9674; Perfect 1000</a></li>
<li><a href="http://xander360tips.yolasite.com/road-to-recon.php">Road to Recon</a></li>
</ul>
<li><a href="http://xander360tips.yolasite.com/bf3.php">BF3</a></li>
<li><a class="trigger" href="http://xander360tips.yolasite.com/archives.php">Archives</a>
<ul>
<li><a href="http://xander360tips.yolasite.com/archives_reach.php">Halo: Reach</a></li>
<li><a href="http://xander360tips.yolasite.com/archives_911.php">Remembering 9/11</a></li>
</ul>

</li>
</ul>
<br class="clearit">
</div>
</body>
</html></td>
<td style="width: 21.258907363420434%;">
<!-- start of freefind search box html -->
<table cellpadding=0 cellspacing=0 border=0 >
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 7.5pt;">
<form style="margin:0px; margin-top:4px;" action="http://search.freefind.com/find.html" method="get" accept-charset="utf-8" target="_self">
<input type="hidden" name="si" value="29190286">
<input type="hidden" name="pid" value="r">
<input type="hidden" name="n" value="0">
<input type="hidden" name="_charset_" value="">
<input type="hidden" name="bcd" value="&#247;">
<input type="text" name="query" size="15">
<input type="submit" value="Search">
</form>
</td>
</tr>
<tr>
<td style="text-align:left; font-family: Arial, Helvetica, sans-serif; font-size: 7.5pt; padding-top:4px;">
</td>

</tr>
</table>
<!-- end of freefind search box html -->
</td></tr></table>

<div id="utility_bar_top">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage71 = new Image();
loadImage71.src = "http://xander360tips.yolasite.com/resources/icon_utility_xbl_on.png";
staticImage71 = new Image();
staticImage71.src = "http://xander360tips.yolasite.com/resources/icon_utility_xbl.png";

loadImage72 = new Image();
loadImage72.src = "http://xander360tips.yolasite.com/resources/icon_utility_report_on.png";
staticImage72 = new Image();
staticImage72.src = "http://xander360tips.yolasite.com/resources/icon_utility_report.png";

loadImage73 = new Image();
loadImage73.src = "http://xander360tips.yolasite.com/resources/icon_utility_email_on.png";
staticImage73 = new Image();
staticImage73.src = "http://xander360tips.yolasite.com/resources/icon_utility_email.png";

// End -->
</script>
<p style="text-align: right;">
<span class="Apple-style-span" style="font-size: x-small;"><a href="http://www.xbox.com/" title="Send me an XBOX LIVE Message" style="text-decoration: none;">Live Message</a></span><span class="Apple-style-span" style="font-size: x-small; "><a href="http://www.xbox.com/" title="Send me an XBOX LIVE Message" style="text-decoration: none;">&nbsp;</a></span><a href="http://www.xbox.com/" title="Send me an XBOX LIVE Message" style="text-decoration: none;"><a href="http://www.xbox.com/" title="Send me an XBOX LIVE Message" onmouseover="image71.src=loadImage71.src;" onmouseout="image71.src=staticImage71.src;" style="text-decoration: none;">
<img name="image71" src="http://xander360tips.yolasite.com/resources/icon_utility_xbl.png" border=0></a></a>&nbsp;<span class="Apple-style-span" style="color: rgb(33, 33, 33); font-size: large; " style="text-decoration: none;">|</span><span class="Apple-style-span" style="font-size: x-small; " style="text-decoration: none;">&nbsp;</span>
<span class="Apple-style-span" style="font-size: x-small;"><a href="disclaimer.php" target="blank" title="(Opens new tab) - Report Copyright Infringement" style="text-decoration: none;">Report&nbsp;</a></span><a href="disclaimer.php" target="blank" title="(Opens new tab) - Report Copyright Infringement" style="text-decoration: none;"><a href="disclaimer.php" title="(Opens new tab) - Report Copyright Infringement" onmouseover="image72.src=loadImage72.src;" onmouseout="image72.src=staticImage72.src;" style="text-decoration: none;">
<img name="image72" src="http://xander360tips.yolasite.com/resources/icon_utility_report.png" border=0></a></a>&nbsp;<span class="Apple-style-span" style="font-size: large;"><font class="Apple-style-span" color="#212121">|</font></span>&nbsp;
<span class="Apple-style-span" style="font-size: x-small;"><a href="mailto:xander360tips@gmail.com" title="Email Me" style="text-decoration: none;">Email</a></span><a href="mailto:xander360tips@gmail.com" title="Email Me" style="text-decoration: none;">&nbsp;<a href="mailto:xander360tips@gmail.com" title="Email Me" onmouseover="image73.src=loadImage73.src;" onmouseout="image73.src=staticImage73.src;" style="text-decoration: none;">
<img name="image73" src="http://xander360tips.yolasite.com/resources/icon_utility_email.png" border=0></a></a>&nbsp;&nbsp;<span style="color: rgb(33, 33, 33); font-size: large; ">|</span>&nbsp;<a href="troubleshooting.php" style="text-decoration: none;" title="Need Help?"><font size="1">Help</font> <font size="2" style="text-decoration: none;">?</font></a>&nbsp;</p>
</div>
<div id="copyright_container"><p><span style="color: rgb(161, 161, 161); font-family: 'Times New Roman', serif; font-size: x-small; ">&copy; 2013 Xander 360 Tips. All rights reserved.</span>
</p></div>
Photo of Paul Alexander

Paul Alexander

  • 10 Posts
  • 2 Reply Likes

Posted 5 years ago

  • 1
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Paul,
Other styling code in the html of the web page may be overriding the code in the external style sheet. When there is conflicting code, usually first priority is given to code specified in the body of the html page, then styling code in the header of the html page, and lastly the code from the external style sheet. If you can’t find where the conflicting style property is in the html page, if you add “!important” to the css code in the external style sheet, it may override the conflicting code.
a:active {text-decoration: none; color: #642EFE !important;}
Photo of Paul Alexander

Paul Alexander

  • 10 Posts
  • 2 Reply Likes
Thank you for your suggestion, Crystal, but unfortunately it did not work. I'm still trying various ways to fix this problem. Hopefully I'll figure this out!
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Paul

Adding on Crystal, I can see in the code you posted that you're trying to add new code for the head section of your website. This is not possible using an HTML Widget. You currently have a Yola Free account with us. For the edits you want to make, I'd recomment to upgrade to Yola Silver which will allow you to edit your Site CSS and the head section of your website.
Photo of Paul Alexander

Paul Alexander

  • 10 Posts
  • 2 Reply Likes
Hi Stefan,

I know it is not possible to add new code for the head section of my website with an HTML Widget. I also know that I cannot edit my Site CSS with a free Yola account. I am actually using the code I posted to redesign my website before upgrading. I'm editing the code and launching it via my local host files and everything was working fine until I added the utility_bar_top div. Thank you for your reply, though.
Photo of Paul Alexander

Paul Alexander

  • 10 Posts
  • 2 Reply Likes
I fixed it! :)
All I had to do was add
{text-decoration: none; color: ... }
to link, visited, hover, and active before the body rule.