1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Links disappear after clicked! please help!

Discussion in 'HTML & Website Design' started by yesyoucant, Apr 8, 2011.

0
  1. #1
    Can someone please help me? My site looked fine through the test phase but when I uploaded it, something weird happens in Internet Explorer... Once you click a link on the unordered list to the right, the link disappears or turns white, i'm not sure what's going on. I can't find any instance of this in my CSS... What on earth am i doing wrong!

    thanks in advance, amanda

    the website is here

    here is a picture of what i'm talking about:
    [​IMG]

    and here is my css:
    body {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	background: #000 url(../images/background.png);

	margin-top:30px;

	padding-top: 30px;

}



body a:link, body a:active {

	color: #808084;

	text-decoration: none;

}

body a:visited {

	color: #1c3f95;

	text-decoration: none;

}







h1, h2, h3, h4, h5, h6 {

	font-family:Verdana, Arial, Helvetica, sans-serif;

	color:#f1f1f2;

	margin:1em 0;

}



ul, li {

	margin:0;

	padding:0;

	list-style:none;

}



a {

   outline: 0;

}

p.subhead {

	font-family:Verdana, Arial, Helvetica, sans-serif;

	color:#808084;

	margin:-15px 0 10px 10px;

}



table.subhead {

	font-family:Verdana, Arial, Helvetica, sans-serif;

	color:#808084;

	margin:-15px 0 10px 10px;

}



p.subhead a:link, body a:visited, body a:active {

	color: #1c3f95;

	text-decoration: underline;

}



/* overrides ***********************************************/



.clearfix:after {

    content: "."; 

    display: block; 

    height: 0; 

    clear: both; 

    visibility: hidden;

}



/* misc ********************************************/



h1#logo, h1#logo a {

	float: left;

	margin:0;

	padding:0;

	display:block;

	text-indent: -9999px;

	background: url(../images/amanda-bruce-logo.png) no-repeat left top;

	width: 260px;

	height: 40px;

}



/* main divs *****************************************/





#wrap {

	width:698px;

	margin:0 auto;

	padding:0;



}



#content {

	width:698px;



}

#contentBlank {

	background-color:#fff;

	clear:left;

		padding-top:5px;

	padding-left: 10px;

	padding-right: 20px;

	padding-bottom: 20px;

	margin-top: 10px;

}



#contentsub {

	background-color:#fff;

	clear:left;

	padding-top:5px;

	padding-left: 10px;

	padding-right: 20px;

	padding-bottom: 20px;

	margin-top: 10px;

	

}

#contentresume {

background-color:#fff;

	height: 406px;

	clear:left;

	padding-top:5px;

	padding-left: 10px;

	padding-right: 20px;

	padding-bottom: 20px;

	margin-top: 10px;

}

#contentsubmit {

background-color:#fff;

	height: 406px;

	clear:left;

	padding-top:5px;

	padding-left: 10px;

	padding-right: 20px;

	padding-bottom: 20px;

	margin-top: 10px;

}



#contentHome {

	width:666px;

	height:476px;

	background-color:#fff;

	clear:left;

	padding:20px;

}



#photo {

	width: 432px;

	height: 309px;

	background: #fff url(../images/bg_photos.gif) no-repeat 16px 16px;

	float:left;

}



img {

	margin: 16px 0 16px 16px;

	display: inline;

}



img.other {

margin: 22px 10px 10px 27px;

	display: inline;



}



img.h2fail{

	height: 16px;

	margin:26px 0 10px 20px;

	display: inline;



}



img.subhead {

	height: 16px;

	margin:0px 0 10px 10px;

	display: inline;



}







img.subnav{

	height: 27px;

	margin: -2px;



}



img.thanks{

	height: 26px;

	margin:0px 0 10px 10px;

	display: inline;

}



#photoTall {

	width: 432px;

	height: 448px;

	background: #fff url(../images/bg_photossq.gif) no-repeat 16px 16px;

	float:left;

}



#projectList {

	width:266px;

	height: 309px;

	

	/* padding:14px 14px 20px 14px; */

	background-color:#fff;

	float:right;

}





#projectListInfo {

	width:266px;

	height: 448px;

	

	/* padding:14px 14px 20px 14px; */

	background-color:#fff;

	float:right;

}

#projectList h2 {

	font-size: 12px;

	margin-left:20px;

}



#projectList ul {

	margin-left:16px;

/*	padding-bottom: 10px;  */

}



#projectListInfo ul {

	margin-left:16px;

/*	padding-bottom: 10px;  */

}



#projectList li a {

	line-height:16px;

	padding-left:10px;

}



#projectListInfo li a {

	line-height:16px;

	padding-left:10px;

}



#projectList li p {

	line-height:16px;

	padding-left:10px;

	padding-right:16px;

}



#projectList a:hover, #projectListInfo a:hover {

	background: url(../images/bullet.png) no-repeat 0px 5px;

}





#projectList a.active, #projectListInfo a {

	background: url(../images/bulletActive.png) no-repeat 0px 5px;

}



#images {

	width:432px;

	height:24px;

	background-color:#A4A5A9;

	font-size:1px;

	float:left;

	clear:left;



}



#imagesWide {

	width:698px;

height:24px;

	background-color:#A4A5A9;

	font-size:1px;

	float:left;

	clear:left;

}



#images ol,{

	

	margin:0;

	padding: 12px 0px 0px 12px;

}



#imagesWide ol {

	width:698px;

	margin:0;

	padding: 12px 0px 0px 12px;

}



#images li, #imagesWide li {

	display:inline;

	float:left;

	height:12px;

}



#imagesText a {

	text-indent: -9999px;

	text-decoration: none;

	display:block;

	background: url(../images/images.png) no-repeat left top;

	width: 54px;

	height: 12px;

	margin-top: -5px;

}

#one a {

	text-indent: -9999px;

	text-decoration: none;

	display:block;

	background: url(../images/images-01.png) no-repeat left top;

	width: 30px;

	height: 12px;

	margin-top: -5px;

}



#one a:hover, #two a:hover, #three a:hover, #four a:hover {

	background-position: 0px -12px;

	margin-top: -5px;

}



#oneActive {

	text-indent: -9999px;

	text-decoration: none;

	display:block;

	background: url(../images/images-01.png) no-repeat 0 -12px !important;

	width: 30px;

	height: 12px;

margin-top: -5px;

}



#two a {

	text-indent: -9999px;

	text-decoration: none;

	display:block;

	background: url(../images/images-02.png) no-repeat left top;

	width: 31px;

	height: 12px;

	margin-top: -5px;

}







#twoActive {

	text-indent: -9999px;

	text-decoration: none;

	display:block;

	background: url(../images/images-02.png) no-repeat 0 -12px !important;

	width: 31px;

	height: 12px;

	margin-top: -5px;

}



#three a {

	text-indent: -9999px;

	text-decoration: none;

	display:block;

	background: url(../images/images-03.png) no-repeat left top;

	width: 29px;

	height: 12px;

	margin-top: -5px;

}





#threeActive {

	text-indent: -9999px;

	text-decoration: none;

	display:block;

	background: url(../images/images-03.png) no-repeat 0 -12px !important;

	width: 29px;

	height: 12px;

	margin-top: -5px;

}



#four a {

	text-indent: -9999px;

	text-decoration: none;

	display:block;

	background: url(../images/images-04.png) no-repeat left top;

	width: 29px;

	height: 12px;

	margin-top: -5px;

}







#fourActive {

	text-indent: -9999px;

	text-decoration: none;

	display:block;

	background: url(../images/images-04.png) no-repeat 0 -12px !important;

	width: 29px;

	height: 12px;

	margin-top: -5px;

}





#projectDetails {

	width:432px;

	background-color:#808084;

	

	color: #f1f1f2;

	float: left;

	clear:left;

}





#projectDetailsWide {

	width:698px;

	background-color:#808084;	

	color: #f1f1f2;

	float: left;

	clear:left;

}

#projectDetails a:link, body a:visited, body a:active {

	color: #f1f1f2;

	text-decoration: underline;

}

#projectDetailsWide a:link, body a:visited, body a:active {

	color: #f1f1f2;

	text-decoration: underline;

}



#projectDetails h2 {

	padding:0;

	font-size:12px;

	color: #BFBDB9;

}



#projectDetails h2, #projectDetails p, #projectDetailsWide h2, #projectDetailsWide p {

	margin: 0 20px;

}



#projectDetailsWide h2, #projectDetails h2 { margin-top: 20px; margin-bottom: 8px;}

#projectDetailsWide p, #projectDetails p { margin-bottom: 30px; margin-right: 40px;}

#projectDetailsWide p { margin-left: 20px}













#projectDetails h2, #projectDetailsWide h2 {

	padding:0;

	font-size:12px;

	color: #BFBDB9;

}









/* main menu **************************************/



#nav {

	width: 315px;

	float: right;

	height: 40px;

	padding:0;

		margin-right: -10px;

}



#nav li {

	display: inline;

	float:left;

}



#print a, #printActive a {

	text-indent: -9999px;

	text-decoration: none;

	display:block;

	background: url(../images/nav_print.png) no-repeat left top;

	width: 39px;

	height: 40px;

}



#print a:hover {

	background-position: 0px -49px;

}



#printActive a {

	background-position: 0px -100px;

}



#advertising a, #advertisingActive a {

	text-indent: -9999px;

	text-decoration: none;

	display:block;

	background: url(../images/nav_advertising.png) no-repeat left top;

	width: 76px;

	height: 40px;

}



#advertising a:hover {

	background-position: 0px -49px;

}



#advertisingActive a {

	background-position: 0px -100px;

}



#illustration a, #illustrationActive a {

	text-indent: -9999px;

	text-decoration: none;

	display:block;

	background: url(../images/nav_illustration.png) no-repeat left top;

	width: 75px;

	height: 40px;

}



#illustration a:hover {

	background-position: 0px -49px;

}



#illustrationActive a {

	background-position: 0px -100px;

}



#web a, #webActive a {

	text-indent: -9999px;

	text-decoration: none;

	display:block;

	background: url(../images/nav_web.png) no-repeat left top;

	width: 32px;

	height: 40px;

}



#web a:hover {

	background-position: 0px -49px;

}



#webActive a {

	background-position: 0px -100px;

}



#infographics a, #infographicsActive a {

	text-indent: -9999px;

	text-decoration: none;

	display:block;

	background: url(../images/nav_infographics.png) no-repeat left top;

	width: 85px;

	height: 40px;

}



#infographics a:hover {

	background-position: 0px -49px;

}



#infographicsActive a {

	background-position: 0px -100px;

}



/* sub menu **************************************/



#subNav, #subNavWide {

   height:26px;

   width:698px;

   font-size:1px;



   float:left;

   clear:left;

}



#subNavWide {

   width:698px;

}



#subNav li a, #subNavWide li a {

   text-indent: -9999px;

   text-decoration: none;

   display:block;

   height: 13px;

}



#subNav li, #subNavWide li {

   display:inline;

   float:left;

   height: 13px;

   margin: 10px 0px 0px 0px;

}



#about a {

   width: 38px;

   background: url(../images/about.png) no-repeat left top;

}



#about a:hover, #resume a:hover, #contact a:hover { 

	background-position: 0px -12px; 

}



#resume a {

   width: 48px;

   background: url(../images/sub_resume.png) no-repeat left top;

}



#contact a {

   width: 48px;

   background: url(../images/contact.png) no-repeat left top;

}





#copyright a, #copyrightWide a {

   background: url(../images/copyright.png) no-repeat 0 0;

   width: 102px;

}



#copyright a {

	margin: 2px 0px 0px 182px;

}



#copyrightWide a {

	margin: 2px 0px 0px 462px;

}



/*  *********************************************************************/



#projectList h2, projectDetails h2 {

	font-size:1px; /* ie cancel height */

	padding:0;

}



h2#h_about {

	text-indent:-9999px;

	width:87px;

	height:16px;

	margin:20px 0 10px 0;

	background: url(../_src/h_about.gif) no-repeat 0px 0px;

}



h2#h_contact {

	text-indent:-9999px;

	width:87px;

	height:16px;

	margin:20px 0 10px 0;

	background: url(../_src/h_contact.gif) no-repeat 0px 0px;



}

/* projects *********************************************************************/



h2#archive {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	

	background: url(../images/h_archive.png) no-repeat 0px 0px;

}

h2#siggraph {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;



	background: url(../images/h_siggraph.png) no-repeat 0px 0px;



}



h2#pnhp {

	text-indent:-9999px;

	width:278px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_pnhp.png) no-repeat 0px 0px;

}



h2#fhpm {

	text-indent:-9999px;

	width:278px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_fhpm.png) no-repeat 0px 0px;

}



h2#elitemobile {

	text-indent:-9999px;

	width:278px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_elitemobile.png) no-repeat 0px 0px;

}



h2#rws {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_rws.png) no-repeat 0px 0px;

}



h2#ccgc {

	text-indent:-9999px;

	width:290px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_ccgc.png) no-repeat 0px 0px;

}







h2#brainbox {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_brainbox.png) no-repeat 0px 0px;

}



h2#hdbf {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_hdbf.png) no-repeat 0px 0px;

}





h2#cerberus {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_cerberus.png) no-repeat 0px 0px;

}



h2#peckums {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_peckums.png) no-repeat 0px 0px;

}





h2#massiveattack {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_massiveattack.png) no-repeat 0px 0px;

}



h2#txdot {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_txdot.png) no-repeat 0px 0px;

}



h2#doco {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_doco.png) no-repeat 0px 0px;

}



h2#cruz {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_cruz.png) no-repeat 0px 0px;

}

h2#firebyte {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_firebyte.png) no-repeat 0px 0px;

}



h2#gamecube {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_gamecube.png) no-repeat 0px 0px;

}



h2#peckumschicken {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_peckumschicken.png) no-repeat 0px 0px;

}

h2#eye {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_eye.png) no-repeat 0px 0px;

}



h2#closedeyes {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_closedeyes.png) no-repeat 0px 0px;

}

h2#factory {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_factory.png) no-repeat 0px 0px;

}



h2#braindiagram {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_braindiagram.png) no-repeat 0px 0px;

}



h2#sfgarden {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_garden.png) no-repeat 0px 0px;

}



h2#skeleton {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_skeleton.png) no-repeat 0px 0px;

}



h2#railmap {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_railmap.png) no-repeat 0px 0px;

}



h2#stucco {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_stucco.png) no-repeat 0px 0px;

}

h2#arch {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_arch.png) no-repeat 0px 0px;

h2#blood {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_blood.png) no-repeat 0px 0px;

}



h2#type {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_typographic.png) no-repeat 0px 0px;

}







h2#droh {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:100px 0 0px 0px;	background: url(../images/h_droh.png) no-repeat 0px 0px;

}





h2#animatedskeleton {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_halloweenanimation.png) no-repeat 0px 0px;

}



h2#sfgardenanimation {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_gardenanimation.png) no-repeat 0px 0px;

}



h2#bayoucitysprawl {

	text-indent:-9999px;

	width:230px;

	height:16px;

	margin:26px 0 10px 20px;

	background: url(../images/h_bayoucitysprawl.png) no-repeat 0px 0px;

}

/* sub-navigation headings *********************************************************************/



h2#aboutme {

	text-indent:-9999px;

	width:102px;

	height:27px;

	margin:26px 0 10px 20px;

	background: url(../images/about_me.png) no-repeat 0px 0px;

}



#s_contact {

	text-indent:-9999px;

	width:102px;

	height:27px;

	margin:26px 0 10px 20px;

	background: url(../images/s_contact.png) no-repeat 0px 0px;

}



h2#s_designphil {

	text-indent:-9999px;

	width:249px;

	height:27px;

	margin:26px 0 10px 20px;

	background: url(../images/s_designphil.png) no-repeat 0px 0px;

}



h2#s_education {

	text-indent:-9999px;

	width:109px;

	height:27px;

	margin:26px 0 10px 20px;

	background: url(../images/s_education.png) no-repeat 0px 0px;

}



h2#s_technicalskills {

	text-indent:-9999px;

	width:109px;

	height:27px;

	margin:26px 0 10px 20px;

	background: url(../images/s_technicalskills.png) no-repeat 0px 0px;

}



h2#s_experience {

	text-indent:-9999px;

	width:109px;

	height:27px;

	margin:26px 0 10px 20px;

	background: url(../images/s_experience.png) no-repeat 0px 0px;

}





h2#s_recognition {

	text-indent:-9999px;

	width:109px;

	height:27px;

	margin:26px 0 10px 20px;

	background: url(../images/recognition.png) no-repeat 0px 0px;

}







h2#s_requestinfo {

	text-indent:-9999px;

	width: 444px;

	height:27px;



	margin:26px 0 10px 20px;

	background: url(../images/s_requestinfo.png) no-repeat 0px 0px;

}
    Code (markup):
     
    yesyoucant, Apr 8, 2011 IP
  2. Wulkanen

    Wulkanen Well-Known Member

    Messages:
    2,429
    Likes Received:
    47
    Best Answers:
    3
    Trophy Points:
    175
    #2
    Try changing the color of one of these:

    #projectDetails a:link, body a:visited, body a:active {

	color: #[COLOR="darkred"]f1f1f2[/COLOR];

	text-decoration: underline;

}

#projectDetailsWide a:link, body a:visited, body a:active {

	color: #[COLOR="darkred"]f1f1f2[/COLOR];

	text-decoration: underline;

}
    Code (markup):
    to something like: #b4b4b4
     
    Wulkanen, Apr 8, 2011 IP
  3. cPAce

    cPAce Peon

    Messages:
    445
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Or

    You can use this sort of effect:

     
 document.onclick = function(evt)
{
var el = window.event? event.srcElement : evt.target;
if (el && el.className == 'unselected')
{
    var links = document.getElementsByTagName('a');
    for (var i = links.length - 1; i >= 0; i--)
    {
            if (links[i].className == 'selected')
                    links[i].className = 'unselected';
    }
    el.className = 'selected';
 }

 return false;
}
    Code (markup):
    Just modify it to your needs. This will basically tell the page what page your on and what link was clicked.
     
    cPAce, Apr 8, 2011 IP
  4. yesyoucant

    yesyoucant Member

    Messages:
    66
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    #4
    Thanks! I forgot to create this div and that fixed it. I used purple :)

     
    yesyoucant, Apr 8, 2011 IP