CSS List Problem

All Forums >> [Web Development] >> Cascading Style Sheets

Message

Nicole -> CSS List Problem (2/13/2005 5:59:59)

I'm creating a site using CSS for styles not layout, and am having a problem with two separate lists on the site.

I'm using includes for the header, footer and left side, and as far as i can see all of those include pages are fine, but when i view the finished product in a browser, the list in the bottom left box is black and should be white. Can anyone see where i'm going wrong?

The URL is here

And the include page is here

And my CSS code is here:

body.banner {

color: #284262;
}

body.footer {

background-color: #284262;
}

h2 {

font-family: arial, verdana, helvetica, sans-serif;
font-weight:bold;
font-style:normal;
font-size: 26px;
color: #000000;
margin: 0; 
}

h3 {

font-family: arial, verdana, helvetica, sans-serif;
font-weight:bold;
font-style:normal;
font-size: 22px;
color: #333333;
margin: 0; 
}

h4 {

font-family: arial, verdana, helvetica, sans-serif;
font-weight:bold;
font-style:normal;
font-size: 18px;
color: #333333;
margin: 0; 
}

h5 {

font-family: arial, verdana, helvetica, sans-serif;
font-weight:bold;
font-style:normal;
font-size: 16px;
color: #333333;
margin-top: 0;
margin-bottom: 5px; 
}

hr {

height: 1px;
width: 100%;
color: #000000;
margin-bottom: 5px;
}

p {

font-family: arial, verdana, helvetica, sans-serif;
font-weight:normal;
font-style:normal;
font-size: 12px;
color: #333333;
margin-top: 0;
}

li {

font-family: arial, verdana, helvetica, sans-serif;
font-weight:normal;
font-style:normal;
font-size: 12px;
color: #333333;
list-style-type: square;
}

li.leftbottom {

font-family: arial, verdana, helvetica, sans-serif;
font-weight:normal;
font-style:normal;
font-size: 12px;
color: #ffffff;
list-style-type: square;
}

a:link.banner { 

color: #cccccc; 
text-decoration: none; 
font-size: 12px; 
font-family: arial, verdana, helvetica, sans-serif;
font-weight: bold;
}

a:visited.banner {

color: #cccccc; 
text-decoration: none; 
font-size: 12px; 
font-family: arial, verdana, helvetica, sans-serif;
font-weight: bold;
} 

a:hover.banner { 

color: #ffffff; 
text-decoration: none; 
font-size: 12px; 
font-family: arial, verdana, helvetica, sans-serif;
font-weight: bold;
} 

a:link.left { 

color: #cccccc; 
text-decoration: none; 
font-size: 11px; 
font-family: arial, verdana, helvetica, sans-serif;
}

a:visited.left {

color: #cccccc; 
text-decoration: none; 
font-size: 11px; 
font-family: arial, verdana, helvetica, sans-serif;
} 

a:hover.left { 

color: #ffffff; 
text-decoration: none; 
font-size: 11px; 
font-family: arial, verdana, helvetica, sans-serif;
} 

p.footer {

font-family: verdana, arial, helvetica, sans-serif;
font-weight:normal;
font-style:normal;
font-size: 10.5px;
color: #cccccc;
margin-top: 0;
margin-bottom: 0;
}

a:link.footer { 

color: #cccccc; 
text-decoration: none; 
font-size: 10.5px; 
font-family: verdana, arial, helvetica, sans-serif;
}

a:visited.footer {

color: #cccccc; 
text-decoration: none; 
font-size: 10.5px; 
font-family: verdana, arial, helvetica, sans-serif;
} 

a:hover.footer { 

color: #ffffff; 
text-decoration: none; 
font-size: 10.5px; 
font-family: verdana, arial, helvetica, sans-serif;
}

p.left {

font-family: arial, verdana, helvetica, sans-serif;
font-weight:normal;
font-style:normal;
font-size: 12px;
color: #cccccc;
margin-top: 0;
} 

h4.left {

font-family: arial, verdana, helvetica, sans-serif;
font-weight:bold;
font-style:normal;
font-size: 18px;
color: #ffffff;
margin: 0; 
}

p.leftbottom {

font-family: arial, verdana, helvetica, sans-serif;
font-weight:normal;
font-style:normal;
font-size: 12px;
color: #ffffff;
margin-top: 0;
} 

h4.leftbottom {

font-family: arial, verdana, helvetica, sans-serif;
font-weight:bold;
font-style:normal;
font-size: 18px;
color: #ffffff;
margin: 0; 
}

p.banner {

margin-top: 0;
margin-bottom: 0;
color: #ffffff;
}

a:link { 

color: #666666; 
text-decoration: underline; 
font-size: 12px; 
font-family: arial, verdana, helvetica, sans-serif;
}

a:visited {

color: #666666; 
text-decoration: underline; 
font-size: 12px; 
font-family: arial, verdana, helvetica, sans-serif;
} 

a:hover { 

color: #333333; 
text-decoration: underline; 
font-size: 12px; 
font-family: arial, verdana, helvetica, sans-serif;
text-decoration: underline;
} 

p.quote {

font-family: arial, verdana, helvetica, sans-serif;
font-weight:normal;
font-style:italic;
font-size: 12px;
color: #333333;
margin-top: 0;
margin-bottom: 15px;
}

p.author {

font-family: arial, verdana, helvetica, sans-serif;
font-weight:normal;
font-style:normal;
font-size: 12px;
color: #006699;
margin-top: 0;
margin-bottom: 15px;
align: right;
}

Thanks

Nicole

jaybee -> RE: CSS List Problem (2/13/2005 7:05:52)
Your class, leftbottom, is defined in your header it needs to go in the list.

Nicole -> RE: CSS List Problem (2/13/2005 15:28:20)
Hi Jaybee, It's strange that it is included in the page called "leftbottom", but not showing up in the page called "template". If you click on the include page "leftbottom", you'll see code like: <li class="leftbottom">Accommodation</li> <li class="leftbottom"..... ??? Nicole

jaybee -> RE: CSS List Problem (2/13/2005 17:01:45)
If that's what's showing up in the online page then that's what you have loaded. Check out the files again. I'll take another look tomoroow. I'm just off to watch Shaun of the Dead.

Nicole -> RE: CSS List Problem (2/13/2005 19:24:13)
As the "view source" code is appearing differently to the code shown in Frontpage in "HTML view", i.e. in "view source" it's showing the code for all the include pages as well, i'm wondering if anyone knows whether I could cut and paste the "view source" code into Frontpage "HTML view" without affecting the page at all, then save and upload it? Nicole

caz -> RE: CSS List Problem (2/13/2005 21:30:08)

Before you do anything with the retrieved source code, have a look in Firefox.

Could be your DTD affecting things?

You have:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>The Gender Centre Inc.</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="gc.css" />
</head>

HTML Tidy in Firefox gives this tidied version:-

<!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-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Gender Centre Inc.</title>
<link type="text/css" rel="stylesheet" href="gc.css" />
</head>

I don't usually add a separate stylesheet for includes, the css is all in the main sheet. But you may work differently, but I would guess if the DTD correction doesn't solve it, then there is a conflict between the two stylesheets. I may have missed it but I didn't see any declaration for links, in lists, in leftmenu - but it is very late for me.
Cheers,
Carol

Nicole -> RE: CSS List Problem (2/14/2005 14:50:41)
Hi Caz, Thanks for your help, I'm afraid changing that didn't help either :( Nicole

jaybee -> RE: CSS List Problem (2/14/2005 18:37:43)
Nicole, Can you mail me the files. I need the main page, the include page and the css. I'll PM you the address to send it to as I have a larger inbox there.

jaybee -> RE: CSS List Problem (2/14/2005 18:48:37)
And if you want to try something before then... get rid of all the heading gumph in the includes page. FP supposedly ignores everything outside of the body tags in includes but you never know.

Spooky -> RE: CSS List Problem (2/14/2005 19:12:49)
The main issue appears to be that the online files show : <li>Accommodation</li> Yet the include file shows : <li class="leftbottom">Accommodation</li> Id check the publishing technique and ensure the files are updated and correct

Nicole -> RE: CSS List Problem (2/14/2005 19:32:51)
Okay, I do admit that I tend to FTP instead of using the "Publish Web" feature most often. I've just cleared the directory though, and then uploaded using Frontpage and it asked me whether i'd like to over-write files that i knew weren't there because i'd just deleted them. So upon saying "yes" they uploaded, yet when i tried to view the page it didn't load. That's why I've been FTP'ing instead. I do get really frustrated with the Frontpage Publish Web feature. But I have re-FTP'd the files again, because the "Publish Web" feature didn't work and the problem's still happening. I know i should use the frontpage "Publish Web" feature, but i think i need someone to tell me what i'm doing so wrong with it. Nicole

jaybee -> RE: CSS List Problem (2/15/2005 7:53:20)
Nicole, Try taking out all the extra stuff that you've got in the include just leaving from H4 down. I've pasted the include direct into the page and it works fine so I think it has something to do with the double call for the stylesheet. I can't test it live as my host doesn't have FPSE enabled. Your FTP software may well be telling you that the files are still there when they aren't. Try deleting all the files then doing a folder refresh in your FTP. Then check if they've gone by typing the URL in your browser. Clear your cache first. It should come back with a 404 not found. The other way you can do it is to go in through your control panel, find the file manager and delete them from there, then use ftp to upload. I think, as you are using FP bots though you should use Publish. If none of the above works then get rid of the include and stick the code in the page.

jaybee -> RE: CSS List Problem (2/15/2005 8:23:37)
BTW, I've just loaded your page in Firefox and used the css editor to play around with the styles on the page. It's all working fine so it has to be that the include with the list classes hasn't uploaded or is getting overwritten. The reason it's coming out black is it's falling back to the standard li colour. Oh and the orange headings look crud. Yellow looks better. (see other post in critiques)

Nicole -> RE: CSS List Problem (2/15/2005 17:31:03)
Hi Jaybee, Well I think i've tried everything and nothing seems to change it. So, for now i think i'll take a break from it and try and clear my head a bit. Two questions though, can i style the <ul> tag instead with the same class and delete the style for the <li> in the style sheet? The other question is, if you were designing a site like this, would you have used the includes and styles the way i have? This is a 700+ page site, so i believe i should be using an include for the left side content. Thanks for all your help Nicole

jaybee -> RE: CSS List Problem (2/15/2005 18:11:42)
UL yes but it'll depend on the rest of your styles as to what happens. Try it. Would I have used includes yes, would I have done it that way, no. If you take a look at www.california-ballroom.info, all the pages there use an included left column, header and right column. Note, I say "column" you are including bits. I've set up the entire column and include that. If you look at the source you'll only see my comments where the includes start. You won't see include statements like yours because I use php which is seamless. Basically for each page I have a centre div. After that I include the header, then the left column, then the right column. (This is so screen readers hit the content first. It's done with positioned divs. Don't try putting your includes at the end as it won't work with a table layout.) So ignore the order but you can see how the whole left column works.

Lazykatz -> RE: CSS List Problem (2/17/2005 19:44:01)
Hi Jaybee and Nicole, I tried the link for ballroom, the coma ended up in hyperlink code, after the "o" of info. Nice site JB. Grizz [8D]

Page: [1]

7.763672E-02