olking Posted March 23, 2007 Share Posted March 23, 2007 I have an unordered list and am trying to apply markers to it.The code I am using is as follows:In the head:-ul.list{position:absolute;left:100px;width:100%;padding:0;margin:0;list-style-type:disc;font: 900 15px arial;color:#996600;}Then in the body:-<ul class="list"> <li> Road accidents</li><br> <li> Habitat destruction - urban development</li><br> <li> Dog and cat attacks - be responsible with your pets</li><br> <li> Disease - adverse weather conditions</li><br> <li> Flying into windows</li><br> <li> Poisons in the environment -many household substances are toxic to wildlife eg. fly spray, herbicides</li></ul>I get the list as I expected except there are no disc markers.I have tried it without the position absolute, but that is no good either.Can anyone help me with this? help.htm Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 23, 2007 Share Posted March 23, 2007 I think you should apply the style to the List item - li.list{position:absolute;left:100px;width:100%;padding:0;margin:0;list-style-type:disc;font: 900 15px arial;color:#996600;} Then in the body:- <ul><li class="list"> Road accidents</li><br><li class="list"> Habitat destruction - urban development</li><br><li class="list"> Dog and cat attacks - be responsible with your pets</li><br><li class="list"> Disease - adverse weather conditions</li><br><li class="list"> Flying into windows</li><br><li class="list"> Poisons in the environment -many household substances are toxic to wildlifeeg. fly spray, herbicides</li></ul> Link to comment Share on other sites More sharing options...
olking Posted March 23, 2007 Author Share Posted March 23, 2007 I think you should apply the style to the List item - li.list{position:absolute;left:100px;width:100%;padding:0;margin:0;list-style-type:disc;font: 900 15px arial;color:#996600;} Then in the body:- <ul><li class="list"> Road accidents</li><br><li class="list"> Habitat destruction - urban development</li><br><li class="list"> Dog and cat attacks - be responsible with your pets</li><br><li class="list"> Disease - adverse weather conditions</li><br><li class="list"> Flying into windows</li><br><li class="list"> Poisons in the environment -many household substances are toxic to wildlifeeg. fly spray, herbicides</li></ul> Thank you for your suggestion, but I have tried it and am sorry to say that it doesn't work Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 23, 2007 Share Posted March 23, 2007 Put all this inside a <DIV> and change its style through CSS! Link to comment Share on other sites More sharing options...
olking Posted March 23, 2007 Author Share Posted March 23, 2007 Put all this inside a <DIV> and change its style through CSS! Link to comment Share on other sites More sharing options...
PrateekSaxena Posted March 23, 2007 Share Posted March 23, 2007 You just quoted me...does that mean it worked :-/ Link to comment Share on other sites More sharing options...
olking Posted March 23, 2007 Author Share Posted March 23, 2007 did you mean like this :div.list{position:absolute;left:100px;width:100%;padding:0;margin:0;list-style-type:disc;font: 900 15px arial;color:#996600;}and in body:<div class="list"><ul><li> Road accidents</li><br><li> Habitat destruction - urban development</li><br><li> Dog and cat attacks - be responsible with your pets</li><br><li> Disease - adverse weather conditions</li><br><li> Flying into windows</li><br><li> Poisons in the environment -many household substances are toxic to wildlifeeg. fly spray, herbicides</li></ul></div>I tried that and still no luck.I am very much a newbie in css one very strange thing.I am writing in dreamweaver and the markers show up ok in the wysiwyg but when I view them in firefox or ie6 they dont show Link to comment Share on other sites More sharing options...
jlhaslip Posted March 23, 2007 Share Posted March 23, 2007 You needed to be more specific in your use of the styling and I reordered some stuff. The <a> styles are above the li styles now. I think maybe they were overriding the li styles.And I removed the <br />'s from the list. Use padding or margins to space them apart instead. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>North Queensland Wildlife Care Home Page</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">body{ background: url('images/logo.gif') no-repeat fixed 750px 80px;}p { font-family: arial; }li.menu{display:inline} a{float:left;width:11em;text-decoration:none;color:#996600;background-color:white;padding:0.2em 0.6em;border-right:1px solid white;}a:hover{background-color:whitetext-decoration:none;color:#333300;}ul.menu{float:left;width:100%;padding:0;margin:0;list-style-type:none;font: italic small-caps 900 15px arial}ul.list{position:absolute;left:100px;width:100%;padding:0;margin:0;list-style-type:disc;font: 900 15px arial;color:#996600;}</style></head><body><ul class="menu"> <li> <div align="center"><a href="index.htm">Home</a></div> </li> <li> <div align="center"><a href="help.htm">Help for animals</a></div> </li> <li> <div align="center"><a href="contact.htm">Contact us</a></div> </li> <li> <div align="center"><a href="links.htm">Other wildlife sites</a></div> </li> <li> <div align="center"><a href="query.htm">Submit questions</a></div> </li></ul><p> </p><p> </p><p> </p><p> <font size="4" color="#996600">Why do native animals come into care?</font></p><br><ul class="list"> <li> Road accidents</li> <li> Habitat destruction - urban development</li> <li> Dog and cat attacks - be responsible with your pets</li> <li> Disease - adverse weather conditions</li> <li> Flying into windows</li> <li> Poisons in the environment -many household substances are toxic to wildlife eg. fly spray, herbicides</li></ul></body></html> Link to comment Share on other sites More sharing options...
olking Posted March 23, 2007 Author Share Posted March 23, 2007 jhaslip,Thankyou very much.this has done the trick.I will have to look at precedence in css in the future.PrateekThank you also for your interest.Olking Link to comment Share on other sites More sharing options...
jlhaslip Posted March 23, 2007 Share Posted March 23, 2007 Precedence is determined by the Cascade (they call them Cascading Style Sheets for a reason) and the "weight" of a selector.It is a bit technical, but here is a link you should read a couple of times. It discusses how selectors can over-ride or be over-ridden by being "more specific" with your element selectors. Example, when does a class help or hinder a selection...http://www.w3.org/TR/CSS21/cascade.html#cascade Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now