[Last Call] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 330
  • Last Modified:

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?
  • 3
  • 3
1 Solution
Tom BeckCommented:
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.

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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.

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now