marisc88 Posted January 1, 2012 Share Posted January 1, 2012 Hi Im trying to style a group of nested lists. I want the numbered list to be one font with the nested bulleted list to be a different font. In my external style sheet i've put this : ol.a {font-family:Teen;color:#6600CC} and my html lists are this: <ol class="a" type="1" start="1"> <li>Why is my area not listed? <ul><li> copy ....... <a href="contact.html"> Contact us </a> copy ....... </li> </ul> <li>copy .......? <li>copy .......? <li>copy .......? <li>copy .......? <ul><li>copy ....... <a href="contact.html"> Contact us </a> copy ........ </li> </ul> </ol> But the CSS is changing every tag to the style, instead of just the <ol> .I've tried changing the style to apply to <li> and insert <li class="a"> wherever i want that style but that doesnt work either. Can someone please tell me what im missing in this extremely simple code?? Many Thanks Link to comment Share on other sites More sharing options...
marisc88 Posted January 1, 2012 Author Share Posted January 1, 2012 Well I worked something out using: <li class="a">Why is my area not listed?</li> and: li.a {font-family:Teen;color:#6600CC} in my style sheet Which works for firefox but not IE, so obviously its not the correct way to do it ??? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 1, 2012 Share Posted January 1, 2012 Not exactly sure if i have this correct? but i think you are looking for this, you have to set the colour for li and a, or the anchor tag will revert to default styling colour set by browser. <style type="text/css">ol.a li {font-family:Teen;color:#6600CC;}ol.a ul li {font-family:Teen;color:#ff0000;}ol.a ul li a {font-family:Teen;color:#00ff00;}</style><ol class="a" type="1" start="1"> <li>Why is my area not listed? <ul> <li> copy ....... <a href="contact.html"> Contact us </a> copy ....... </li> </ul> </li> <li>copy .......?</li> <li>copy .......?</li> <li>copy .......?</li> <li>copy .......? <ul> <li>copy ....... <a href="contact.html"> Contact us </a> copy ........ </li> </ul> </li></ol> Link to comment Share on other sites More sharing options...
marisc88 Posted January 1, 2012 Author Share Posted January 1, 2012 Hi Thanks for the reply; this is better CSS and works again in IE but not Mozilla still. I can change the font of the bulleted list and it works in both but not the colour- the colour stays the same as the numbered list. I'm actually having trouble changint the colours of my links in Mozilla aswell so I must have messed up somewhere else. Clearly i'm new to all this and don't quite understand what cancels what out etc. Here is my full style sheet, Any obvious mistakes that might cause this??? : a:link { border-style: 0}a:link {color:#0066CC}a:hover {color:#0000FF}table{ background-color:"white";font-family:Calibri}td {font-family: Calibri; font-size: 11pt;}table.first {border-bottom: 2px solid #6600CC}table.second{border: 3px solid #6600CC}table.third {border: 1px solid #C0C0C0}table.third table { /* keep nested tables from having borders */border-width: 0px}table.fourth {background-color:"#aacde9"}h1{font-family:Teen;color:#6600CC}h2{font-family:Teen;color:#6600CC}h3{font-family:calibri;color:#6600CC}h4{font-family:calibri;color:"black"}h5{font-family:calibri;color:"black"}p.tab { margin-left: 20px; }h3.tab{margin-left: 20px; font-family:calibri;color:#6600CC; font-size; 12px }h4.tab{margin-left: 20px; font-family:calibri;color:"black"; font-size; 10px }ol.a li {font-family:Teen;color:#6600CC;}ol.a ul li {font-family:Calibri;color:"Black";} Many Thanks Link to comment Share on other sites More sharing options...
marisc88 Posted January 1, 2012 Author Share Posted January 1, 2012 p.s I realise the whole thing is a bit of a mess anyway. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 1, 2012 Share Posted January 1, 2012 you never define textual or hex colours with quotes in css, and try to keep them lower case. /* will affect ALL anchor tags wherever found */ a {border-style: 0; } /*define default settings*/a:link { color:#0066CC; } /*define styling change for specific pseudo :link only */a:hover {color:#0000FF; } /*define styling change for specific pseudo :hover only */table{ background-color:white; font-family:Calibri; }td {font-family: Calibri; font-size: 11pt; }table.first {border-bottom: 2px solid #6600CC; }table.second{border: 3px solid #6600CC; }table.third {border: 1px solid #C0C0C0; }table.third table { /* keep nested tables from having borders */border-width: 0px; }table.fourth {background-color:#aacde9; }h1{font-family:Teen; color:#6600CC; }h2{font-family:Teen; color:#6600CC; }h3{font-family:calibri; color:#6600CC; }h4{font-family:calibri; color: black; }h5{font-family:calibri; color: black; }p.tab { margin-left: 20px; }h3.tab{margin-left: 20px; font-family:calibri; color:#6600CC; font-size; 12px; }h4.tab{margin-left: 20px; font-family:calibri;color: black; font-size; 10px; }ol.a li {font-family:Teen;color:#6600CC; }ol.a ul li {font-family:Calibri;color:black; } Link to comment Share on other sites More sharing options...
marisc88 Posted January 1, 2012 Author Share Posted January 1, 2012 Excellent thank you!! - those changes have sorted my intial list styling problem so thanks very much. Unfortunately the link styling is still an issue in Mozilla but i'm not too fussed with sorted this right now. Quick question though what type of code is: /*.....*/ ? Thanks again Link to comment Share on other sites More sharing options...
dsonesuk Posted January 1, 2012 Share Posted January 1, 2012 for making comments within css, or commenting out css styles. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.