4 replies [Last post]
homchz
Offline
Enthusiast
Last seen: 14 years 3 weeks ago
Joined: 2004-07-23
Posts: 77
Points: 0

I am pulling my hair out on this one.

I am working with this element set.

#mainlist{
	background-color:transparent;
	color:#400D07;
	float:right;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	margin-right:10px;
	margin-top:44px;
	padding-left:8px;
	padding-right:18px;
	padding-top:2px;
	padding-bottom:5px;
	width:340px;
}

#mainlist a:link,
	      a:active,
	      a:visited{
	color:#400D07;
	text-decoration:underline;
}

#mainlist a:hover{
	color:#003399;
	text-decoration:underline;
}

and on my page

http://www.joshua-jones.com/contact.php

there is a link

www.impactplayermusic.com that is not playing nicley.

It happens on other pages as well when I use this set but I figure if I can fix this page I will fix them all.

The E-Mail links on this page work as needed. it is just that loses it's active and visted properties.

I can get hover to work if I add the font-size but active and visited stay reduced no matter what.

Any ideas,

Josh

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 4 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Link Issue

Hi homchz,
Your CSS should be

#mainlist a:link, 
#mainlist a:visited{ 
   color:#400D07; 
   text-decoration:underline; 
} 
 
#mainlist a:hover{ 
   color:#003399; 
   text-decoration:underline; 
} 
 #mainlist  a:active{ 
   color:#400D07; 
   text-decoration:underline; 
}
so that you have the pseudo classes in the correct order and are targeting the links within mainlist for active and visited.
http://www.csscreator.com/css-forum/ftopic6064.html

Hope that helps

homchz
Offline
Enthusiast
Last seen: 14 years 3 weeks ago
Joined: 2004-07-23
Posts: 77
Points: 0

Link Issue

Thanks for the info I tries that but it still did not keep my "visited" element from dropping in size. Once Hovered and visted it shrinks from 11px to 10px in size. Still does with the new corrections

homchz
Offline
Enthusiast
Last seen: 14 years 3 weeks ago
Joined: 2004-07-23
Posts: 77
Points: 0

Link Issue

Okay I have two conflicting links

with in my mainlist I have a line that has the class

.text this is changing my link as far as I can tell, bacuse when I added the sizes to the #mainlist element the .text element changed with it.

#mainlist{
	background-color:transparent;
	color:#400D07;
	float:right;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	margin-right:10px;
	margin-top:44px;
	padding-left:8px;
	padding-right:18px;
	padding-top:2px;
	padding-bottom:5px;
	width:340px;
}

#mainlist a:link,
#mainlist a:visited{
   color:#400D07;
   font-family:Arial, Helvetica, sans-serif;
   font-size:11px;
   font-weight:bold;
   text-decoration:underline;
}
 
#mainlist a:hover{
   color:#003399;
   font-family:Arial, Helvetica, sans-serif;
   font-size:11px;
   font-weight:bold;
   text-decoration:underline;
}

#mainlist  a:active{
   color:#400D07;
   font-family:Arial, Helvetica, sans-serif;
   font-size:11px;
   font-weight:bold;
   text-decoration:underline;
}

.text{
	background:transparent;
	color:#400D07;
	font-size:9px;
	font-style:italic;
}

.text a:link,
	  a:visited{
	background:transparent;
	color:#400D07;
	font-size:9px;
	text-decoration:underline;
} 

.text a:hover{
	color:#003399;
	font-size:9px;
	font-style:italic;
	text-decoration:underline;
}

.text a:active{
    color:#400D07;
	font-size:9px;
	font-style:italic;
	text-decoration:underline;
}

HTML:

 <div id="mainlist">
		<div class="mainheader">

			Booking Contact:
		</div>
			Impact Player Music<br />
			173-601 Loudon Road<br />
			Concord, NH 03301<br />
			603-228-2091<br />
			<a href="http://www.impactplayermusic.com">www.impactplayermusic.com</a><br />

			<a href="&#109&#97&#105&#108&#116&#111&#58&#77&#97&#116&#116&#67&#111&#110&#110&#97&#114&#116&#111&#110&#64&#97&#111&#108&#46&#99&#111&#109">[email protected]</a>
			<br /><br />
		<div class="mainheader">
			Main Contact:
		</div>
			53 Pine Knoll Village<br />
			Lee, NH 03824<br />
			<a href="&#109&#97&#105&#108&#116&#111&#58&#106&#106&#111&#110&#101&#115&#64&#106&#111&#115&#104&#117&#97&#45&#106&#111&#110&#101&#115&#46&#99&#111&#109">[email protected]</a><br /><br />

		<div class="mainheader">
			Booking Information: 
		</div>
			<div class="text">You will need <a href="http://www.adobe.com">Acrobat Reader</a> to view booking information</div>
			<a href="BookingMaterial/JoshuaBio1.pdf">Biography</a> - 105kb<br />
			<a href="BookingMaterial/JoshShow2Proof.pdf">Live Poster</a> - 574kb<br />

		</div>

Is it due to the fact I have a class inside of the id and it is taking the elements from the class?

I can !important any text size I want and it changes it through out the page crossing these elements.

homchz
Offline
Enthusiast
Last seen: 14 years 3 weeks ago
Joined: 2004-07-23
Posts: 77
Points: 0

Link Issue

figured it out

.text{
   background:transparent;
   color:#400D07;
   font-size:9px !important;
   font-style:italic;
}

.text a:link,
     a:visited{
   background:transparent;
   color:#400D07;
   font-size:9px !important;
   text-decoration:underline;
}

.text a:hover{
   color:#003399;
   font-size:9px !important;
   font-style:italic;
   text-decoration:underline;
}

.text a:active{
    color:#400D07;
   font-size:9px !important;
   font-style:italic;
   text-decoration:underline;
}