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: 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):
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
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.