Hoping you can help me with a problem. I cannot get rid of Bullets in Firefox, i don’t want any anywhere, hence my list-style-type: none!important being everywhere. It only appears in Firefox as far as i can tell.
the HTML….
<!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" lang="en" xml:lang="en">
<head>
<title>littleprints.nl</title>
<meta name="description" content="----" />
<meta name="keywords" content="----" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<link rel="stylesheet" href="layout.css"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="container">
<div id="inline1">
<div id="mainpic">
<img src="myimages/circle.jpg" width="100%" alt="Circle bracelet"/>
</div>
<div id="intro">
<p>Hi and welcome to little prints NL. we make this and that all by hand with 100% silver. my name is Donna Burns and i work by commision, ive been studying for 4 years and am currently learning to become a goldsmith.</p>
</div>
</div>
<div id="inline2">
<p>Click for more...</p>
<div id="images">
<a href="myimages/photos/dogtag.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" ><img src="myimages/work/chunky.gif" alt="chunky"/></a>
<a href="myimages/photos/hearts.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" ><img src="myimages/work/hearts.gif" alt="hearts"/></a>
<a href="myimages/photos/close.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" ><img src="myimages/work/close.gif" alt="close"/></a>
<a href="myimages/photos/pearl.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" > </a>
<a href="myimages/photos/flower.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" > </a>
<a href="myimages/photos/frontcircle.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" > </a>
<a href="myimages/photos/dogtag.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" > </a>
</div>
</div>
</div><!--end container-->
<div id="footer">
<div id="footalign">
<div id="social">
<ul>
<li>
<a href="http://www.facebook.com/littleprints" title="Little Prints">
<img src="myimages/facebook.png" width="50px" height="50px" alt="FB"/>
</a>
</li>
<li>
<a href="contact.html" title="contact">
<img src="myimages/at.gif" alt="@"/>
</a>
</li>
</ul>
</div>
<div id="contact">
<p><br/>To enquire about a charm either phone:<br/> 0787463289<br/> or use one of the methods to the side.</p>
</div>
</div>
</div>
</body>
</html>
the CSS…
* {margin: 0; padding: 0; border: 0;}
html, body {
background-color: #000000;image;
text-align: center;
font: 16px/1.8 Verdana, Arial, Helvetica, sans-serif;
list-style-type: none!important;
text-decoration: none;
}
#container {
position: relative;
width: 900px;
top: 0;
min-height: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
background-image: URL(myimages/back2.gif);
margin-bottom: 180px;
}
#footer {
background-color: #555555;
position: relative;
clear: both;
bottom: 0;
width: 900px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding-bottom: 22px;
margin-top: -180px;
}
#inline1{
display: inline-block;
margin-top: 250px;
margin-bottom: 20px;
}
#inline2 {
display: inline-block;
margin-top: 30px;
margin-bottom: 50px;
}
#mainpic {
float: left;
width: 68%;
margin-left: 20px;
}
#intro {
float: right;
width: 20%;
margin-left: auto;
margin-right: 50px;
margin-top: 20px;
}
#images {
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
#footalign {
display: inline;
width:900px;
list-style-type: none;
}
#contact {
text-align: center;
background-color:#555555;
float: middle;
list-style-type: none;
}
#social{
background-color:#555555;
float: right;
list-style: none;
padding:0;
padding-right: 5px;
text-align:center;
list-style-type: none!important;
}
#social img{
border: none;
list-style-type: none!important;
margin: 3px;
}
#social ul{
border: none;
list-style-type: none!important;
}
#social a{
display:inline-block;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
list-style-type: none!important;
}
#social a:hover{
display:inline-block;
-webkit-transform:translate(-10px,0px);
-moz-transform:translate(0px,-10px);
-ms-transform:translate(-10px,0px);
-o-transform:translate(-10px,0px);
transform:translate(-10px,0px);
list-style-type: none!important;
}
#form {
margin-top: 250px;
margin-bottom: 50px;
}
.nav1
{font-family: sans-serif;font-size: 22px;text-shadow: 2px 2px 5px #000000;}
a:link {text-decoration:none; color:#000000; padding:3px;}
a:visited {text-decoration:none; color:#000000;}
a:active {text-decoration:none; color:#555555;}
a:hover {text-decoration:none; color:#555555;}
.nav2
{font-family: sans-serif;font-size: 22px;text-shadow: 2px 2px 5px #ffffff;}
a:link {text-decoration:none; color:#ffffff; padding:3px;}
a:visited {text-decoration:none; color:#ffffff;}
a:active {text-decoration:none; color:#555555;}
a:hover {text-decoration:none; color:#555555;}
.p1 {
color: #ffffff;
}
div#images img {
max-width: 500px;
height: auto;
}
Try:
Just using
list-stylemight simplify it. But anyway, I’m in Firefox, and I didn’t see any bullet points.You might want to try setting up a test case in jsFiddle for us. Just posting code like this is sometimes a needle in a haystack!
http://jsfiddle.net/
Good luck.
PS – Putting
list-styleon the code below makes no sense, since you’re specifying animgtag!UPDATE:
For arguments sake (because I can’t see exactly how your app is working), try setting a global default style for your lists like so:
Also, I know that in some older browsers, setting this on the actual li itself also helps (I could be wrong though):