CSS Tabs do not work

3 replies [Last post]

Wed, 2010-09-01 22:43

Offline

newbie

Timezone: GMT-4

Joined: 2010-09-01

Posts: 2

Points: 3

Hello,

I'm having some problems with my css tabs. I have created some basic tabs using css but when i view it in firefox or live view in dreamweaver, the tabs aren't there. Instead, the tabs are listed vertically with all of the content from each tab listed below it. I have both created my own css tabs and tried the generic spry tab function on dreamweaver. Same Result. Has anyone had these problems? Does anyone know a solution. Thanks!

Tags:

Beginners CSS Questions

Wed, 2010-09-01 22:50

Vade

Offline

Enthusiast

Joined: 2007-08-13

Posts: 315

Points: 276

You'll need to post all your

You'll need to post all your HTML and CSS

Thu, 2010-09-02 13:51

Offline

newbie

Timezone: GMT-4

Joined: 2010-09-01

Posts: 2

Points: 3

Here's the CSS @charset

Here's the CSS

@charset "utf-8";
 
#navbar {
 
}
 
#navbar #holder ul {
	list-style:none;
	margin:0;
	padding:0;
}
 
#navbar #holder ul li a {
	text-decoration:none;
	float:left;
	margin-right:10px;
 
	font-family:Verdana, Geneva, sans-serif
	color:#000;
	border:1px solid #999;
	border-bottom:none;
	padding:10px;
	width:75px;
	text-align:center;
	display:block;
	background:#F90;
}
 
#navbar #holder ul li a:hover  {
	background:#CC6;
	color:#000;
	text-shadow:1px 1px 1px #000;
}

Here's the HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="tabs.css" rel="stylesheet" type="text/css" />
<link href="/TabMenu/TabMenu.css" rel="stylesheet" type="text/css" />
<!-- InstanceBegin template="/Templates/home.dwt" codeOutsideHTMLIsLocked="false" -->
 
<head>
 
<link rel="shortcut icon" href="http://www.ontarionature.org/sos/images/favicon.ico" /><!-- #BeginEditable "titleEdit" -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Type" content="text/javascript; charset=UTF-8">
<title>Save Ontario's Species</title>
<style type="text/css">
 
<!--
 
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
 
-->
 
</style>
 
<style type="text/css">
 
<!--
 
.style2 {font-size: 10px}
 
-->
 
</style>
 
<style type="text/css">
 
<!--
 
.style3 {font-size: 11px}
 
-->
 
</style>
 
<style type="text/css">
body {
	background: #FFF;
	margin: 0;
	padding: 0;
	font-family: "normal Arial", Helvetica, sans-serif;
	font-size: 10px;
}
* {
	margin: 0;
	padding: 0;
	outline: none;
	float: none;
	list-style-image: none;
	list-style-type: none;
}
img {border: none;}
h1 {
	font: 3em normal Georgia, "Times New Roman", Times, serif;
	color: #fff;
	text-align: center;
	background: url(h1_bg.gif) no-repeat;
	text-indent: -99999px;
	margin: 100px 0 10px;
}
.container {
	overflow: hidden;
	width: 630px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#main {
	padding: 5px;
	background: #f0f0f0;
	border: 1px solid #ccc;
}
a {
	color: #000;
}
 
/*--Main Image Preview--*/
.main_image {
	width: 450px;
	height: 400px;
	float: left;
	background: #333;
	color: #fff;
}
.main_image h2 {
	font-size: 2em;
	font-weight: normal;
	margin: 0 0 5px;	padding: 10px;
}
.main_image p {
	font-size: 1.2em;
	padding: 5px;	margin: 0;
	line-height: 1.6em;
}
.block small { 
	padding: 0 0 0 20px; 
	background: url(icon_calendar.gif) no-repeat 0 center; 
	font-size: 1em; 
}
.main_image .block small {margin-left: 5px;}
.main_image .desc{
	position: absolute;
	bottom: 54px;
	left: 161px;
	width: 445px;
	display: none;
}
.main_image .block{
	width: 100%;
	background: #111;
	border-top: 1px solid #000;
}
.main_image a.collapse {
	background: url(btn_collapse.gif) no-repeat left top;
	height: 27px;
	width: 93px;
	text-indent: -99999px;
	position: absolute;
	top: -27px;
	right: 20px;
	background-image: url(Pics/btn_collapse.gif);
}
.main_image a.show {background-position: left bottom;} 
 
 
.image_thumb {
	float: right;
	width: 170px;
	background: #f0f0f0;
	height: 400px;
	padding: 0px;
	border: medium solid #ccc;
}
.image_thumb img {
	border: 1px solid #ccc;
	background: #fff;
	float: left;
	padding: 5px;
	margin-left: 0px;
}
.image_thumb ul {
	margin: 0; padding: 0;
	list-style: none;
}
.image_thumb ul li{
	margin: 0;
	background: #f0f0f0 url(nav_a.gif) repeat-x;
	width: 150px;
	float: right;
	padding-top: 12px;
	padding-right: 5px;
	padding-bottom: 12px;
	padding-left: 15px;
	clear: none;
	border: 1px solid #CCC;
}
.image_thumb ul li.hover {
	background: #ddd;
	cursor: pointer;
}
.image_thumb ul li.active {
	background:#6bb1da;
	cursor: default;
}
html .image_thumb ul li h2 {
	font-size: small;
	margin: 5px 0;
	padding: 0;
	text-align: right;
}
.image_thumb ul li .block {
	float: left;
	margin-left: 10px;
	padding: 0;
	width: 100px;
	left: 5px;
}	
.image_thumb ul li p{display: none;}
 
 
</style>
<!--Call jQuery-->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.80 }, 1 ); //Set Opacity
 
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
 
// * Adds a class 'last' to the last li to let the rotator know when to return to the first
$(".image_thumb ul li:last").addClass('last');
 
$(".image_thumb ul li").click(function(){
//Set Variables
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
 
if ($(this).is(".active")) { //If it's already active, then…
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image img").animate({ opacity: 0}, 250 );
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , 
function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.80, marginBottom: "0" }, 250 );
//$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
$(".main_image img").attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250 );
});
}
 
 
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;
 
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
 
 
// * if we are hovering over the image area, pause the clickNext function
// * by default, our new pauseClickNext variable is false
pauseClickNext = false;
 
$(".main_image .ramp").hover(
	function () 
	{
		pauseClickNext = true;
	}
	,
	function () 
	{
		pauseClickNext = false;
	}
); 
 
$(".main_image .ramp").hover(
	function () 
	{
		var obj= document.getElementById("main-image");
		obj.style.cursor='pointer';
	}
);
 
$(".main_image .ramp").click(
	function () 
	{	
		if ( document.getElementById("one").className == "active")
		{
			window.location="http://www.google.com";
		}
		else if ( document.getElementById("two").className == "active")
		{
			window.location="http://www.mckillen.net";
		}
		else if ( document.getElementById("three").className == "active")
		{
			window.location="http://www.spoccer.com";
		}
		else if ( document.getElementById("four").className == "active")
		{
			window.location="http://www.haltrent.com";
		}
		else if ( document.getElementById("five").className == "last active")
		{
			window.location="http://www.webstrategiesinc.com";
		}
	}
);
 
//Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});
 
$(".image_thumb").hover(
	function () 
	{
		pauseClickNext = true;
	}
	,
	function () 
	{
		pauseClickNext = false;
	}
);
 
// * Define function to click the next link
// * notice that it checks for a class of 'last', we added that above
var clickNext = function(){
if(!pauseClickNext) {
/// find the next li after .active
var $next_li = $("li.active").next("li");
if($("li.active").hasClass("last") ){
$(".image_thumb ul li:first").trigger("click");
} else {
$next_li.trigger("click");
}
}
};
 
 
// * setTimeInterval to run clickNext
setInterval(clickNext, 9000);
 
});//Close Function
 
</script><!-- #EndEditable -->
 
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
 
<meta name="keywords" content="save ontario species, save ontario's species, endangered species act, SOS, Ontario Species, save species, endangered species, protect species, protect environment, ontario environment, toxic environmental air pollution, toxic chemical, defence environment, pollution watch," />
 
<meta name="description" content="Ontario's outdated Endangered Species Act is failing to conserve, protect and restore the province's endangered species. The S.O.S. campaign is calling on the provincial government to live up to its commitment to renew the Act, in order to avoid a province-wide extinction crisis. Please visit the new Save Ontario's Species Coalition (S.O.S.) website for more information on the Endangered Species Act and what you can do to save Ontario's endangered species." />
 
<script language="JavaScript" src="Templates/func.js"></script>
 
<link href="Templates/sos.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body marginwidth="0" marginheight="0" bgcolor="#ffffff" leftmargin="0" topmargin="0"><!-- ImageReady Slices (toxicnation.psd) --><font face="Verdana"></font>
 
<table id="Table_01" border="0" cellpadding="0" cellspacing="0" width="800" height="590">
 
<tbody>
 
<tr valign="top">
 
<td colspan="3" valign="top" height="96"><a href="index.php"><img alt="" src="images/soswebsite_01.jpg" title="SOS - Save Ontario Species | Endangered Species Act" border="0" width="800" height="118" /></a></td></tr>
 
<tr>
 
<td align="left" valign="top" width="166" height="411">
 
<table id="menutab" border="0" cellpadding="0" cellspacing="0" width="100%">
 
<tbody>
 
<tr>
 
<td width="144"><a href="vision/vision.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu1','','images/soswebsite_10-click.jpg',1)"><img alt="" src="images/soswebsite_10.jpg" name="menu1" border="0" width="144" height="27" /></a></td>
 
<td width="22">&nbsp;</td></tr>
 
<tr>
 
<td><a href="members/members.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu2','','images/soswebsite_11-click.jpg',1)"><img alt="" src="images/soswebsite_11.jpg" name="menu2" border="0" width="144" height="27" /></a></td>
 
<td>&nbsp;</td></tr>
 
<tr>
 
<td><a href="resourses/resources.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu3','','images/soswebsite_12-click.jpg',1)"><img alt="" name="menu3" src="images/soswebsite_12.jpg" border="0" width="144" height="27" /></a></td>
 
<td>&nbsp;</td></tr>
 
<tr>
 
<td><a href="press/pressroom.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu4','','images/soswebsite_13-click.jpg',1)"><img alt="" name="menu4" src="images/soswebsite_13.jpg" border="0" width="144" height="27" /></a></td>
 
<td>&nbsp;</td></tr>
 
<tr>
 
<td><a href="action/action.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu5','','images/soswebsite_14-click.jpg',1)"><img alt="" name="menu5" src="images/soswebsite_14.jpg" border="0" width="144" height="27" /></a></td>
 
<td>&nbsp;</td></tr>
 
<tr>
 
<td><a href="links/links.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu6','','images/soswebsite_09-click.jpg',1)"><img alt="" name="menu6" src="images/soswebsite_09.jpg" border="0" width="144" height="27" /></a></td>
 
<td>&nbsp;</td></tr>
 
<tr>
 
<td>&nbsp;</td>
 
<td>&nbsp;</td></tr>
 
<tr>
 
<td>
 
<center>
 
<script type="text/javascript"><!--
 
google_ad_client = "pub-4382444036618556";
 
/* 120x90, created 6/20/08 */
 
google_ad_slot = "6265949640";
 
google_ad_width = 120;
 
google_ad_height = 90;
 
//-->
 
</script>
 
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
 
</script><br />
 
<br />
 
<script type="text/javascript"><!--
 
google_ad_client = "pub-4382444036618556";
 
/* 120x90, created 6/20/08 */
 
google_ad_slot = "6265949640";
 
google_ad_width = 120;
 
google_ad_height = 90;
 
//-->
 
</script>
 
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
 
</script></center></td>
 
<td>&nbsp;</td></tr>
 
<tr>
 
<td width="144"><!-- InstanceBeginEditable name="leftEdit" --><!-- InstanceEndEditable --><br />
 
</td>
 
<td>&nbsp;</td></tr></tbody></table> </td>
 
<td align="left" valign="top" width="612"><!-- InstanceBeginEditable name="mainEdit" -->
  <div id="main" class="container">
    <div class="main_image" id="main-image"> <img src="Pics/American_pelican.jpg" alt="Organized Food Fight" width="450" height="250" border="0" class="ramp" style="opacity: 1;" />
      <div style="display: block;" class="desc"> <a class="collapse">Close Me!</a>
        <div style="opacity: 0.80; margin-bottom: 0px; display: block;" class="block">
          <h2>American White Pelican threatened by oil spill.</h2>
          <!--<h2 style="cursor: pointer;" onclick="location.href='go';">Website Design & Development Services</h2>
				 <small>04/10/09</small>
 
				  <p style="cursor: pointer;" onclick="location.href='go';">-->
          <p>Though the beautiful white birds were recently down listed in Ontario (from endangered to threatened), they will face severe problems in their southern habitat this year due to the devastating effects of the BP oil spill.<span style="font-size:14px; font-weight:bold; color:#FF9;">&nbsp;&nbsp;<a href="http://www.thestar.com/news/ontario/article/843007--experts-worried-about-ontario-birds-migrating-to-gulf-oil-spill">Learn more >></a></span><br />
          </p>
        </div>
      </div>
    </div>
    <div class="image_thumb">
      <ul>
        <li class="active" id="one"><a href="Pics/American_pelican.jpg"><img src="Pics/American_pelican_thumb.jpg" alt="Slowing Dow" width="28" height="27" /></a>
          <div class="block">
            <h2>American Pelican may meet oil spill</h2>
            <!--<small>04/10/09</small>
					<p style="cursor: pointer;" onclick="location.href='go';">-->
            <p>Though the beautiful white birds were recently down listed in Ontario (from endangered to threatened), they will face severe problems in their southern habitat this year due to the devastating effects of the BP oil spill. <span style="font-size:14px; font-weight:bold; color:#FF9;">&nbsp;&nbsp;<a href="http://www.thestar.com/news/ontario/article/843007--experts-worried-about-ontario-birds-migrating-to-gulf-oil-spill">Learn more >></a></span><br />
            </p>
          </div>
        </li>
        <li class="" id="two"> <a class="ramp" href="Pics/Peregrin_Falcon.jpg"> <img src="Pics/Peregrin_Falcon_thumb.jpg" alt="Newborn" width="28" height="25" /></a>
          <div class="block">
            <h2>Hope for the Peregrin Falcon</h2>
            <!--<small>04/11/09</small>
					<p style="cursor: pointer;" onclick="location.href='go';">-->
            <p>Birders, scientists and citizens are reporting on a noticeable upswing in the peregrine falcon populations in the last few years, leading the Ministry of Natural Resources to conclude that the population numbers are increasing.&nbsp;&nbsp;<a href="http://www.cbc.ca/canada/windsor/story/2010/08/02/ont-peregrine-falcon-rebound-100802.html">Learn more >></a></p>
          </div>
        </li>
        <li class="" id="three"> <a class="ramp" href="Pics/turtle.jpg"><img src="Pics/turtle_thumb.jpg" alt="Endangered Species" width="28" height="25" /></a>
          <div class="block">
            <h2> Smuggler fined</h2>
            <!--<small>04/12/09</small>
					<p style="cursor: pointer;" onclick="location.href='go';">-->
            <p>An Ontario man was charged with attempting to smuggle over 1500 species across the border. He was given a $5,700 fine and six months house arrest.&nbsp;&nbsp;<a href="http://www.winnipegfreepress.com/canada/breakingnews/ontario-man-ordered-to-pay-5700-in-restitution-for-trying-to-smuggle-reptiles-99649024.html">Learn more >></a><br />
            </p>
          </div>
        </li>
        <li class="" id="four"> <a class="ramp" href="Pics/Smooth_Green_Snake.jpg"><img src="Pics/Smooth_Green_Snake_thumb.jpg" alt="Evolution" width="28" height="25" /></a>
          <div class="block">
            <h2>Government response due for 13 species</h2>
            <!--<small>04/13/09</small>
					<p style="cursor: pointer;" onclick="location.href='go';">-->
            <p>In November 2010, the Ministry of Natural Resources must release government responses that will detail the steps the government will take to help 13 species survive and recover. &nbsp;&nbsp;<a href="http://www.ebr.gov.on.ca/ERS-WEB-External/displaynoticecontent.do?noticeId=MTA5MDc3&amp;statusId=MTYzODM0&amp;language=en">Learn more >></a><br />
            </p>
          </div>
        </li>
        </ul>
    </div>
     </div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="navbar">
<div id="holder">
 
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Flickr</a></li>
<li><a href="#">Featured Species</a></li>
<li><a href="#">Blog</a></li>
</ul>
 
 
</div> <!-- end holder div -->
</div> <!-- end navbar div -->
<!-- InstanceEndEditable --></td>
 
<td width="22"><br />
 
</td></tr>
 
<script type="text/javascript">
 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
 
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
 
</script>
 
<script type="text/javascript">
 
var pageTracker = _gat._getTracker("UA-5236391-1");
 
pageTracker._trackPageview();
 
</script>
 
</body><!-- InstanceEnd -->
 
</html>

Thu, 2010-09-02 15:05

Vade

Offline

Enthusiast

Joined: 2007-08-13

Posts: 315

Points: 276

Your first step should be to

Your first step should be to validate your code http://validator.w3.org/

You'll need to post all your

Here's the CSS @charset

Your first step should be to

New forum topics

User login

Navigation