CSS problem in IE: IE reserves an empty line in ul list where item is hidden. Also, how to add padding in ddl?

Posted on 2011-05-11
Last Modified: 2012-05-11
Two issues... the first is a ul list. I'm using that as a container for radio buttons. However, at some point I want to hide the first two radio buttons (ajax call) in the list, or unhide them. That works fine in firefox. In IE7 it seems to actually reserve the space for those empty items... that is, even though there is nothing there as those two radiobuttons are hidden, there are still two empty lines present where the radio buttons would be. In Firefox it just removes those empty lines. So, what's going on there and how to solve?

Second issue is adding padding or margins to a dropdownlist. I was able to add padding to a label by setting the css to display:inline-block. Doing the same with a dropdownlist though is not working for me?
Question by:AidenA
    LVL 38

    Accepted Solution

    What does the ajax call look like to hide the radio buttons? Does it use display:none or visibility:hidden (or neither) to hide the radio buttons. Visibility:hidden will leave space, display:none will not.

    Padding for drop down list items should be the same as for any block element. Ex. padding:5px;

    Author Comment

    ok that helped me see what i was doing anyway. I had set the radio buttons visibility to false, but obviously IE still renders an empty il. What I needed to do was set the specific il to display:none

    thanks for that. You have any idea about the padding issue? why i wouldn't be able to add padding to a dropdownlist?
    LVL 38

    Expert Comment

    by:Tom Beck
    Some code would help. Are you adding padding to the link inside the list item or to the list item itself? It could make a difference.

    Author Comment

    adding padding to the dropdownlist itself. just trying to create some spacing between itself and the next object below. but i can't add padding to the object below for another reason so i need to add padding to the dropdownlist but it's not working. i could just add an empty div with padding as a spacer, but it would be better if i can just figure out why i can't add padding...

    there's probably too much code to show at the moment... but if i just show the css below maybe you'll have an idea of the issue. I've shown the overall layout first... and then just the content column (where the issue is). In the content column the issue is with ddlPeriodOption where margin-bottom:20px has no effect, and neither does padding.

    /* Layout columns */
    #leftcol {display:inline; float:left; width:30%; height:500px;}
    #content {display:inline; float:left; width:40%; height:500px;}
    #rightcol {float:left; width:30%; height:500px;}
    #header {width:100%; height:20%}
    #footer {clear:both; width:100%; height:20%; text-align:center}
    /* content */
    #divPeriodHeader{width:100%; height:10em; overflow:hidden;} 
    #divChkPeriod{width:100%; padding-top:10.25em; padding-left:1.5em; Font-Size:small;}
    #ulPeriod {display:block; float:left; width:7em; list-style: none; margin-left:1em; border: 0.4em groove;}
    #divPeriodOptions{float:left; width:8em; padding-left:2em;}
    #lblPeriodOptions{display:inline-block; Width:144px; padding-bottom:1em; Font-Size:Small;} 
    #ddlPeriodOption{display:block; Width:20px; margin-bottom:20px;}
    #ulPeriodOptions{display:inline-block; margin: 0; padding:0; list-style: none;}
    #pnlDay{Width:150px; left: 172px;}
    #pnlBiMonthlyCalendar{Width:112px; left: 172px; padding-top:1em; Border:1px;}

    Open in new window


    Author Comment

    sorry don't know why i posted that... must have done it accidentally, i noticed the problem... and it's a silly one unfortunately. name is wrong on the ddl

    ddlPeriodOption just simply say ddlPeriodOptions
    LVL 38

    Expert Comment

    by:Tom Beck
    That was easy, thanks for the points.

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Join & Write a Comment

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now