Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2013
    Location
    Were my backpack is!
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Pseudo Class :Hover stopped working after unrelated edit

    Hi. My Pseudo Class :Hover stopped working after making an unrelated edit to my code. The focus still works though! I checked everything and ran everything through the validators and other than character encoding, wich it worked without, there were no errors.

    All I did was add an image of a flag to a section of my website, and after that I noticed the hover highlighting had stopped working. This is really frustrating as I was just about to call my page done. This is my very first webpage (feel free to let me know what you think).

    I will show my code, its fairly long but I made sure to heavily comment and organize my CSS. The hover code is near the top in the none-specific elements category. The image that I added has no CSS and is below the 'coming soon' heading.

    Here is the website (the hover link is the only link on the sidebar):http://www.adrianhoulewebprojects.com/HomePage.html

    HTML:
    Code:
    <!--Home Page for adrianhoulewebpojects.com Version 1.0-->
    <!--Written by Adrian Houle-->
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    	<link rel="stylesheet" type="text/css" href="css/HomePageStyle.css">
    	<title>Adrian Houle Web Projects</title>
    </head>
    
    <body>
    		
    	<div id="Sidebar">
    		<h3>Projects</h3>
    		<ul>
    			<li>
    				<a href="http://www.adrianhoulewebprojects.com/UnderConstruction.html">Under Construction</a>
    			</li>
    			<li>Unfinished Project #2</li>
    			<li>Unfinished Project #3</li>
    			<li>Unfinished Project #4</li>
    			<li>Unfinished Project #5</li>
    		</ul>
    	</div>
    	
    	<div class="box">
    		
    		<div class="HalfSpacer"></div>
    		
    		<div class="TransBox" id="Header">
    			<h1>Welcome to<br>AdrianHouleWebProjects.com</h1>
    		</div>
    	
    		<div class="Spacer"></div>
    		
    		<div class="TransBox" id=About>
    			<h2>About:</h2>
    			<p>Welcome to my website.I had a bit of time over the holidays and decided to finally get around to learning web programming. The purpose of this website is to give me a place to practice and display what I learn in the form of web projects. I may also be making some blogs that will also serve to showcase my travelling and hobbies.</p>
    		</div>
    	
    		<div class="Spacer"></div>
    		
    		<div class="TransBox" id="NewStuff">
    			<h2>Coming Soon</h2>
    			<ul>
    				<li>
    					<h3>Australia Travel Blog</h3>
    					<img src="http://www.adrianhoulewebprojects.com/img/AustralianFlag100by50.gif"  alt="Australian Flag" >
    					<p>2013-2014 Australia Travel Blog coming soon.</p>
    				</li>
    			</ul>
    		</div>
    		
    		<div class="Spacer"></div>
    		
    		<div class="TransBox" id="Contact">
    			<h2>Contact Info:</h2>
    			<p class="Italic">Please report any compatibility, accessibility, or security issues to:</p>
    			<p>Adrian Houle</p>
    			<p>adrianhoule@gmail.com</p>
    		</div>
    		
    		<div class="Spacer"></div>
    		
    		<div class="TransBox" id="Footer">
    			<p>Website by Adrian Houle</p>
    		</div>
    		
    	</div>
    	<div class="BottomBorder"></div>
    
    </body>
    
    </html>
    CSS
    Code:
    /*****************************************  Info  *********************************************************/
    /*Style Sheet for HomePage of adrianhoulewebprojects.com*/
    /*Written by Adrian Houle*/
    /*For any issues with my website (compatibility, accessibility, white-hat reports) feel free to contact me at
     adrianhoule@gmail.com
    /*Page Purpose: Create a homepage that welcomes users to my website and directs them to various projects*/
    /***********************************************************************************************************/
    
    /*************************************  Table of Contents  **************************************************/
    /*CSS layout*/
    /* 	-none specific elements*/
    /* 	-classes*/
    /* 	-ID's and children of ID's*/
    /* 	-Other*/
    /************************************************************************************************************/
    
    /**************************************      CSS code     ****************************************************/
    
    /* -none specific elements ***********************************************************************************/
    
    p {
    	font-size: large;
    	font-weight: bolder;
    }
    
    a {
    	color: blue;
    }
    
    a :hover, :focus{
    	background-color: yellow; 
    	text-decoration: none;
    	font-size: larger;
    }
    
    /* -classes **************************************************************************************************/
    
    /*Element that contains everything except the sidebar and has the main background image.*/
    .box { 
    	display: block;
    	position: relative;
    	width: 100%; /*test and adjust to keep it from expading the browser*/
    	height: 100%;
    	border: 3px solid black;
    	right: 0;
    	top: 0px;
    	padding: 0;
    	background-image: url(http://www.adrianhoulewebprojects.com/img/CautionStripes.png);
    } 
    
    /*Allows for synchronised space adjustment between elements*/
    .Spacer {
    	position :relative;
    	height: 100px;
    }
    /*Allows for synchronised space adjustment between elements*/
    .HalfSpacer {
    	position :relative;
    	height: 30px;
    }
    
    /*Every element that contains text belongs to this class*/
    /*This class has nothing to do with transgender boxes, or gender boxes in general*/
    .TransBox {
    	width: 70%;
    	padding: 1em;
    	z-index: 1;
    	left: 20%;
    	position: relative;
    	background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
    	moz-box-shadow: 0 0 5px 5px #888; /*shadow effect with cross compatibility*/
    	webkit-box-shadow: 0 0 5px 5px#888;
    	box-shadow: 0 0 5px 5px #888;
    }
    
    .Italic {
    	font-style: Italic;
    }
    /* -ID's and children of ID's********************************************************************************/
    
    /*Sidebar, to be fixed to the left hand side of the screen. Must allow conent to the right of it*/
    #Sidebar {
    	height: 100%;
    	width: 10%;
    	left: 0px;
    	top: 0px;
    	padding: 2%;
    	display: inline;
    	position: fixed;
    	background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
    	border-style: solid;
    	border-width: 3px;
    	z-index: 2;
    }
    #Sidebar ul {
    	padding-left:0;
    }
    #Sidebar li {
    	margin: 10%;
    }
    
    /*Header text*/
    #Header h1 {
    	text-align: center;
    }
    
    #Footer p {
    	text-align: center;
    }
    /* -Other (empty)*****************************************************************************************/

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Adrian888,
    :hover changes that links color and font-size and removes text-decoration for me just fine. Maybe you just need to clear your cache or something?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Dec 2013
    Location
    Were my backpack is!
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Solved.

    I had a extra space on my hover code! I guess its pretty sensitive.

    Solved.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •