Web Analytics Made Easy -
StatCounter IE7 & extra space in li with block display - CodingForum

Announcement

Collapse
No announcement yet.

IE7 & extra space in li with block display

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • IE7 & extra space in li with block display

    I'm doing a navigation bar with css and for some reason on my bar when I add display block to the link in the list item when hovered over, in IE7 it adds extra spacing below the list item. I do the display block so that the link spreads the width of the list item. Here is the css:

    Code:
    #navbar li:hover a {
    	color:#000;
    	display:block;
    }
    Any thoughts on what I'm doing wrong.

  • #2
    if you have display:block; in the non hover nav bar, you do not need it in the [ICODE]a:hover[ICODE]. try removing that and see what happens, if you don't have display block in your #navbar li a{ } then i am not sure what your are asking...a like would be helpful
    Free PSD to XHTML/CSS conversion - Dimby.net
    Which doctype should I use?

    Comment


    • #3
      I've also added it to the non-hover #navbar li a {, but it adds the extra space to all of the list items, not just the one being hovered over.

      Comment


      • #4
        now add, padding: 0; to both of them
        Free PSD to XHTML/CSS conversion - Dimby.net
        Which doctype should I use?

        Comment


        • #5
          That still doesn't do it. Here is a link to the navigation menu:

          http://www.marsdenfamily.us/test/sidebar.html

          Thanks for your help.
          Last edited by amars1983; Apr 14, 2009, 11:26 PM.

          Comment


          • #6
            set the styles to li {margin:0;}

            and actually your missing something.. you should do your styles properly..

            when you do it like <li><a>link</a></li>

            you could easily just..

            Code:
            li a{display:block;
                  width:100px;
                   height:20px;
                   background:#333;
                   color:#FFF;
                   text-decoration:none;
                  }
            
            li a:hover{display:block;
                  width:100px;
                   height:20px;
                   background:#333;
                   color:#FFF;
                   text-decoration:underline;
                  }
            so in this sense.. it will not be bugging on whatever ie your working on.. i know that li:hover works on ie7 and up.. and other browsers.. but not ie6

            just my two cents
            My Personal and Portoflio - AndrewFopalan.com

            Comment


            • #7
              Hi there,

              It's the known hasLayout issue of IE and the following would fix it.

              Code:
              #navbar li a{
              	text-decoration:none;
              	color:#FFF;
              	display:block;
              	padding:0px;
              	[ICODE]height:1%;[/ICODE]
              }
              You'd need to add
              Code:
              *{
              margin:0;
              padding:0;
              }
              into your CSS and then need to edit/remove the following properties
              Code:
              #navbar {
              	[ICODE]/*margin-top:-12px;*/[/ICODE]
              	list-style:none;
              }
              #navbar li{
              	background:#000;
              	padding:5px;
              	width:135px;
              	[ICODE]/*margin-left:-40px;*/[/ICODE]
              	border-bottom:1px solid #FFF;
              }
              Last edited by abduraooft; Apr 15, 2009, 03:27 AM.
              Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

              Comment


              • #8
                Thank you so much. The 1% height worked perfectly. My negative margins were for positioning on the page the navigation menu is on. Thanks for you help.

                Comment

                Working...
                X