#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2010
    Posts
    12
    Rep Power
    0

    Hover links in Chrome + firefox


    Hey,

    Just making a site for a friend and I have run into a block with the Hover tag.
    It works fine in IE but for some reason other browsers aren't working properly...

    Any ideas?
    I have put my source underneath, sorry its squashed up.
    I have also loaded the site to the domain but won't put the link - not sure if I'm allowed.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Innovate Photography - Home</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="StyleSheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="wrap"> <div id="header"> <img src="images/logo2.png" alt="logo - Innovate photography" width="780" height="62" /> </div> <ul id="nav_bar"> <li><b href="index.html">Home</b></li> <li><a href="about.html">About Us</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="disability.html">Disability</a></li> </ul> <div id="slideshow"> <img src="images/index_page/1.jpg" alt="Slideshow Image 1" class="active" /> <img src="Images/index_page/2.jpg" alt="Slideshow Image 2"/> <img src="Images/index_page/3.jpg" alt="Slideshow Image 3"/> <img src="Images/index_page/4.jpg" alt="Slideshow Image 3"/> </div> <!--Java image gallery - Index Page --> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); var $sibs = $active.siblings(); var rndNum = Math.floor(Math.random() * $sibs.length ); var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et mi magna, non sodales augue. Aliquam porta, risus id euismod egestas, lacus velit tincidunt quam, in sodales enim urna et dui. Duis interdum libero at dolor aliquet nec ultricies lacus interdum. Proin non consequat erat. Sed varius, libero id bibendum aliquam, arcu augue ultrices dui, placerat laoreet dolor nibh et nunc. Ut dui magna, semper quis sagittis sed, faucibus ac ante. Nulla imperdiet tempor orci vel varius. Aliquam porta placerat tortor, non dignissim libero elementum ac. Mauris in magna in ligula tincidunt viverra non vestibulum elit. Etiam hendrerit leo non mauris consectetur nec blandit orci auctor. Sed felis felis, facilisis nec posuere ac, accumsan nec est. Aenean sapien magna, commodo ut sagittis gravida, varius eget magna. Etiam ligula sem, faucibus eget tristique quis, hendrerit vitae justo. Maecenas fermentum sollicitudin sodales. Ut non aliquet neque. Mauris sagittis gravida purus nec consequat. Sed in quam leo.</p> <p>Phasellus quis orci ligula. Curabitur quis neque ultricies ante adipiscing vehicula. Morbi blandit, purus dictum pharetra feugiat, magna ipsum lobortis velit, eu blandit turpis ipsum at arcu. Vestibulum non mauris felis. Curabitur viverra arcu eget tortor pellentesque a laoreet mauris mattis. Sed et ligula tortor, eget laoreet mauris. Integer nunc enim, tristique eu tempus at, vehicula non enim. Maecenas sed porttitor lorem. Nam ultricies, nisl rutrum vulputate facilisis, enim purus commodo elit, sed pretium tortor ligula quis lectus. Aliquam erat volutpat. Duis euismod placerat nisi ac adipiscing. Fusce varius pellentesque sapien, eu placerat neque mattis pharetra. Aenean mollis neque sed mi pretium sodales. Aenean fringilla rhoncus tincidunt. Sed vel odio et sem condimentum iaculis.</p> <p>In mollis posuere tortor, at euismod sem fermentum nec. Aenean euismod, neque sit amet tincidunt mattis, risus nunc bibendum mi, non malesuada purus eros ut urna. Donec accumsan sagittis nibh, auctor ultricies massa tincidunt et. Phasellus quam nunc, pretium eu dictum at, porttitor a dolor. Etiam nec odio felis, nec aliquam nibh. Sed eleifend, odio faucibus venenatis vulputate, orci neque mattis augue, sed consectetur tellus lorem a lacus. Aliquam diam ipsum, consectetur et tempus non, suscipit nec orci. Donec dignissim lobortis gravida. Integer ornare diam vitae elit tristique a auctor lorem condimentum. Sed sapien nisi, ullamcorper at gravida vitae, mollis vel mauris. In non tortor ante, nec scelerisque elit. Etiam tristique, magna quis tristique ultrices, nunc tellus tempus lorem, a suscipit tortor magna at dui.</p> </div> </div> </body> </html>
    Code:
    /* Index Markup */ * { padding: 0px; margin: 0px; } body { background-color: #ffffff; margin:0; padding:0; border:0; min-width:700px; font-size:100%; } #wrap { width:750px; margin:0 auto; padding-top: 20px; } #header {width: 200px; padding-left: 0px;} #nav { margin:0 auto; font:Palatino; } #nav_bar { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; font:Palatino; padding-left: 190px; } #nav_bar li { float: left;} #nav_bar li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px dotted #000; font:Palatino; } #nav_bar li b {display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px dotted #000; font:Palatino; border-left: 1px dotted #000; } #nav_bar a:hover {color: #000;} #nav_bar b:hover {color: #000;} #nav_bar:hover {color: #000;} h2 { font:Palatino; font-size:15px; text-decoration: none; } /*** Slideshow positioning **/ #slideshow { position:relative; width: 570px; height: 400px; padding-bottom: 10px; } #slideshow IMG { position:absolute; top:55px; right: -40px; z-index:10; } #slideshow IMG.active { z-index:10; opacity:1.0; } #slideshow IMG.last-active { z-index:9; } #content { position: relative; width: 670px; padding-top: 20px; font:Palatino; font-size:12px; color: #1e54ef; padding-bottom: 20px; padding-left: 30px; } #photo { } #index_style { position:absolute; left:50px; top:150px;} #index_button { position:absolute; left:750px; top:400px; } #index_button a { font-size: 30px; font:Palatino; } #index_button a:hover {color: #1e54ef} #index_button a:link {text-decoration: none; font-family:Georgia,serif;}
  2. #2
  3. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,830
    Rep Power
    9646
    Originally Posted by rev_ollie
    I have put my source underneath, sorry its squashed up.
    It happens when you use the button to insert code.

    Copy/paste your code into the textbox like you normally would, select it all, and then click the button.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2010
    Posts
    12
    Rep Power
    0
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <head>
    <title>Innovate Photography - Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="StyleSheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
    	<div id="wrap">
    		<div id="header">
    			<img src="images/logo2.png" alt="logo - Innovate photography" width="780" height="62" />
    		</div>
    		
    
    			<ul id="nav_bar">
    			<li><b href="index.html">Home</b></li>
    			<li><a href="about.html">About Us</a></li>
    			<li><a href="gallery.html">Gallery</a></li>
    			<li><a href="disability.html">Disability</a></li>
    			</ul>
    
    		
    		<div id="slideshow"> 
    			<img src="images/index_page/1.jpg" alt="Slideshow Image 1" class="active" /> 
    			<img src="Images/index_page/2.jpg" alt="Slideshow Image 2"/> 
    			<img src="Images/index_page/3.jpg" alt="Slideshow Image 3"/>
    			<img src="Images/index_page/4.jpg" alt="Slideshow Image 3"/>
    		</div> 
    		
    		<!--Java image gallery - Index Page -->
    				<script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
    				<script type="text/javascript"> 
    				/*** 
    					Simple jQuery Slideshow Script
    					Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
    				***/
    				function slideSwitch() {
    					var $active = $('#slideshow IMG.active');
    					if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    					// use this to pull the images in the order they appear in the markup
    					var $next =  $active.next().length ? $active.next()
    						: $('#slideshow IMG:first');
    					
    					var $sibs  = $active.siblings();
    					var rndNum = Math.floor(Math.random() * $sibs.length );
    					var $next  = $( $sibs[ rndNum ] );
    					$active.addClass('last-active');
    					$next.css({opacity: 0.0})
    						.addClass('active')
    						.animate({opacity: 1.0}, 1000, function() {
    							$active.removeClass('active last-active');
    					   });
    				}
    				$(function() {
    					setInterval( "slideSwitch()", 5000 );
    				});
    		</script>
    		<div id="content">
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et mi magna, non sodales augue. Aliquam porta, risus id euismod egestas, lacus velit tincidunt quam, in sodales enim urna et dui. Duis interdum libero at dolor aliquet nec ultricies lacus interdum. Proin non consequat erat. Sed varius, libero id bibendum aliquam, arcu augue ultrices dui, placerat laoreet dolor nibh et nunc. Ut dui magna, semper quis sagittis sed, faucibus ac ante. Nulla imperdiet tempor orci vel varius. Aliquam porta placerat tortor, non dignissim libero elementum ac. Mauris in magna in ligula tincidunt viverra non vestibulum elit. Etiam hendrerit leo non mauris consectetur nec blandit orci auctor. Sed felis felis, facilisis nec posuere ac, accumsan nec est. Aenean sapien magna, commodo ut sagittis gravida, varius eget magna. Etiam ligula sem, faucibus eget tristique quis, hendrerit vitae justo. Maecenas fermentum sollicitudin sodales. Ut non aliquet neque. Mauris sagittis gravida purus nec consequat. Sed in quam leo.</p>
    		<p>Phasellus quis orci ligula. Curabitur quis neque ultricies ante adipiscing vehicula. Morbi blandit, purus dictum pharetra feugiat, magna ipsum lobortis velit, eu blandit turpis ipsum at arcu. Vestibulum non mauris felis. Curabitur viverra arcu eget tortor pellentesque a laoreet mauris mattis. Sed et ligula tortor, eget laoreet mauris. Integer nunc enim, tristique eu tempus at, vehicula non enim. Maecenas sed porttitor lorem. Nam ultricies, nisl rutrum vulputate facilisis, enim purus commodo elit, sed pretium tortor ligula quis lectus. Aliquam erat volutpat. Duis euismod placerat nisi ac adipiscing. Fusce varius pellentesque sapien, eu placerat neque mattis pharetra. Aenean mollis neque sed mi pretium sodales. Aenean fringilla rhoncus tincidunt. Sed vel odio et sem condimentum iaculis.</p>
    		<p>In mollis posuere tortor, at euismod sem fermentum nec. Aenean euismod, neque sit amet tincidunt mattis, risus nunc bibendum mi, non malesuada purus eros ut urna. Donec accumsan sagittis nibh, auctor ultricies massa tincidunt et. Phasellus quam nunc, pretium eu dictum at, porttitor a dolor. Etiam nec odio felis, nec aliquam nibh. Sed eleifend, odio faucibus venenatis vulputate, orci neque mattis augue, sed consectetur tellus lorem a lacus. Aliquam diam ipsum, consectetur et tempus non, suscipit nec orci. Donec dignissim lobortis gravida. Integer ornare diam vitae elit tristique a auctor lorem condimentum. Sed sapien nisi, ullamcorper at gravida vitae, mollis vel mauris. In non tortor ante, nec scelerisque elit. Etiam tristique, magna quis tristique ultrices, nunc tellus tempus lorem, a suscipit tortor magna at dui.</p>
    		</div>
    	</div>
    
    </body>
    </html>
    Code:
    /* Index Markup */
    * {
    padding: 0px;
    margin: 0px;
    }
    
    body {
    	background-color: #ffffff;
    	margin:0;
    	padding:0;
    	border:0;
    	min-width:700px;
    	font-size:100%;
    }
    
    #wrap  { 
    	width:750px; 
    	margin:0 auto; 
    	padding-top: 20px;
    }
    
    #header {width: 200px; padding-left: 0px;}
    
    
    #nav {
    	margin:0 auto;
    	font:Palatino;
    }
    
    #nav_bar {
    	width: 100%;
    	float: left;
    	margin: 0 0 3em 0;
    	padding: 0;
    	list-style: none;
    	font:Palatino;
    	padding-left: 190px;
    	}
    	
    #nav_bar li {	float: left;}
    
    #nav_bar li a {
    	display: block;
    	padding: 8px 15px;
    	text-decoration: none;
    	font-weight: bold;
    	color: #069;
    	border-right: 1px dotted #000;
    	font:Palatino;
    	}
    	
    #nav_bar li b {display: block;
    	padding: 8px 15px;
    	text-decoration: none;
    	font-weight: bold;
    	color: #069;
    	border-right: 1px dotted #000;
    	font:Palatino;
    	border-left: 1px dotted #000;
    	}
    	
    #nav_bar a:hover {color: #000;}
    #nav_bar b:hover {color: #000;}
    #nav_bar:hover {color: #000;}
    	
    h2 {
    	font:Palatino;
    	font-size:15px;
    	text-decoration: none;
    }
    	
    /*** Slideshow positioning **/
     
    #slideshow {
    position:relative;
    width: 570px;
    height: 400px;
    padding-bottom: 10px;
    }
     
    #slideshow IMG {
    	position:absolute;
    	top:55px;
    	right: -40px;
    	z-index:10;
    }
     
    #slideshow IMG.active {
        z-index:10;
        opacity:1.0;
    }
     
    #slideshow IMG.last-active {
        z-index:9;
    }
    
    #content {
    position: relative;
    width: 670px;
    padding-top: 20px;
    font:Palatino;
    font-size:12px;
    color: #1e54ef;
    padding-bottom: 20px;
    padding-left: 30px;
    }
    
    #photo {
    }
    
    #index_style {
    position:absolute;
    left:50px;
    top:150px;}
    
    #index_button {
    position:absolute;
    left:750px;
    top:400px;
    }
    
    #index_button a {
    font-size: 30px;
    font:Palatino;
    }
    
    #index_button a:hover {color: #1e54ef}
    #index_button a:link {text-decoration: none; font-family:Georgia,serif;}
    That's better - sorry about that
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You need to tell browsers that you want "#slideshow" to sit below the nav bar by giving "clear:left" to "#slideshow". If you give a background color or a border to "#slideshow" you would see why it's not working as you want in non-IE browsers.

    By the way, the "font" property can't be used to just specify the font to be used. You should use the "font-family" property instead.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2010
    Posts
    12
    Rep Power
    0
    Ah brilliant thanks very much!
    So its just a simple case the div is covering the menu/nav bar...

    Will have to try and position the image again now and hopefully should all work from there.
    The code for the image gallery isn't working properly and it's just staying on the single image - not flicking between the 4 I want it to. Also it doesn't seem to want to move from the position its in now...weird.
    Anyhow thanks for that, much appreciated.

IMN logo majestic logo threadwatch logo seochat tools logo