Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Weirdness... 1

Status
Not open for further replies.
ecobb

ecobb

Programmer
Dec 5, 2002
2,190
US
Can someone please take a look at this and tell me what could be going wrong? It started about 2 hours ago, I'm in the process of developing a site, when suddenly the css goes nuts!

Everything looks right except my link colors. ALL of my visited links are using the visited link color specified in "footer"(regardless of what class they're assigned), and ALL of my visited links have the border specified in "NavBar"(regardless of what class they're assigned). I don't get it, I've been over and over this and I can't figure out what's going on. I feel like it's something small that I keep overlooking, but I can't find it.
Code: 
body {
	background-image: url(images/bkg3.gif);
	background-repeat: repeat-x;
	background-position: left top;
	background-color: White;
	font-family: Arial, Helvetica, sans-serif;
	color: Black;
	font-size: 10px;
	margin: 2px;
}

.Maintable {
	width: 750px;
	margin-top: 3px;
}

.MaintableTopBar{
	background-color: White;
	border-top: 1px solid Black;
	font-size: 5px;
}

.MaintableBottomBar{
	background-color: White;
	border-bottom: 1px solid Black;
	font-size: 5px;
}

.Nav{
	color: #E31B23;
	width: 560px;
}

.Nav a, a:visited{
	color: #E31B23;
	text-decoration: none;
}
.Nav a:hover{
	color: #E31B23;
	text-decoration: underline;
}

.NavBar{
	background: url(images/bkg_nav.gif);
	color: White;
	font-size: 12px;
	width: 520px;
	height: 22px;
}
.NavBar a, a:visited{
	color: White;
	text-decoration: none;
	border-left: 1px solid #E31B23;
	border-right: 1px solid #E31B23;
	border-top: 0px;
	border-bottom: 0px;
	padding-left: 5px;
	padding-right: 5px;
}
.NavBar a:hover{
	color: Yellow;
	text-decoration: none;
	border-left: 1px solid White;
	border-right: 1px solid White;
	border-top: 0px;
	border-bottom: 0px;
}
.Content {
	height: 550px;
	width: 100%; 
	border-left: 1px solid Black;
	border-right: 1px solid Black;
	vertical-align: top;
	background-color: White;
}

.FrontBox{
	background-image: url(images/frontbox.gif);
	height: 250px;
	vertical-align: top;
	padding: 15px;
	padding-top: 10px;
}

.FrontBox p{
	width: 555px;
	padding-left: 10px;
}
.NewsBox{
	background-image: url(images/newsbox2.gif);
	width: 225px;
	height: 200px;
	vertical-align: top;
}
.NewsBox p{
	padding-left: 10px;
	padding-right: 10px;
}

.OrderBox{
	width: 300px;
	vertical-align: top;
	padding-top: 110px;
	padding-left: 50px;
}

.Footer {
	font-size: 11px;
	color: Gray;
	padding-top: 5px;
}
.Footer a, a:visited{
	color: Gray;
	text-decoration: none;
}
.Footer a:hover{
	color: #ff9900;
	text-decoration: underline;
}
I thought it might be come kind of weird caching in FF, but the same thing is happening in IE. Does anyone have any idea what could be causing this?


Hope This Helps!

ECAR
ECAR Technologies

"My work is a game, a very serious game." - M.C. Escher
 
Sort by date Sort by votes
It would help to see he html too, to make sure you are actually calling the classes right. I ran it through w3c's css validator and got these warnings:
5 Although color names are case-insensitive, it is recommended to use the mixed capitalization, to make the names more legible: White
45 Same colors for color and background-color in two contexts .MaintableBottomBar and .NavBar
Click to expand...
Just warnings, but good advice. (many instances of each)
 
Upvote 0 Downvote
Here is your problem:

.NavBar a, a:visited{
.Footer a, a:visited{

should be


.NavBar a, [!].NavBar[/!] a:visited{
.Footer a, [!].Footer[/!] a:visited{



[monkey][snake] <.
 
Upvote 0 Downvote
But...all of the colors DO use mixed capitalization...

Thanks, though. I had already run it through the validator, and the color messages are all I got, too.

Here's the html. It's not even calling the class that's showing up for the visited links, so that's why I figured there was something screwy in the css.
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Welcome!</title>
	<link rel="STYLESHEET" type="text/css" href="style.css">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
</head>

<body>
<table cellspacing="0" cellpadding="0" align="center" class="MainTable">
	<tr>
		<td colspan="3" class="Content">
			<table width="100%" cellspacing="0" cellpadding="0" align="center">
				<tr>
					<td>&nbsp;<img src="images/logo.gif" width="198" height="100" alt="" border="0"></td>
					<td align="right" valign="top" class="Nav">
					<a href="index.htm">Home</a> | 
					<a href="index.htm">Contact</a> | 
					<a href="index.htm">About</a> | 
					<br><br><br>
					<table cellspacing="0" cellpadding="0" align="right">
						<tr>
							<td><img src="images/corner_nav_left.gif" alt="" width="12" height="23" border="0"></td>
							<td align="center" class="NavBar">
								<a href="index.htm">Link 1</a> | 
								<a href="index.htm">Link 2</a> | 
								<a href="index.htm">Link 3</a> | 
								<a href="index.htm">Link 4</a> | 
								<a href="index.htm">Link 5</a>
							</td>
							<td><img src="images/corner_nav_right.gif" alt="" width="12" height="23" border="0"></td>
						</tr>
					</table>
					</td>
				</tr>				
			</table>
		</td>
	</tr>
</table>

</body>
</html>

Hope This Helps!

ECAR
ECAR Technologies

"My work is a game, a very serious game." - M.C. Escher
 
Upvote 0 Downvote
YOU ROCK, monksnake!!

Thanks! That was it! I knew it had to be something simple like that.


Hope This Helps!

ECAR
ECAR Technologies

"My work is a game, a very serious game." - M.C. Escher
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
750
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
600
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
638
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
206
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top