CSS <Span> does not work without the <li> command?

**Availor** · 01 October 2006, 01:53 PM

Ok all you CSS pros there.

One picture worth a thousand words. I'm working on my new website. I'm trying to make a tabbed CSS navigation which is clean and simple. Nothing fancy. I paste only the upper navigation bar. When I hover my mouse over the text moves! And text-decoration: none; does not work! I assume this has got to be because I don't use the list command <li> Here's my code (I put the black borders on purpose so you see the difference):

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/* -----------------------------------------------------------------------------
Navigation
--------------------------------------------------------------------------------*/

#navcontainer {
padding-left: 10px;
}
#lowerbar {
background-color: #D2EBC3;
height: 25px;
width: 760px;
margin: auto;
border-top: 1px solid #6A7F80;
}

.active {
margin-right: 5px;
background: #D2EBC3;
border-top: 1px solid #6A7F80;
border-left: 1px solid #6A7F80;
border-right: 1px solid #6A7F80;
padding: 2px 2px 2px 4px;
font: bold Arial, Helvetica, sans-serif;
}
.inactive {
margin-right: 5px;
background: #DFF7FB;
border-top: 1px solid #AFC7CB;
border-left: 1px solid #AFC7CB;
border-right: 1px solid #AFC7CB;
border-bottom: 1px solid #6A7F80;
padding: 2px 2px 1px 4px;
font: bold Arial, Helvetica, sans-serif;
}

.inactive a:link {
text-decoration: none;
}

span .inactive a:hover {
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #6A7F80;
}

</style>
<body>
<div id="header">
<div id="headerspace"> Some heading</div>
<div id="navcontainer">
<Span class="active">Xara </Span>
<span class="inactive"> <a href="#">Forum</a> </span>
<span class="inactive"> <a href="#"> About </a> </span>
</div>

</div>
<div id="lowerbar">lowerbar </div>
<div id="wrapper"></div>

</body>
</html>

By the way: .inactive a:hover span {
...
}
does not work!

I've been searching for answers.. no luck

Anyone can help me out there?

**gidgit** · 01 October 2006, 03:44 PM

"Text moves..."

...maybe padding ?

and yes, wouldn't li indentify the group of elements ?

**LonK** · 01 October 2006, 07:44 PM

Originally Posted by Availor

One picture worth a thousand words. I'm working on my new website. I'm trying to make a tabbed CSS navigation which is clean and simple. Nothing fancy. I paste only the upper navigation bar. When I hover my mouse over the text moves! And text-decoration: none; does not work! I assume this has got to be because I don't use the list command <li> Here's my code (I put the black borders on purpose so you see the difference):

I see no movement on mouse over. text-decoration is working fine, there is no decoration on the links. What are you expecting? <li> is not a command, it's an element. It has nothing to do with anything in this context. The black borders do nothing as

span .inactive a:hover {}
targets nothing in your document. You're pointing to any a element that is a child of any element with class=inactive that is a child of span element. Perhaps you meant
span.inactive a:hover {} (no space in span.inactive)
yes then the hover works on your links and the black borders show and yes the there is movement because you're adding borders to the a elements.

see Selectoracle for help with CSS selectors.

Anyway, your CSS is working as you've specified. Though there are several other syntax errors:
font: bold Arial, Helvetica, sans-serif;
- size is required when using the this shortcut property
- no spaces in font-family list
correct would be e.g.:
font: bold 1em Arial,Helvetica,sans-serif;

In your HTML markup:
- the <head> tag is not closed
- <Span class="active">Xara </Span> -- XHTML elements must be lower case.

For this type of tabbed navbar, a list is most appropriate. See Listutorial, etc for great info.

**Availor** · 01 October 2006, 08:30 PM

Thank you for the reply... I've been pulling my hair out, literaly!
Here's the code as I've fixed it. I changed the HTML tags to lower cases. The HTML does close I missed to copy it that's all.

That's the new CSS, works the same way as it was. The border is too close to the letters and they move on hover. I want the border to change color nothing more.

CSS code:

#navcontainer {
padding-left: 10px;
}

#lowerbar {
background-color: #D2EBC3;
height: 25px;
width: 760px;
margin: auto;
border-top: 1px solid #6A7F80;
}
#lowestbar {
background: #EFFADC;
height: 15px;
width: 760px;
margin: auto;
}

.active {
margin-right: 1px;
background: #D2EBC3;
border-top: 1px solid #6A7F80;
border-left: 1px solid #6A7F80;
border-right: 1px solid #6A7F80;
padding: 2px 2px 2px 4px;
font: bold Arial, Helvetica, sans-serif;
}
/*
.inactive a:hover {
border-top: 1px solid #C3ECF2;
border-left: 1px solid #C3ECF2;
border-right: 1px solid #C3ECF2;
padding: 4px 2px 1px 4px;
}*/
span.inactive a:hover {
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
padding: 4px 2px 1px 4px;
}
.inactive a:link {
text-decoration: none;
color: #0099FF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}

.inactive a:visited {
text-decoration: none;
color: #0099FF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
.inactive {
margin-right: 1px;
background: #DFF7FB;
border-top: 1px solid #AFC7CB;
border-left: 1px solid #AFC7CB;
border-right: 1px solid #AFC7CB;
border-bottom: 1px solid #6A7F80;
padding: 2px 2px 1px 4px;
font: bold Arial, Helvetica, sans-serif;
}

HTML code

</head>

<body>
<div id="header">
<div id="headerspace">Some heading</div>

<div id="navcontainer">
<span class="active">xara</span>
<span class="inactive"> <a href="#">forum</a></span>
<span class="inactive"> <a href="#">about</a></span>
</div>

</div>
<div id="lowerbar">lowerbar </div>
<div id="lowestbar"> </div>
<div id="wrapper"></div>
</body>
</html>

About the font size and spaces I was "helped" by Dreamweaver popup when I write the code so it's all leagal according to Dreamweaver.

Thanks again for your help

**Availor** · 02 October 2006, 09:55 AM

I did it! I did it!!!! I got it myself (gives the best feeling ever)! Took me about 5 hours to figure it out! I think it will be a great tip for all:

If you put tags like <span class="something">text</span> When you want
this class to do something like .something a:hover {} this code will apply to the text, meaning it will be under the span command giving you double borders or double background or whatever.

The right code is to put the hover command on the id container that contains the span.

For example:

<div id="tabnav">
<span class="something"><a href="link"> text</a></span>
</div>

To activate the hover properties it would be correct to put the following code:

#tabnav a {
properties
}

And for the hover:

#tabnav a:hover, #tabnav a:visited {
other properties
}

My mistake was that I applied properties to the span class, and when I wanted to change the style with hover I got double borders, and my letters moved.

I insisted on not using the <li> command because then I had to use the float command. If I use the float command it's hard to put something below the navigation (need to calculate margin etc... which is not always good for explorer or firefox).

I didn't want to use the float command for that matter.

Anyway here's the CSS code if anyone's interested:

#navcontainer {
padding-left: 10px;
}
#navcontainer a {
margin-right: 1px;
background: #DFF7FB;
border-top: 1px solid #AFC7CB;
border-left: 1px solid #AFC7CB;
border-right: 1px solid #AFC7CB;
padding: 4px 2px 1px 4px;
font: bold Arial, Helvetica, sans-serif;
}

#navcontainer a:hover {
border-top: 1px solid #C3ECF2;
border-left: 1px solid #C3ECF2;
border-right: 1px solid #C3ECF2;
padding: 4px 2px 1px 4px;
}

#navcontainer a:visited {
text-decoration: none;
color: #0099FF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}

#lowerbar {
background-color: #D2EBC3;
height: 25px;
width: 760px;
margin: auto;
border-top: 1px solid #6A7F80;
}
#lowestbar {
background: #EFFADC;
height: 15px;
width: 760px;
margin: auto;
}

.active {
margin-right: 1px;
background: #D2EBC3;
border-top: 1px solid #6A7F80;
border-left: 1px solid #6A7F80;
border-right: 1px solid #6A7F80;
padding: 2px 2px 2px 4px;
font: bold Arial, Helvetica, sans-serif;
}

.inactive a:hover {
border-top: 1px solid #C3ECF2;
border-left: 1px solid #C3ECF2;
border-right: 1px solid #C3ECF2;
padding: 4px 2px 1px 4px;
}

.inactive a:link {
text-decoration: none;
color: #0099FF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}

The HTML is same as above.

Disregard the class ".inactive a:hover" it doesnt serve any purpose just forgot to put "/* */" on it

Thread: CSS <Span> does not work without the <li> command?

Thread Tools

Display

CSS <Span> does not work without the <li> command?

Re: CSS <Span> does not work without the <li> command?

Re: CSS <Span> does not work without the <li> command?

Re: CSS <Span> does not work without the <li> command?

Re: CSS <Span> does not work without the <li> command?

Bookmarks

Bookmarks

Posting Permissions