CSS Forum

**beryl12** · 03-14-2008, 09:10 PM

Hey everyone, I'm having some problems with my hovering for some sliding doors. My example is located at blindpuppetry.com. Don't worry about the rest of the site, please just help me with this problem. The images that I'm using for the doors are both 300px high. I appreciate everyone's help.

Thanks

**LadynRed** · 03-15-2008, 11:24 AM

Put a proper DOCTYPE on your page and put in the missing <body> tag and things might work as they're supposed to.

**beryl12** · 03-20-2008, 03:07 AM

Quote:

Originally Posted by LadynRed

Put a proper DOCTYPE on your page and put in the missing <body> tag and things might work as they're supposed to.

Okay, so I've done what you said, but I still didn't get anything to change.

**Gilligan** · 03-20-2008, 07:33 AM

The DOCTYPE must be above all code, including the first <html> tag

**chrishirst** · 03-20-2008, 11:43 AM

And just the one doctype as well.

**beryl12** · 03-20-2008, 10:03 PM

Yeah, sorry, still nothing.

**LadynRed** · 03-21-2008, 10:42 AM

Well, for one thing your syntax is wrong here:

<div id="slidetabsmenu" class=".tab_div">

Proper syntax is <div id="slidetabsmenu" class="tab_div">

You do NOT include the dot on the class name.

**beryl12** · 03-23-2008, 07:57 PM

And still nothing, I'm getting so frustrated with this I don't know what to do. I'll list my style sheet and my homepage for your convenience.

Here's the code for the index.html page

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Blind Puppetry</title>
<meta name="description" content="BlindPuppetry" />
<link href="blind_puppetry.css" rel="stylesheet">

</head>
<body>
<div class="wrapper">
<img class="banner" src="images/bp_header.png">

<img class="logo" src="images/bp_logo.png">

<div id="slidetabsmenu" class="tab_div">
<ul>
<li id="current"><a href="index.html" title="Home"><span>Home</span></a></li>
<li><a href="contact.html" title="New"><span>New</span></a></li>
<li><a href="portfolio.html" title="Revised"><span>Revised</span></a></li>
<li><a href="resume.html" title="Tools"><span>Tools</span></a></li>
</div>

</div>

</body>
</html>

And here's the style sheet for it.

Quote:

body
{
background-image: url('images/bg_bp.gif');
background-repeat: repeat
width: 100%;
}

.banner
{
position:absolute;
top:0px;
}

.logo
{
position:relative;
margin: 80px 0% 0px 10%;

}

.wrapper
{
width: 700px;
margin: 0px auto;
}

.tab_div
{
position:relative;
margin: 14px 0% 0px 35%;
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#slidetabsmenu {
float:left;
width:90%;
font-size:90%;
margin-left:120px;
margin-top:10px;
line-height:normal;

}

* html #slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}

#slidetabsmenu ul{
list-style-type: none;
margin:0 auto 0 auto;
margin-left: 100px;
padding:0;
}

#slidetabsmenu li{
display:inline;
margin:0;
padding:0;
}

#slidetabsmenu a {
float:left;
background:url(images/bp_left_tab.png) no-repeat left bottom;
margin:0;
padding:0 0 0 9px;
text-decoration:none;
}

#slidetabsmenu a span {
float:left;
display:block;
background:url(images/bp_right_tab.png) no-repeat right bottom;
padding:3px 20px 3px 5px;
font-weight:bold;
color:#3B3B3B;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */

#slidetabsmenu a:hover span {
color: black;
}

#slidetabsmenu #current a {
background-position:0 -125px;
}

#slidetabsmenu #current a span {
background-position:100% -125px;
color: black;
}

#slidetabsmenu a:hover {
background-position:0% -125px;
}

#slidetabsmenu a:hover span {
background-position:100% -125px;
}

**vapor2020** · 03-25-2008, 03:59 AM

You should always go to http://validator.w3.org/ and validate your html and css files when you run in to problems. It has solved about half of my problems. When I validated your CSS file I found that Line 4:
background-repeat: repeat
is missing a semi-colon. This could be causing your problems.

**beryl12** · 02:34 AM

Thank you to everyone for their help with my nav problems. It was finally the frameset doctype that worked out.