SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    May 2005
    Location
    Kansas City, Mo.
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 6 and 7 menu issue

    I have a menu that works fine in most browsers. It does some funny stuff in IE6 and IE7. I've tried some things with the CSS in firebug but i'm just not seeing the issue. Could someone help me figure out why it seems to step down as the menu goes right in these 2 IE versions?

    menu page here



    CSS
    Code:
    html, body {
        padding: 0px;
        margin: 0px;
    	background-image: url(images/entire_background.jpg);
    	background-repeat: repeat-x;
    	background-color: #536a3a;
    	font-family: Veranda, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #c8c8c8;
    }
    
    div#container {
        width: 960px;
        margin: 0 auto;
    }
    
    div#headerTitle {
        height: 198px;
    	width: 598px;
    	margin: 0px 0px 0px 0px;
    	background-image: url(images/RLW_.jpg);
        background-repeat: no-repeat;
        background-position: 0 0;
    }
    
    div#header {
        height: 198px;
    	background-image: url(images/header_background.jpg);
        background-repeat: repeat-x;
        background-position: 0 0;
    }
    
    
    #navigation ul {
      width: 697px;
      height: 90px;
      margin-top: 2px;
      margin-left: 288px;
      list-style-type: none;
    }
    
    .nav-links li a {
      float: left;
      width: 76px;
      height: 62px;
      margin: 0px 10px 0px 10px;
    }
    .nav-links li a:hover {
      background-repeat: no-repeat;
      background-position: center bottom;
    }
    
    
    
    /*********************BEGINNING OF BUTTONS********************/
    .GroupHome {
    	height: 60px;
    	width: 76px;
    	background-image: url(images/home_button.jpg);
    	background-repeat: no-repeat;
    }
    .GroupAbout {
    	height: 60px;
    	width: 76px;
    	background-image: url(images/about_button.jpg);
    	background-repeat: no-repeat;
    }
    .GroupServices {
    	height: 60px;
    	width: 78px;
    	margin-left: 12px;
    	background-image: url(images/service_button2.jpg);
    	background-repeat: no-repeat;
    }
    
    .GroupPortfolio {
    	height: 60px;
    	width: 76px;
    	margin-left: 10px;
    	background-image: url(images/portfolio_button2.jpg);
    	background-repeat: no-repeat;
    }
    
    .GroupContact {
    	height: 60px;
    	width: 76px;
    	margin-left: 9px;
    	background-image: url(images/contact_button2.jpg);
    	background-repeat: no-repeat;
    }
    
    .GroupBlog {
    	height: 60px;
    	width: 76px;
    	background-image: url(images/blog_button2.jpg);
    	background-repeat: no-repeat;
    }
    
    .GroupLinks {
    	height: 60px;
    	width: 76px;
    	background-image: url(images/links_button2.jpg);
    	background-repeat: no-repeat;
    }
    /************************end of regular buttons**********************/
    
    /*************************************** BUTTONS ***********************************/
    
    .GroupHome:hover {  /*color change for a hover over anything with a group class*/
    	height: 60px;
    	width: 76px;
    	background-image: url(images/home_button_hover.jpg);
    }
    
    .GroupAbout:hover {  /*color change for a hover over anything with a group class*/
    	height: 60px;
    	width: 76px;
    	background-image: url(images/about_button_hover.jpg);
    }
    
    .GroupServices:hover {  /*color change for a hover over anything with a group class*/
    	height: 60px;
    	width: 76px;
    	margin-left: 10px;
    	background-image: url(images/service_button_hover2.jpg);
    }
    .GroupPortfolio:hover {  /*color change for a hover over anything with a group class*/
    	height: 60px;
    	width: 76px;
    	margin-left: 10px;
    	background-image: url(images/portfolio_button_hover2.png);
    }
    .GroupContact:hover {  /*color change for a hover over anything with a group class*/
    	height: 60px;
    	width: 76px;
    	margin-left: 10px;
    	background-image: url(images/contact_button_hover2.jpg);
    }
    .GroupBlog:hover {  /*color change for a hover over anything with a group class*/
    	height: 60px;
    	width: 76px;
    	background-image: url(images/blog_button_hover2.jpg);
    }
    
    .GroupLinks:hover {  /*color change for a hover over anything with a group class*/
    	height: 60px;
    	width: 76px;
    	background-image: url(images/links_button_hover2.jpg);
    }
    /**********************************End of Regualer Buttons*******************************/
    HTML
    HTML Code:
    <body>
    
    
    <div id="container">
    
    <div id="header">
        	<div id="headerTitle">
            </div>
            
            <!--NAVIGATION STARTS-->
        	<div id="navigation">
                <ul class="nav-links">
                  <li><a href="index.html" title="home" class="GroupHome"></a></li>
                  <li><a href="about.html" title="about" class="GroupAbout"></a></li>
                  <li><a href="services.html" title="services" class="GroupServices"></a></li>
                  <li><a href="portfolio.html" title="portfolio" class="GroupPortfolio"></a></li>
                  <li><a href="contact.html" title="contact" class="GroupContact"></a></li>
                  <li><a href="blog.html" title="blog" class="GroupBlog"></a></li>
                  <li><a href="links.html" title="links" class="GroupLinks"></a></li>
                  <!--<li class="borderx2"><a href="#" title="contact">contact</a></li>-->
                </ul>
      		</div>
        <!--NAVIGATION ENDS-->
        
        </div>
        
    </div>
    
    
    </body>
    Thanks
    Bob W.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,602
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, this is called the staircase bug. Yoiu float hte anchor, however, IE7 and down need the <li> either display:inline or floated.
    Floating the <li> should work nicely
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Zealot
    Join Date
    May 2005
    Location
    Kansas City, Mo.
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan Thanks For the Quick Reply!! That was it.

    For others that may run into this issue I used this link after Ryan replying.
    Thanks
    Bob W.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,602
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked .
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!


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
  •