16 replies [Last post]
smudgie
Offline
Enthusiast
Last seen: 13 years 14 weeks ago
Joined: 2005-10-03
Posts: 122
Points: 0

Although I want my line sperator on my menu to be green I want to choice my own colour. I have tried adding border-color , border-top-color and border-top: 1px #066990; etc but it just ignores this statement.

#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid green;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

We need a little more to go

We need a little more to go on - perhaps a link? Your code is syntactically correct, but we can't see if there is any elements which match the #navlist li rule or if there is another rule which also sets the border-top but with a higher specificity, overriding the rule you have shown. View your page in FF. Use Firebug or Web developer toolbar to inspect the particular element and see what style rules are being applied. That should tell you what you need to know.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

An li is an inline object

An li is an inline object and as such cannot have a border unless you make it display:block or am I wrong?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

you is wrong!

:? you is wrong!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hugo wrote: you is

Hugo wrote:
:? you is wrong!

And you is right Wink Laughing out loud

smudgie
Offline
Enthusiast
Last seen: 13 years 14 weeks ago
Joined: 2005-10-03
Posts: 122
Points: 0

Sorry, does this

Sorry, does this help?

/*menu*/
#navlist
{
padding-left: 0;
margin-left: 0;
padding-top: 9px;
border-bottom: 1px solid gray;
width: 170px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px  solid green;
}

#navlist li a { text-decoration: none; }
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;

html example


edit/ smudgie 109 posts ? you should know how to post code snippets by now. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Smudgie I think we may need

Smudgie I think we may need to see all the code or a link as I don't see anything wrong with what you have shown.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

ClevaTreva wrote:An li is an

ClevaTreva wrote:
An li is an inline object and as such cannot have a border unless you make it display:block or am I wrong?

Just in case anyone reads this and gets the wrong idea.

An LI isn't inline.
Inline elements can have a border.

Laughing out loud

smudgie
Offline
Enthusiast
Last seen: 13 years 14 weeks ago
Joined: 2005-10-03
Posts: 122
Points: 0

Here's

Here's everything.

css

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 100%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #FFFFFF;
background-image:url(images/logo.gif);
background-repeat:no-repeat;
height: 110px; /*Height of top section*/
}
#topcontact{
padding-left: 185px;
margin-top: -15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

#topsection h5{
margin: 5px;
padding-top: 15px;
padding-left: 170px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #029374;
}
.bodyheader{
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #FFFFFF;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #FFFFFF;
}

#footer{
clear: left;
width: 100%;
background: #04745C;
color: #FFF;
text-align: center;
padding: 4px 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

#footer a{
color: #FFFFFF;
text-decoration:none;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
/*body content*/
#content{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#666666;
background-image:url(images/aid.jpg);
background-repeat:no-repeat;
}

/*menu*/
#navlist
{
padding-left: 0;
margin-left: 0;
padding-top: 9px;
border-bottom: 1px solid green;
width: 170px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid green;
}
#navlist li a:hover {
text-decoration: none;
color: #04745C;
}
#navlist li a {
text-decoration: none;
color: #000000;
}
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;

/*side box1*/
.curlycontainer{
border: 2px solid #b8b8b8;
margin-bottom: 1em;
width: 190px;

}

.curlycontainer .innerdiv{
background: transparent url(images/brcorner.gif) bottom right no-repeat;
position: relative;
left: 0px;
top: 2px;
padding: 1px 15px 8px 5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color:#E5F4F0;
}
/*body list*/
#bodylist
{
padding-left: 15px;
margin-left: 15px;
padding-top: 1px;
width: 420px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 12px;
}

#bodylist li
{
list-style-type:disc;
margin: 0;
padding: .25em;
}
#bodylist li a {
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#04745C;
/*active menu*/
}
#activelist li a:hover {
text-decoration: none;
color:#6699FF
}
#activelist li a {
text-decoration: none;
color:#FF0000;
}

.remove {
color: #FF0000;
}
remove a:link {
color: #FF0000;
}
remove a:active {
color: #FF0000;
}

html

First Response Training Ltd

First Response Training Ltd - Health & Safety Training Consultants
Telephone: (01642) 603596 Email:

First Aid Training Delivered on or off site
  • 4 day First Aid at Work HSE Approved
  • 2 day First Aid at Work - Refresher HSE Approved
  • 1 day Emergency Aid/Appointed Person HSE Recommended
  • Special Hazard Training
  • A danger from poisoning from certain cyanide and related compounds
  • Danger of burns from Hydrofluoric Acid
  • A need for Oxygen in an adjunct to mouth to mouth resuscitation
  • Incident Control
  • Community First Aid
  • Sports Injuries
  • Asthma Awareness
  • Heart Attack Awareness
  • Resuscitation Skills: Adults/Children/Babies
  • First Aid in the Care Sector
  • First Aid for Mountain Leaders
  • Basic First Aid Assistants

Next First Aid Courses
Monday 23rd April
Wednesday 2nd May
Wednesday 12th May
New Courses
Sports Injuries
Access to Safe Practices

edit by CT: post edited because code tags not used properly

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Your page fails validation

Your page fails validation for 3 simple reasons that can be fixed:

1. You didn't end the link tag for your css with the xhtml end tag.
2. You have used the character & whereas you should use &
3. You have this coide in the middle of a list:

Special Hazard Training

Which can't be there. I have the fixed file on my server and I am looking right now at it.

CT

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ok Can't see any problem.

Ok

Can't see any problem. The links on the left have nice green borders top and the whole list ends with one border bottom in green.

CT

I like the look and feel BTW!

smudgie
Offline
Enthusiast
Last seen: 13 years 14 weeks ago
Joined: 2005-10-03
Posts: 122
Points: 0

The trouble is I'm trying to

The trouble is I'm trying to specify a particular green, when I try adding a Hex colour it ignores the statement, it only seems to like it if I use solid green, red etc. I know I must be able to change this, just don't know how.

Thanks for the other comments will try and rectify the issues.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

A hex colour is

A hex colour is interchangeable with a color name.

Change the CSS to the hex color. Browse the page in Firefox. Use the webdeveloper, View Style Information function to get the cross-hair cursor. Hover over the element which applies the border, check the bar with the element containment heirarchy to make sure its the right one, click. You should see the style rules that are affecting that element. Check to make sure (a) the rule with your hex colour property is showing and also check to make sure no other rules set the same colour, but with a higher specificity.

If you aren't able to hover over the item, you can achieve the same thing by using the dom inspector, finding the element in questions and changing the right pane to show CSS style rules.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

In your code, it would be

In your code, it would be like this:

#navlist { padding-left: 0; margin-left: 0; padding-top: 9px; border-bottom: 1px solid #066990; width: 170px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; } #navlist li { list-style: none; margin: 0; padding: 0.25em; border-top: 1px solid #066990; }

And it does work.

smudgie
Offline
Enthusiast
Last seen: 13 years 14 weeks ago
Joined: 2005-10-03
Posts: 122
Points: 0

Thanks that did it!

Thanks that did it! border-top: 1px solid #066990;. I didn't realise I needed to keep the solid bit in.

Ta for the help.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

But you had it in the

But you had it in the original code :?

Who's going to administer the virtual clip round the ear then Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ouch. I heard that, pardon?

Ouch. I heard that, pardon?