Results 1 to 2 of 2

Thread: list-style-image problem in IE

  1. #1
    Join Date
    Nov 2007
    Location
    USA
    Posts
    170
    Thanks
    8
    Thanked 22 Times in 22 Posts

    Default list-style-image problem in IE

    Ok so I have a little red check mark I want to use for a bullet on my <li>'s. I've checked it in Mozilla, Safari, and Opera and it works fine in all of those. However, when I test it in IE they show up but as soon as you hover over/off of the navigation links they will disappear. I have the the image being used on 3 pages, and it only bugs out on 2 in IE.

    page it works on in IE:

    http://www.mycorpweb.com/portfolio.htm

    On the Home and About pages is where it has the bug.


    Here is the css file I am using:

    Code:
    html, body
    {
    	height: 100%;
    	width: 100%;
    	margin: 0px;
    	background: url('images/bgtest2.jpg');
    	color: white;
    	font-family: arial;
    }
    
    a
    {
    	color: white;
    }
    
    a:hover
    {
    	font-weight: bold;
    }
    
    div#main
    {
    	width: 550px;
    	margin: 20px auto;
    	background-color: black;
    	-moz-border-radius-topright: 7%;
    	-moz-border-radius-topleft: 7%;
    	border: 1px solid black;
    }
    
    div#nav
    {
    	width: 550px;
    	margin-top: 20px;
    }
    
    div#nav ul
    {
    	list-style-type: none;
    	text-align: center;
    	
    }
    
    div#nav ul li
    {
    	display: block;
    	width: 100px;
    	height: 20px;
    	padding: 0px;
    	margin-left: 10px;
    	margin-right: 5px;
    	float: left;
    	background: url('images/button_tile_off.gif');
    	color: white;
    }
    
    div#nav ul li a
    {
    	text-decoration: none;
    	display: block;
    	width: 100px;
    	padding: 0px;
    	margin: 0px;
    	color: white;
    }
    
    div#nav ul li a:hover
    {
    	font-weight: bold;
    	border-top: 1px solid white;
    	border-left: 1px solid white;
    	border-right: 1px solid white;
    }
    
    div#content
    {
    	clear: left;
    }
    
    div#content h1
    {
    	font-size: 21px;
    	text-align: center;
    	padding: 0px 5px 0px 5px;
    	margin: 0px;
    	height: 30px;
    	background: url('images/heading_tile.gif');
    	font-family: "Comic Sans MS", cursive;
    }
    
    div#content p
    {
    	margin: 15px 15px 15px 15px;
    }
    
    div#content h1 + p
    {
    	text-indent: 25px;
    }
    
    div#content ul
    {
    	width: 200px;
    	margin: 0px auto;
    }
    
    div#content ul li
    {
    	list-style-image: url('images/bullet.gif');
    }
    
    div#footer
    {
    	border-top: 1px dashed white;
    }
    
    div#footer p
    {
    	text-align: center;
    	margin: 5px 5px 5px 5px;
    }
    
    .dropCap
    {
    	font-family: "Comic Sans", serif;
    	font-size: 35px;
    	color: red;
    }
    
    /* FORM STYLES */
    form div
    {
    	width: 400px;
    	margin: 0px auto;
    }
    
    input, textarea, select
    {
    	background-color: black;
    	color: white;
    	border: 1px solid red;
    }
    Thanks in advance.
    What is obvious to you might not be to another.


    My Site

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Here is my solution mate. I can't try it out myself though, but I think it works.
    div#content ul li {
    list-style-position:inside;
    list-style-image:url('images/bullet.gif');
    }

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •