Jump to content

Can't Remove Text Decoration From List Element


jsmith1981

Recommended Posts

I am having problems getting my head around what I have done here to cause this, but basically I want say a list of links to appear at the bottom of my site (above a static element at the bottom) but there's a snag, no matter how hard I try can't remove the bullet point from even one list (li) element. When I try with this CSS logic:

 

/*
Theme Name: Sweet Sparkle Hampers
Author: Jeremy Smith
*/
* {
 padding: 0;
 margin: 0;
}
body {
 font-family:Verdana, Geneva, sans-serif;
color: #000;
 background: #f784a5;
}
h1 {
font-size: 1.8em;
 color: #f784a5;
}
h2 {
font-size: 1em;	
}
a {
	text-decoration:none;
}
#banner-menu {
display: block;
position: fixed;
width: 100%;
z-index: 999;
background: #000;
padding: 5px 0px 5px 0px;
font-size: 0.9em;
}
#banner-menu .user-nav {
 margin-right: 20px;
}
#banner-menu .user-nav li {
 list-style: none;
 padding: 0 15px 0 0;
 display:inline;
 float:right;
}
#banner-menu .user-nav li a {
 color: white;
}
#banner-menu .user-nav .user-register {	
 float: left;
 color: red;
 padding-left: 20px;
}
#banner-menu .user-nav .user-register a {
 color: red;
}
#page {
 background: #fff;
 position:relative;
 top: 40px;
 /*  margin: 0 60px 0 60px; */
 margin: auto;
 width: 970px;	
 height: 680px;
 padding: 25px 25px 15px 25px; /* REMEMBER ITS: */
/* border: 1px solid #000; /* used for guidance only! */

}
#heading {
display:inline;
}
#heading h1 {
text-transform: uppercase;
padding-bottom: 5px;
}
#heading h2 {
	padding-bottom: 45px;
}
#products-banner {
height: 400px;
text-align:center;
 margin-bottom: 70px;
}
#products-banner img {
/* try to remove padding within images but not really to worry */
padding: 0;
margin: 0;
}
h3#home-message {
 text-align:center;
 color: red;
 text-transform: uppercase;
 padding-top: 20px;
 padding-bottom: 20px;
}
h3#home-message a:visited {
 /* NOTHING AS YET */  
 color: red;
}
h3#home-message a:hover {
 /* NOTHING AS YET just the same colour */  
 color: red;
}

.footer {
 /* nothing as yet */
 background: #cccccc;
 width: 910px;
 margin: auto;
 padding-top: 20px;
 padding-bottom: 20px;
}
.footer ul li {
 text-decoration: none;
}

/* now for the footer: */
#site-footer {
display: block;
position: fixed;
width: 100%;
z-index: 999;
background: #000;
padding: 5px 0px 5px 0px;
font-size: 0.9em;
bottom: 0;
}
#site-footer p#author {
color: white;
float: right;
padding-right: 35px;
}
#site-footer p#author a {
color: white;
text-decoration: none;
}
#site-footer p#author a:link {
color: white;
text-decoration: none;
}
#site-footer p#author a:hover {
color: white;
text-decoration: none;
}
#site-footer p#author a:visited {
color: white;
text-decoration: none;
}

(sorry it is rather a long one)

 

Then with this markup:

<!DOCTYPE html>
<html lang="en-US">
 <head>
   <!-- META TAGS -->
 <meta charset="UTF-8" />
 <!-- END META TAGS -->

 <!-- TITLE START -->
 <title>Sweet Sparkle Hampers & Wedding Hire | Sweet Sparkle Hampers makes gift hampers for all occasions</title>
 <!-- TITLE END -->
   <link rel="stylesheet" href="http://www.sweetsparklehampers.com/wp-content/themes/sweetsparkle/style.css">
   <!--[if lt IE 9]>
     <script src="http://www.sweetsparklehampers.com/wp-content/themes/sweetsparkle/js/htmlshiv.js"></script>
   <![endif]-->
   <meta name="description" content="Sweet Sparkle Hampers make gift hampers for all occasions from birthdays to new baby there is something for everyone to suit all budgets. We also hire out table centre pieces for your special day as well as favours"> 
   <meta name="keywords" content="hamper gifts, hampers, all occasions birthdays to new baby babies, hiring centre pieces, special day">
   <meta name="author" content="Jeremy Smith | Web Services Consultancy, Harrogate, UK (jeremysmith.me.uk)">
 </head>
 <body>

   <!-- STATIC TOP MENU FOR  USER -->
   <div id="banner-menu">
     <ul class="user-nav">
       <li><a href="#">Checkout</a></li>
       <li><a href="#">Basket</a></li>
       <li><a href="#">Wishlist</a></li>
       <li><a href="#">My Account</a></li>
       <li class="user-register"><a href="#">Login|Register</a></li>
     </ul>
   </div>     
   <!-- END OF STATIC TOP MENU FOR  USER -->

   <div id="page">


     <!-- PAGE TITLE & DESCRIPTION -->
     <div id="heading">
       <h1>Sweet Sparkle Hampers & Wedding Hire</h1>
			<h2>Sweet Sparkle Hampers makes gift hampers for all occasions</h2>
     </div>
     <!-- END PAGE TITLE & DESCRIPTION -->


   <div id="products-banner">

 <img src="http://www.sweetsparklehampers.com/wp-content/uploads/2013/11/1004544_642654019088856_612530407_n-banner.jpg" alt="">
<img src="http://www.sweetsparklehampers.com/wp-content/uploads/2013/11/998315_639162619437996_1265361729_n-banner.jpg" alt="">
<img src="http://www.sweetsparklehampers.com/wp-content/uploads/2013/11/482414_642649705755954_1533956264_n-banner.jpg" alt="">

<h3 id="home-message" title="Shop Coming Soon"><a href="">Shop Coming Soon</a></h3>  
</div>

<footer>
 <ul>
 <li>Link 1</li>
 </ul>
</footer>

   </div>

   <!-- author info banner -->

   <div id="site-footer">
     <p id="author">Design & Theme (Sweet Sparkle) by <a href="http://jeremysmith.me.uk/">Jeremy Smith</a> | CMS Provided by <a href="http://wordpress.org/" target="_blank">wordpress.org</a></p>
   </div>

   <!-- end author info banner -->

 <!-- END OF PAGE -->
 </body>
</html>

 

The bullet point just stays there it's this point that I mean:

<div class="footer">
 <ul>
 <li>Link 1</li>
 </ul>
</div>

 

With this added CSS:

.footer {
 /* nothing as yet */
 background: #cccccc;
 width: 910px;
 margin: auto;
 padding-top: 20px;
 padding-bottom: 20px;
}
.footer ul li {
 text-decoration: none;
}

 

Though when I turn Compat mode on in IE10 it works, not sure what I have done wrong here, there's obviously a conflict. Any help's massively appreciated.

 

Thanks,

Jeremy.

Edited by Jeremy
Link to comment
Share on other sites

using the html5 way of coding and using <footer> vs. the former <div class(or id)="footer"> your CSS needs to address just footer -- not .(for class which you don't have)footer --- in plain - No Period in front of the footer.

Link to comment
Share on other sites

using the html5 way of coding and using <footer> vs. the former <div class(or id)="footer"> your CSS needs to address just footer -- not .(for class which you don't have)footer --- in plain - No Period in front of the footer.

 

I did already do that, must have got confused with editing (got allot of things on at the moment), but it's still not working even when I address that problem (why it worked in compat mode in IE10).

 

Please see attached.

post-39130-049513000 1385434181_thumb.png

Link to comment
Share on other sites

well DUH (this is for me, not you) --- bullets are removed via list-style-type: none. The text-docoration: none is for the underline.

 

No no you're quite alright haha thank you sooo much for your help, I can't tell you how much I appreciate that response.

 

I thought I put that in further up, funny eh? Oh well I will defo try that, I thought it'd make more sense if I just copied in a screendump of what I was having problems with because I clearly confused myself haha with yea what you mentioned before haha.

 

Thanks ever so much again, I am going to definitely post your great reply to my private servers blog (one that's not available on the Internet as all the ports are blocked), you're great thank you thank you thank you.

 

All the best,

Jeremy.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...