Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    I am working on this layout and I am almost done (it's perfect in FF) but in IE I can't make the top navigation work the way I want it to. The problem is that the list-style-image is not displayed. Here is the abstcract of my code that concerns the issue:
    Code:
    <div class="navcontainer">
            <ul class="navlist">
                <li class="menu"><a href="#" class="active">HOME</a></li>
                <li class="menu"><a href="#">STLSTORE</a></li>
                <li class="menu"><a href="#">AUDIO-VIDEO-DOCS</a></li>
                <li class="menu"><a href="#">SPREAD THE WORD</a></li>
                <li class="menu"><a href="#">LETTERS &amp; COMMENTARY</a></li>
                <li class="menu"><a href="#">CONTACT US</a><img class="last" src="http://i.data.bg/06/09/30/80794_orig.jpg" alt="" /></li>
            </ul>
         </div>
    Code:
    .navcontainer
    {
        margin-top:-15px;
        margin-left:60px;
    }
    .navcontainer ul
    {
        font:bold 9pt arial, helvetica, sans-serif;
        padding:12px 0px 12px 0px;
        list-style-type:none;
        color:red;
        width:100%;
    }
    li.menu
    { 
        list-style-image:url('http://i.data.bg/06/09/30/80794_orig.jpg');
        float:left;
        margin-right:15px;
        padding-right:15px;
        padding-left:15px; 
    }
    li.menu a
    {
        text-decoration:none;
        color:#ec6161;
    }
    li.menu a:hover
    {
        color:#f7bf52;
    }
    img.last
    {
        margin-left:20px;
    }
    It's a really simple menu but I just can't figure it out and oddly enough, it is displayed as it should be when I remove the float:left and leave the menu vertical.
    I am clueless and I would really appreciate any help from you guys because I am pressed with time.

    Kindest regards,
    Valentin

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Try setting the property on the ul instead of the li.

  4. #3
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    I've tried this but it wouldn't work either. I found a way around it- instead of trying to do the list-style-image thing, I simply placed the image before each li. It's way not the best solutions but it works and that is what I want for now.
    Though, if anyone can come up with an idea for the list-style-image thing, I would be grateful.

  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Put the image as a background to the li

    This is how I usually do it

    Code:
    ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    li {
    	margin: 0 0 3px 8px;
    	padding: 0 0 0 12px;
    	line-height: 15px;
    	background: url(arrow.gif) no-repeat 0 5px;
    }
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:07 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com