CSS List Problem

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

CSS List Problem

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> CSS List Problem

Page: [1]

Nicole

Posts: 2831
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline

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 Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Nicole)


Nicole Posts: 2831 Joined: 9/15/2004 From: Nambucca / Kempsey, Australia Status: offline	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 _____________________________ (in reply to jaybee)


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Nicole)


Nicole Posts: 2831 Joined: 9/15/2004 From: Nambucca / Kempsey, Australia Status: offline	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 _____________________________ (in reply to jaybee)

caz

Posts: 3520
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline

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

_____________________________

Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk

I remember when it took less than 4hrs to fly across the Atlantic.

(in reply to Nicole)


Nicole Posts: 2831 Joined: 9/15/2004 From: Nambucca / Kempsey, Australia Status: offline	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 _____________________________ (in reply to caz)


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Nicole)


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to jaybee)


Spooky Posts: 26599 Joined: 11/11/1998 From: Middle Earth Status: offline	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 _____________________________ If you arent part of the solution, then there is good money to be made prolonging the problem ��k� Database / DRW help Check out the Tutorials for Frontpage Databases Forum FAQ' s Developers Edition Spooky Login User Registration and Management tool Personalized Frontpage Hosting (in reply to jaybee)


Nicole Posts: 2831 Joined: 9/15/2004 From: Nambucca / Kempsey, Australia Status: offline	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 _____________________________ (in reply to Spooky)


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Nicole)


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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) _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to jaybee)


Nicole Posts: 2831 Joined: 9/15/2004 From: Nambucca / Kempsey, Australia Status: offline	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 _____________________________ (in reply to jaybee)


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Nicole)


Lazykatz Posts: 158 Joined: 1/12/2005 Status: offline	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 _____________________________ http://lazykatz.com (in reply to jaybee)