469,647 Members | 1,778 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,647 developers. It's quick & easy.

CSS tabs no longer showing on website

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
6 1609
drhowarddrfine
7,435 Expert 4TB
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
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
7,435 Expert 4TB
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
7,435 Expert 4TB
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
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

Post your reply

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

Similar topics

2 posts views Thread by MFA | last post: by
135 posts views Thread by Xah Lee | last post: by
4 posts views Thread by manjitsarma | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.