Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    IE workaround for this...?

    I have a navigation bar i am working on for a website...the link is http://dpserror.com the original code was created by some CSS creator, but i since edited and tweaked it to work how i want (im new to CSS, haven't designed a website in around 10 years)

    works nicely in firefox, but not so in IE, is there a "hack" (yuck) to make this work with IE?, something i just might be missing? here is the code from the navbar:

    Code:
    /*************************************************
    		NAVIGATION
    ***************************************************/
    
    #navbar	{
    	margin:auto;
    	margin-top: 30px;
    	padding: 0px;
    	height: 35px;
    	width: 845px;
    	text-align: center;
    	background-color: #F0E8CE;
    	clear: both;
    	vertical-align: middle;
    }
    
    .nav	{
    	margin: auto;
    	padding:0; 
    	height:35px; 
    	width:auto; 
    	display:block; 
    	background:url('img/topMenuImages.png') repeat-x;
    	text-align: center;
    }
    
    .nav li	{
    	padding:0; 
    	margin: auto; 
    	list-style:none; 
    	display:inline;
    
    	
    }
    
    .nav li a	{
    	float:left;
    	padding-left:20px;
    	display:block; 
    	color:rgb(0,0,0);
    	text-decoration:none; 
    	font:12px Verdana, Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	cursor:pointer;
    	background:url('img/topMenuImages.png') 0px -30px no-repeat;
    	width: auto;
    }
    
    .nav li a span	{
    	line-height:35px; 
    	float:left;
    	display:block;
    	padding-right:20px;
    	background:url('img/topMenuImages.png') 100% -30px no-repeat;
    	width: auto;
    }
    
    .nav li a:hover	{
    	background-position:0px -90px; 
    	color:rgb(255,255,255);
    }
    
    .nav li a:hover span	{
    	background-position:100% -90px;
    }
    
    .nav li a.active, .nav li a.active:hover	{
    	line-height:35px; 
    	font:12px Verdana, Arial, Helvetica, sans-serif; 
    	font-weight: bold; 
    	background:url('img/topMenuImages.png') 0px -90px no-repeat; 
    	color:rgb(255,255,255);
    }
    
    .nav li a.active span, .nav li a.active:hover span	{
    	background:url('img/topMenuImages.png') 100% -90px no-repeat;
    }

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Right from the horses mouth: http://support.microsoft.com/kb/294714

    One possible fix:http://24ways.org/2007/supersleight-...ent-png-in-ie6

    Someone might come along with a better way.

  • Users who have thanked Fisher for this post:

    tefuzz (02-25-2009)

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fisher View Post
    Right from the horses mouth: http://support.microsoft.com/kb/294714

    One possible fix:http://24ways.org/2007/supersleight-...ent-png-in-ie6

    Someone might come along with a better way.
    oh lord, i didnt even think it was a png problem...easy fix then thanks

    EDIT: it is not a PNG problem alone. I changed over to a .gif for a minute to see, but it is the same result. just a small portion of the hover color shows up to the left of the "icon" image. i think it has something to do with IE not being able to position the hover image correctly...any ideas? the icon image itself s only 30x30, but the hover doesnt show at any point beyond it either...
    Last edited by tefuzz; 02-25-2009 at 12:42 PM.

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Try changing these 2 pieces of code:

    CSS:
    Code:
    #navbar	{
    	margin: 0 auto;
    	height: 35px;
    	width: 840px;
    	clear: both;
    	background:#F0E8CE;
    }
    #nav	{
    	padding:0; 
    	height:35px; 
    	text-align: center;
    	display:inline; 
    }
    #nav li, #nav a {
    	height:35px;
    	width:140px;
    	display:inline;
    	float: left;
    	list-style:none;
    }
    #nav a	{
    	color:#000;
    	text-decoration:none; 
    	font:12px Verdana, Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	background:url(topMenuImages.png) 0px 0px no-repeat;
    }
    #nav li a:hover	{
    	background:url(topMenuImages.png) 0 -90px no-repeat;
    	color: #FFF;
    }
    #nav img {
    float:left;
    }
    #nav span {
    float:left;
    margin:5px;
    }
    HTML:
    Code:
    <ul id="nav">
          <li> <a href="http://dpserror.com/index.php?p=home" target="_self"><img src="home.gif" alt="home" width="30" align="top" border="0" height="30" /><span>Home</span></a></li>
          <li><a href="http://dpserror.com/index.php?p=about" target="_self"><img src="about.png" alt="about us" width="30" align="top" border="0" height="30" /><span>About Us</span></a></li>
          <li><a href="http://dpserror.com/index.php?p=students" target="_self"><img src="students.png" alt="students" width="30" align="top" border="0" height="30" /><span>Students</span></a></li>
          <li><a href="http://dpserror.com/index.php?p=tutors" target="_self"><img src="chalk.png" alt="tutors" width="30" align="top" border="0" height="30" /><span>Tutors</span></a></li>
          <li><a href="http://dpserror.com/index.php?p=faq" target="_self"><img src="faq.png" alt="faq" width="30" align="top" border="0" height="30" /><span>FAQ</span></a></li>
          <li><a href="http://dpserror.com/index.php?p=contact" target="_self"><img src="envelope.png" alt="contact us" width="30" align="top" border="0" height="30" /><span>Contact Us</span></a></li>
        </ul>
    Does this achieve what you mean?

    Edit: Unless you plan on changing the picture with something fancier, you don't really need it. You could just use a background colour instead:
    Code:
    background: #6CC;
    instead of
    Code:
    background:url(topMenuImages.png) 0 -90px no-repeat;
    Last edited by Fisher; 02-25-2009 at 02:20 PM.


  •  

    Posting Permissions

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