css alternate list background problem

not sure what i'm doing developing on xmas... but i guess we all have
our own demons! -lol-

i'm using the following css to style my horizontal menu...

/* STYLE HORIZONTAL MENU */

#hmenu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#hmenu li
{
float: left;
margin: 0 0.15em;
padding: 0;
text-align: center
}

#hmenu li a
{
background: url(../images/hmenu.gif) #fff bottom left repeat-x;
height: 1.3em;
line-height: 1.3em;
float: left;
width: 7.5em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Commented backslash hack hides rule from IE5-Mac \*/
#hmenu li a
{
float: none
}
/* End IE5-Mac hack */

/* KEEP HMENU FROM WRAPPING */

#hmenu
{
width: 50em;
}

on the php side, i have a <ul> in a <div="hmenu">.

everything works great except i want the ends of this list to have a
different background b/c they aren't links - they portray other
information (ie, contact phone number and current page name).

i've tried setting .blueback in my css document and putting
class="blueback" in the <a> and in the <li> with no luck.

i tried a.blueback and li.blueback.

no luck.

does anyone have any ideas? the css will reveal i'm using an image as
my main background and it continues to display no matter what i try.
tia...

....and merry christmas! :-)

On 25 Dec 2004 19:42:11 -0800, skeeterbug <jskeith1 (AT) san (DOT) rr.com> wrote:

not sure what i'm doing developing on xmas... but i guess we all have
our own demons! -lol-

i'm using the following css to style my horizontal menu...

Happy ho-ho to you. What I want for Xmas is a URL to an examplr of your
problem. That will really speed up the process.

Jingle jingle.

neal, the code isn't up b/c it has fallen and can't get up! ;-)

happy new year!!!

here is my html:

<div id="hmenu">
<ul>
<li><a class="white"><span><?php print $currentpage ?></span></a></li>
<li><a href="elistings.php">Email Listings</a></li>
<li><a href="listings.php">Online Listings</a></li>
<li><a href="mortgage.php">Mortgage Area</a></li>
<li><a href="drawing.php" class="red"><span>Enter To
Win!</span></a></li>
<li class="blueback"><a
class="white"><span>858-733-2886</span></a></li>
</ul>
</div>

here is my css:

li.blueback {background-color: #0d2474;

}

a.red span { color: #f00;
text-decoration: none;
}

a.white span { color: white;
text-decoration: none;

/* STYLE HORIZONTAL MENU */

#hmenu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#hmenu li
{
float: left;
margin: 0 0.15em;
padding: 0;
text-align: center
}

#hmenu li a
{
background: url(../images/hmenu.gif) #fff bottom left repeat-x;
height: 1.3em;
line-height: 1.3em;
float: left;
width: 7.5em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

On 25 Dec 2004 23:20:05 -0800, Skeets <skillet3232 (AT) yahoo (DOT) com> wrote:

neal, the code isn't up b/c it has fallen and can't get up! ;-)

happy new year!!!

here is my html:

Oh jeez, I'd be doing a disservice by wading through this. It simply won't
do.

Let me point out ways to improve, please.

a class="white"><span><?php print $currentpage ?></span></a

Why add a span? Why not style the a instead? The span unnecessarily
complicates your markup. And your CSS as a result. Please fix that up.

Geocities has free webspace. use that if you have access to nothing
better. Really, the ability to click and see is going to yield you more
responses than your current mess.

here is my css:

li.blueback {background-color: #0d2474;

}

If you define background-color, always also define color.

a.red span { color: #f00;
text-decoration: none;
}

a.white span { color: white;
text-decoration: none;

Close with }? Did you? That's why a URL is preferred...

And text-decoration: none? How do I know there's a link?

Please don't post more code. Get something online, post the URL. Please.

On Sun, 26 Dec 2004 02:50:46 -0500, Neal wrote:

..Get something online, post the URL. Please.

For more tips on preparing a test case..
<http://www.spartanicus.utvinternet.ie/help_us_help_you.htm>

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

fair enough. i will set out to get it online tomorrow after i get some
sleep and get the links up to speed so that my site is consistently
brkern and not jsuper jacked up. i used span b/c i was having a
problem styling those <li>s. i agree it doesn't make much sense if i
can figure out the styling.

good point about the links. usability is on my list to improve.

i appreciate the interest in helping - thank you.



Neal wrote:

On 25 Dec 2004 23:20:05 -0800, Skeets <skillet3232 (AT) yahoo (DOT) com> wrote:

neal, the code isn't up b/c it has fallen and can't get up! ;-)

happy new year!!!

here is my html:

Oh jeez, I'd be doing a disservice by wading through this. It simply
won't
do.

Let me point out ways to improve, please.

a class="white"><span><?php print $currentpage ?></span></a

Why add a span? Why not style the a instead? The span unnecessarily
complicates your markup. And your CSS as a result. Please fix that
up.

Geocities has free webspace. use that if you have access to nothing
better. Really, the ability to click and see is going to yield you
more
responses than your current mess.

here is my css:

li.blueback {background-color: #0d2474;

}

If you define background-color, always also define color.


a.red span { color: #f00;
text-decoration: none;
}

a.white span { color: white;
text-decoration: none;


Close with }? Did you? That's why a URL is preferred...

And text-decoration: none? How do I know there's a link?

Please don't post more code. Get something online, post the URL.
Please.

here's a link...

http://www.geocities.com/operationsengineer1/

i want the two side menu locations to have a solid dark blue background
and white text since they aren't going to links - they will display
information (current page and phone number).

i tried creating class

..blueback {background-color: blue;}

and call that class in <a class="blueback"> and <li class="blueback">
for the appropriate list items. it didn't do what i hoped it would.

i think this may have something to do with the id i'm calling.

any help would be appreciated.

skeeterbug wrote:

not sure what i'm doing developing on xmas... but i guess we all
have
our own demons! -lol-

i'm using the following css to style my horizontal menu...

/* STYLE HORIZONTAL MENU */

#hmenu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#hmenu li
{
float: left;
margin: 0 0.15em;
padding: 0;
text-align: center
}

#hmenu li a
{
background: url(../images/hmenu.gif) #fff bottom left repeat-x;
height: 1.3em;
line-height: 1.3em;
float: left;
width: 7.5em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Commented backslash hack hides rule from IE5-Mac \*/
#hmenu li a
{
float: none
}
/* End IE5-Mac hack */

/* KEEP HMENU FROM WRAPPING */

#hmenu
{
width: 50em;
}

on the php side, i have a <ul> in a <div="hmenu">.

everything works great except i want the ends of this list to have a
different background b/c they aren't links - they portray other
information (ie, contact phone number and current page name).

i've tried setting .blueback in my css document and putting
class="blueback" in the <a> and in the <li> with no luck.

i tried a.blueback and li.blueback.

no luck.

does anyone have any ideas? the css will reveal i'm using an image
as
my main background and it continues to display no matter what i try.
tia...

...and merry christmas! :-)

skeeterbug wrote:

here's a link...

http://www.geocities.com/operationsengineer1/

Change

li a .blueback {background: blue bottom left repeat-x;}
to
#hmenu li.blueback, #hmenu a.blueback {color: white; background: blue
bottom left repeat-x;}


--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jim Moe wrote:

skeeterbug wrote:

here's a link...

http://www.geocities.com/operationsengineer1/

Change
li a .blueback {background: blue bottom left repeat-x;}
to
#hmenu li.blueback, #hmenu a.blueback {color: white; background: blue
bottom left repeat-x;}

Actually, this is all that is needed:
#hmenu a.blueback {...
or:
#hmenu ul li a.blueback {...
whereas this contributes nothing that I can see:
#hmenu li.blueback {...

Perhaps someone can explain the /reason/ as to why these don't work:
a.blueback {...
li a.blueback {...
ul li a.blueback {...

--
Gus

kchayka wrote:

Perhaps someone can explain the /reason/ as to why these don't work:
a.blueback {...
li a.blueback {...
ul li a.blueback {...

#hmenu has higher specificity than the more generic selectors, so the
existing rule

#hmenu li a {background: url(hmenu.gif) #fff bottom left repeat-x;...}

takes precedence. As an override, I would suggest
#hmenu li a.blueback {...}

and put it right after the first rule, mostly because it may make it
easier to read/follow, and subsequently easier to maintain.

Ah yes, thank you very much.

--
Gus