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
    Regular Coder
    Join Date
    Nov 2010
    Posts
    394
    Thanks
    48
    Thanked 1 Time in 1 Post

    Cannot set the UL/LI styles for #searchby

    Hello,

    I want a basic list for this container. If you click the drop down int he search field, you will be able to see what the problem is.

    Link: https://tornhq.com/Top_Menu/Index-New.html

    Best Regards,
    Tim

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello MrTIMarshall,
    you have a height of 200px on that, it's just not enough. Remove the height entirely and .wrap will expand to contain what's in it.
    Code:
    #TopMenu #searchby .wrap {
        float: left;
        height: 200px;
        margin: 10px;
        width: 80px;
    }
    Once you've removed the bit highlighted above in red, you'll notice there is still a problem.
    The 61px height you have on the ul doesn't make sense. Look what happens when you also remove this bit highlighted in red -
    Code:
    #TopMenu .LeftSide ul, #TopMenu .RightSide ul {
        float: left;
        height: 61px;
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    It's always best to really consider if an element actually needs a height. Usually it does not.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    MrTIMarshall (03-14-2013)

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    394
    Thanks
    48
    Thanked 1 Time in 1 Post
    Thank you for your reply.

    I believe the problem is here;
    Code:
    		#TopMenu .LeftSide li, #TopMenu .RightSide li {
    			float: left;
    			margin: 0 5px;
    			padding: 10px;
    			width:auto;
    		}
    I was wanting to set different styling for here but I cannot seem to set them due to the #TopMenu .LeftSide li, #TopMenu .RightSide li being set and others alike this, I cannot seem to do #TopMenu #searchby .wrap ul......

    ....I just typed the above to reply and whilst doing do I changed the above '#TopMenu #searchby .wrap ul' to 'li' instead of 'ul' and what do you know... it works!

    I am very grateful for your response Excavator, I've been having trouble all day and you've been my only help on this board and the Javascript board!

  • #4
    Regular Coder
    Join Date
    Nov 2010
    Posts
    394
    Thanks
    48
    Thanked 1 Time in 1 Post
    Actually that didn't work, I just thought it did at first. I removed the height on the li's and thought that fixed it, however it adds a space at the bottom of the nav bar actives...


  •  

    Posting Permissions

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