Change css to remove extra spaces

I think the issue is with panel-body class.

This page looks fine. No extra spaces between the textboxes

http://stagingbd.com/office-name-add-a-branch.html

This is the one I'm working on based on that page above. I'm plugging it to .Net MVC code but I have extra spaces between the textboxes

http://stagingbd.com/Branch_New.html
LVL 8
CamilliaAsked:
Who is Participating?
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
Either method is fine.  You don't need to change them in 'bootstrap.css', just change them in that page in their own 'style' section that comes last after all the others and just before the </head> tag.
<style type="text/css">
<!--
.form-horizontal .form-group {
    margin-left: 1px;
    margin-right: 1px;
}
.panel-body {
    padding: 1px;
}
.form-group {
    margin-bottom: 1px;
}
 -->
</style>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
Your second example references 'localhost' for all the files which of course are not on My 'localhost' but yours.  That means we can't see what your CSS and scripts are doing.
0
 
CamilliaAuthor Commented:
Looked at it. Let me change that. I'll post again
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
CamilliaAuthor Commented:
Here, this is the one that's needs the spaces be removed. I played around with "panel-body" and "form-group" and it's this combination that causes the extra space. "form-group" comes from bootstrap so I don't want to change that. I know I can override it.

http://stagingbd.com/beadynew.html
0
 
Dave BaldwinFixer of ProblemsCommented:
It looks like these two are your biggest problem.  The two of them combine for 45px of blank space.
.panel-body {
    padding: 15px;
}
.form-group {
    margin-bottom: 15px;
}

Open in new window

0
 
CamilliaAuthor Commented:
Yeah, there has to be some padding...that's why I have   <div class="form-group panel-body">

Now, If I remove "panel-body" from the first textbox, it looks like this...the padding is totally removed.

The thing is, there's  <div class="panel-body">  as top level...that should do the padding but it's not.

one css class removed
0
 
CamilliaAuthor Commented:
I think I can remove  class="form-group panel-body"   totally and it looks correct.
0
 
Dave BaldwinFixer of ProblemsCommented:
Probably.  I set the following to 1px in Firebug and it seems to work.
.form-horizontal .form-group {
    margin-left: 1px;
    margin-right: 1px;
}
.panel-body {
    padding: 1px;
}
.form-group {
    margin-bottom: 1px;
}

Open in new window

0
 
CamilliaAuthor Commented:
I thought I shouldn't be changing bootstrap CSS tags directly. I should create news ones to override them. At least, that's what a CSS guy said that my previous job.

I can try what you have.
0
 
CamilliaAuthor Commented:
thanks,I'll try
0
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.