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

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?
Who is Participating?
Tom BeckConnect With a Mentor Commented:
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;
AidenAAuthor Commented:
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?
Tom BeckCommented:
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.
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

AidenAAuthor Commented:
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

AidenAAuthor Commented:
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
Tom BeckCommented:
That was easy, thanks for the points.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.