do not use height LI will be block already
the child element label and input will be float left with proper width and margin. you have clear the LI for that you have to use clearfix css in li like this "<li class="clearfix"></li>. for label give margin-top:8px approx and and input don't need any margin or padding. If you need any space apply padding for LI and and need space between to LI apply margin bottom or margin top as per your requirement. now you output looks good.. jst label alignment now proper.. On Tue, Nov 2, 2010 at 4:15 PM, Siva Jayaprakash <[email protected]>wrote: > margin-bottom? Here i attached the SS.. Check it and let me know. > > thanks, > Siva > > > On Tue, Nov 2, 2010 at 3:38 PM, Jesudas Nadar <[email protected]> wrote: > >> give margin bottom for LI >> >> >> >> >> On Tue, Nov 2, 2010 at 3:59 PM, Siva Jayaprakash <[email protected]>wrote: >> >>> The bottom-padding is not wroking.. other than that it is seems to be >>> good.. >>> >>> thanks, >>> Siva >>> >>> >>> On Tue, Nov 2, 2010 at 3:10 PM, Jesudas Nadar <[email protected]>wrote: >>> >>>> try this >>>> >>>> >>>> <style> >>>> #signup_form ul { margin:0 0 0 0; padding:0; } >>>> #signup_form li {list-style-type:none;margin:0; padding:15px 10px 15px >>>> 10px; background:#e0dcdc url("../images/borderBg.png") repeat-x bottom; } >>>> #signup_form li.title { background:#f5f2f2 >>>> url("../images/borderBg.png") repeat-x bottom;} >>>> #signup_form li label { float:left; width:180px; text-align:right; >>>> font-weight:bold; font-size:13px; margin:0px 0 0 0; } >>>> #signup_form li input {float:left; width:380px; margin:0 0 0 10px; >>>> height:26px; background:url("../images/inputBg.png") repeat-x top; >>>> border:1px solid #b1aeae; } >>>> .clearfix:after { >>>> clear:both; >>>> content:'.'; >>>> display:block; >>>> visibility:hidden; >>>> height:0; >>>> } >>>> .clearfix { >>>> display:block; >>>> } >>>> >>>> </style> >>>> >>>> <ul id="signup_form"> >>>> <li class="clearfix"> >>>> <label>fsdfds</label><input type="text" /> >>>> </li> >>>> <li class="clearfix"> >>>> <label>fsdfds</label><input type="text" /> >>>> </li> >>>> <li class="clearfix"> >>>> <label>fsdfds</label><input type="text" /> >>>> </li> >>>> >>>> </ul> >>>> >>>> >>>> >>>> Jesudas Nadar >>>> Front End Devloper >>>> >>>> Tel : +91 22 6528 0130 >>>> Mobile : +91 9833 7660 70 >>>> Email : [email protected] >>>> [email protected] | www.jesudas.me >>>> >>>> >>>> >>>> On Tue, Nov 2, 2010 at 3:24 PM, Siva Jayaprakash >>>> <[email protected]>wrote: >>>> >>>>> here is ma code: >>>>> >>>>> #signup_form ul { margin:0 0 0 0; padding:0; list-style:none;} >>>>> #signup_form li { float:none; margin:0; padding:15px 10px 15px 10px; >>>>> background:#e0dcdc url("../images/borderBg.png") repeat-x bottom; >>>>> overflow:hidden; } >>>>> #signup_form li.title { background:#f5f2f2 >>>>> url("../images/borderBg.png") repeat-x bottom;} >>>>> #signup_form li label { float:left; width:180px; text-align:right; >>>>> font-weight:bold; font-size:13px; margin:8px 0 0 0; } >>>>> #signup_form li input {float:left; width:380px; margin:0 0 0 10px; >>>>> height:26px; background:url("../images/inputBg.png") repeat-x top; >>>>> border:1px solid #b1aeae; } >>>>> >>>>> ------ >>>>> Siva >>>>> >>>>> On Tue, Nov 2, 2010 at 2:33 PM, Jesudas Nadar <[email protected]>wrote: >>>>> >>>>>> if you can so me code i can fix if you wish. >>>>>> >>>>>> Jesudas Nadar >>>>>> Front End Devloper >>>>>> >>>>>> Tel : +91 22 6528 0130 >>>>>> Mobile : +91 9833 7660 70 >>>>>> Email : [email protected] >>>>>> [email protected] | www.jesudas.me >>>>>> >>>>>> >>>>>> >>>>>> On Tue, Nov 2, 2010 at 2:59 PM, Siva Jayaprakash < >>>>>> [email protected]> wrote: >>>>>> >>>>>>> Hi, >>>>>>> Thanks for help. But the margin value is 0 now. >>>>>>> >>>>>>> ------ >>>>>>> Siva >>>>>>> >>>>>>> >>>>>>> On Tue, Nov 2, 2010 at 1:49 PM, Jesudas Nadar >>>>>>> <[email protected]>wrote: >>>>>>> >>>>>>>> Hi shiva, >>>>>>>> >>>>>>>> >>>>>>>> You Li have margin >>>>>>>> >>>>>>>> just reset you LI margin 0 or margin-bottom:0; >>>>>>>> >>>>>>>> regards, >>>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> Jesudas Nadar >>>>>>>> Front End Devloper >>>>>>>> >>>>>>>> Tel : +91 22 6528 0130 >>>>>>>> Mobile : +91 9833 7660 70 >>>>>>>> Email : [email protected] >>>>>>>> [email protected] | www.jesudas.me >>>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> On Tue, Nov 2, 2010 at 2:10 PM, Siva Jayaprakash < >>>>>>>> [email protected]> wrote: >>>>>>>> >>>>>>>>> Hi friends, >>>>>>>>> >>>>>>>>> I have a problem with <li> tag in IE7. All modern browsers >>>>>>>>> supprt my code except IE7 and lower. There is some strange gap >>>>>>>>> between the >>>>>>>>> LI tags. Here i attached the Screen shot. Please check with the SS >>>>>>>>> and let >>>>>>>>> me know the solution. >>>>>>>>> >>>>>>>>> thanks in advance, >>>>>>>>> Siva >>>>>>>>> >>>>>>>>> -- >>>>>>>>> -- >>>>>>>>> You received this because you are subscribed to the "Design the Web >>>>>>>>> with CSS" at Google groups. >>>>>>>>> To post: [email protected] >>>>>>>>> To unsubscribe: [email protected] >>>>>>>> >>>>>>>> >>>>>>>> -- >>>>>>>> -- >>>>>>>> You received this because you are subscribed to the "Design the Web >>>>>>>> with CSS" at Google groups. >>>>>>>> To post: [email protected] >>>>>>>> To unsubscribe: [email protected] >>>>>>> >>>>>>> >>>>>>> -- >>>>>>> -- >>>>>>> You received this because you are subscribed to the "Design the Web >>>>>>> with CSS" at Google groups. >>>>>>> To post: [email protected] >>>>>>> To unsubscribe: [email protected] >>>>>>> >>>>>> >>>>>> -- >>>>>> -- >>>>>> You received this because you are subscribed to the "Design the Web >>>>>> with CSS" at Google groups. >>>>>> To post: [email protected] >>>>>> To unsubscribe: [email protected] >>>>>> >>>>> >>>>> -- >>>>> -- >>>>> You received this because you are subscribed to the "Design the Web >>>>> with CSS" at Google groups. >>>>> To post: [email protected] >>>>> To unsubscribe: [email protected] >>>> >>>> >>>> -- >>>> -- >>>> You received this because you are subscribed to the "Design the Web with >>>> CSS" at Google groups. >>>> To post: [email protected] >>>> To unsubscribe: [email protected] >>>> >>> >>> -- >>> -- >>> You received this because you are subscribed to the "Design the Web with >>> CSS" at Google groups. >>> To post: [email protected] >>> To unsubscribe: [email protected] >>> >> >> -- >> -- >> You received this because you are subscribed to the "Design the Web with >> CSS" at Google groups. >> To post: [email protected] >> To unsubscribe: [email protected] >> > > -- > -- > You received this because you are subscribed to the "Design the Web with > CSS" at Google groups. > To post: [email protected] > To unsubscribe: [email protected] > -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
