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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Help with CSS in IE7

    Hi all! I'm new, both to the forum and to coding in general. I'm learning as I go from making mistakes (and I'm sure I'll make a lot!) and asking for help when I need it:

    I'm coding a website for a local charity and I've made a drop down menu by adapting a tutorial I found online. Only thing is, it says it should work in ie7 but it doesn't, the drop down menus aren't displaying where they should be. Can anyone help?

    http://www.youthenterprise.co.uk/you.../template.html

    Here is my Nav bar CSS code for my ie7 stylesheet:
    #nav {
    background: url(images/navbkg.gif) 0 0 repeat-x;
    height: 40px;
    margin-top: 30px;
    }

    #nav ul {
    width: 960px;
    list-style: none;
    margin: 0 auto;
    padding-top: 10px;
    }

    #nav ul li {
    float: left;
    list-style: none;
    padding-bottom: 10px;
    padding-right: 5px;
    }

    #nav ul li a{
    font-family:"Arial Black", Gadget, sans-serif;
    font-size: 14px;
    color: #000;
    text-decoration:none;
    padding-left: -17px;
    margin-left: 17px;

    }

    #nav ul li a:hover {
    background:url(images/navactive.gif) 0px 4px no-repeat;
    padding-left: -10px;
    margin-left: 10px;
    }

    #nav li ul {
    display: none;
    width: 310px; /* Width to help Opera out */
    background-color: #fff;}

    #nav ul li:hover ul {
    display: block;
    position: fixed;
    top: 10px;
    border: double #6def58;
    margin: 0;
    padding: 0;
    }

    #nav li:hover li, #navbar li.hover li {
    float: none;
    }

    #nav li:hover li a, #navbar li.hover li a{
    width: 290px;
    color: #000;
    display: block;
    font-family:"Arial Black", Gadget, sans-serif;
    font-size: 14px;
    text-decoration:none;
    padding-left: -17px;
    margin-left: 17px;
    }

    #nav li:hover li a:hover{
    background:url(images/navactive.gif) 0px 4px no-repeat;
    padding-left: -10px;
    margin-left: 10px;
    }
    I'm sure you can tell, the menu should be below the original hovered menu item. Any help you guys can give me would be greatly appreciated!

    Thanks
    Nic

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You don't need to use a separate CSS to target ie7 in this case.
    Remove that <link> to ie7.css and then make the following changes to style.css

    Code:
    #nav ul li {
    	float: left;
    	padding-right: 23px;
    	list-style: none;
    	padding-bottom: 10px;
    	position:relative;
    }
    #nav ul li:hover ul {
    	display: block;
    	position: absolute;
    	border: double #6def58;
    	margin-top: 7.5px;
    	padding-top: 5px;
    	padding-bottom: -10px;
    	left:0;
    	top:.8em;
    	z-index:10;
    	}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you so much they're in the right place now! I just need to fix the arrows again now , I think it's because I fixed them in the ie7 stylesheet but I'm sure I can figure that out on my own, thanks so much again for your help


  •  

    Posting Permissions

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