By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,968 Members | 1,458 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,968 IT Pros & Developers. It's quick & easy.

CSS tabs no longer showing on website

P: 3
I am a novice, so bear with me.

I designed a website using CSS TABS, all was fine, then I copy and pasted meta name, etc for keywords, tweaking it where necessary for keywords. I did not notice any problems until I looked at the site and although the text for the tabs was showing up the images which make up the tabs weren't.

I have no idea why this has happened, can I have some advice as to what to check, and how to fix it,

thank you,

Site is www.fourposterbeds.com

Code for tabs

<style type="text/css">
<!--
body {
BACKGROUND: #fff;
MARGIN: 10px 0px 0px5px;
FONT: small/1.5em Georgia,Serif;
COLOR: #000;
voice-family: inherit;
text-align: left;
padding: 0px;
margin-top: 10px;
margin-left: 5px;
background-image: url(file:///C|/Documents and Settings/Stephen/Desktop/FourPosterBeds.com/All%20Images/images/background.jpg);
background-image: url(../All Images/images/background.jpg);
background-image: url(../template_images/background.jpg);
}
unknown {
FONT-SIZE: small
}
#header {
FONT-SIZE: 9pt;
BACKGROUND: #ffffcc url(tabs/bg.png) repeat-x 50% bottom;
FLOAT: right;
WIDTH: 100%;
LINE-HEIGHT: normal;

}
#header ul {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
MARGIN: 0px;
PADDING-TOP: 10px;
LIST-STYLE-TYPE: none;
}
#header li {
PADDING-RIGHT: 0px;
PADDING-LEFT: 9px;
BACKGROUND: url(tabs/left.png) no-repeat left top;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;

}
#header a {
PADDING-RIGHT: 15px;
DISPLAY: block;
PADDING-LEFT: 6px;
FONT-WEIGHT: bold;
BACKGROUND: url(tabs/right.png) no-repeat right top;
FLOAT: left;
PADDING-BOTTOM: 3px;
COLOR: #765;
PADDING-TOP: 5px;
TEXT-DECORATION: none;

}
#header a {
FLOAT: none
}
#header a:hover {
COLOR: #333;
}
#header #current {
BACKGROUND-IMAGE: url(tabs/left_on.png);
}
#header #current a {
BACKGROUND-IMAGE: url(tabs/right_on.png);
PADDING-BOTTOM: 4px;
COLOR: #333;

}
.style10 {
font-size: small;
color: #000000;
font-family: "Lucida Calligraphy";
font-weight: bold;
}
.style11 {
font-family: "Lucida Calligraphy";
font-size: medium;
}
.style16 {color: #373737; font-weight: bold; font-size: x-small; }
.style18 {font-size: large}
.style19 {color: #373737; font-weight: bold; font-size: small; }
.style20 {font-size: small}
a:link {
color: #000033;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
.style15 {font-size: x-small}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
Nov 7 '06 #1
Share this Question
Share on Google+
6 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Your doctype is incomplete. Why are you using transitional? What are you transitioning from? All new pages should use a strict doctype.

In any case, here's both:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Nov 7 '06 #2

P: 3
THANK YOU

I've changed them using the code provided, so thank you.

Is this why the tabs weren't working, or can there be another reason?

Is this piece of code correct for the type of site it is:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Nov 7 '06 #3

drhowarddrfine
Expert 5K+
P: 7,435
THANK YOU

I've changed them using the code provided, so thank you.

Is this why the tabs weren't working, or can there be another reason?

Is this piece of code correct for the type of site it is:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Yes. I'm leaving for an hour or so and I'll look at your site again when I get back.

Quick note: validate your html. Case matters in xhtml and css; use lower case.
Nov 7 '06 #4

drhowarddrfine
Expert 5K+
P: 7,435
Gee. I'm back already. Are your tabs working correctly now?

The doctype is the set of 'rules' you are telling the browser you are using. Without one, the browser picks, which may not be what you want.
Nov 7 '06 #5

P: 3
Nope they aren't working. They were working before I started playing around with all of the keywords, etc. I'm just wondering if I've put something in the wrong place, and now I can't remember what it was like when it was working compared to now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- DW6 -->
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/template_index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<title></title>
<META http-equiv=Page-Enter content=BlendTrans(Duration=2.0)>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" --><meta name="Description" content="The Four Poster Bed Company are UK makers of custom made wooden, Platform Bed, Four Poster or Pencil Post Beds and Canopy Bed, and bedroom furniture." />

<meta name="Keywords" content="UK, makers, beds, platform bed, four poster bed, pencil post beds, wooden, canopy bed, custom made,bedroom, furniture" />

<meta name="subject" content="UK makers of custom made four poster bed, pencil post and canopy beds and matching bedroom furntiure." />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="GOOGLEBOT" content="index,follow" />
<meta name="Robots" content="all" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta http-equiv="Revisit-After" content="14 days" />
<meta name="Author" content="Teddy" />
<meta name="coverage" content="Worldwide" />
<meta name="Generator" content="Teddy" />
<meta name="verify-v1" content="VCGzoy3YZdQs20F1DTAWesDj4O7NLsa09mEe8TyV7 dE=" />

<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body {
BACKGROUND: #fff;
MARGIN: 10px 0px 0px5px;
FONT: small/1.5em Georgia,Serif;
COLOR: #000;
voice-family: inherit;
...ETC...

Any advice?
Nov 8 '06 #6

drhowarddrfine
Expert 5K+
P: 7,435

Post your reply

Sign in to post your reply or Sign up for a free account.