CSS Removing border on bottom only <li>

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Removing border on bottom only <li>

AbiT

4:37 pm on Jul 16, 2009 (gmt 0)

Hi guys,

This is probably a seriously easy thing to do but having tried a few things I still can't work it out!

I've made a list which is seperated with a border (bottom) I'd like to take it off on the bottom <li>

Any help much appreciated!

Html uploaded to:

<snip>

CSS uploaded to:

<snip>

Thanks in advance!

[edited by: swa66 at 4:48 pm (utc) on July 16, 2009]
[edit reason] No URLs, please see ToS and forum charter [/edit]

birdbrain

9:39 am on Jul 17, 2009 (gmt 0)

Hi there AbiT,

and a warm welcome to these forums. ;)

Does this example help?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
#mylist {
 background-color:#fee;
 }
#mylist li {
 margin-bottom:5px;
 border-bottom:1px solid #000;
 background-color:#eef;
 }[blue]
#mylist #noborder {
 margin-bottom:0;
 border-bottom:0;
 }[/blue]
</style>
</head>
<body>
<ul id="mylist">
 <li>list one</li>
 <li>list two</li>
 <li>list three</li>
 <li [blue]id="noborder"[/blue]>list four</li>
</ul>
</body>
</html>

swa66

10:01 am on Jul 17, 2009 (gmt 0)

It might be easier to turn it around and use borders on the top of all items in the list except the first one as then you could use the :first-child pseudo class to remove the border from the first one.
:last-child exists too but it's CSS3, so you might not be ready to go there.

birdbrain

10:21 am on Jul 17, 2009 (gmt 0)

Hi there swa66,

it really is a pity that you did not proffer this information when you had your scissors out yesterday. :(
I am sure that it could have saved my little grey cells from all that debilitating effort. ;)

birdbrain

swa66

8:39 pm on Jul 17, 2009 (gmt 0)

Think I messed up and cut a few of my synapses when I had the mighty scissors out ;) so it takes a while to for them to regrow and fire up before I can answer ;)

All joking aside, the answer I gave isn't complete, there's more to find [hint: legacy IE versions need assistance]

AbiT

10:58 am on Jul 20, 2009 (gmt 0)

Thanks birdbrain that worked a treat :-)

birdbrain

2:21 pm on Jul 20, 2009 (gmt 0)

No problem, you're very welcome. ;)

AbiT

10:02 am on Aug 20, 2009 (gmt 0)

Hi guys - same list, different problem!

For some reason the rollover colour isn't showing in Firefox but is in Safari. Any ideas?

<snip>

[edited by: swa66 at 2:03 pm (utc) on Aug. 20, 2009]
[edit reason] No URLs, please see ToS and Forum Charter [/edit]

birdbrain

10:22 am on Aug 20, 2009 (gmt 0)

Hi there AbiT,

I am seeing #a3b02f on hover using Firefox 3.5.2 ;)

birdbrain