troubleshooting Question

IE7 putting extra line break after labels on a form

Avatar of CCSOFlag
CCSOFlagFlag for United States of America asked on
Web Languages and StandardsCSSWeb Browsers
13 Comments1 Solution2263 ViewsLast Modified:
For some reason in IE7 if the label is longer than the input tag below it it puts an extra line break unless I define display as "inline-block" in the css file.  This works fine in FF3.  I've tried defining display as inline and it puts the extra line break in.  

Here is the XHTML:
                                            <label for="SeparationDateTxt">
                                                Separation Date:                                
                                            </label>
                                            <br />
                                            <input type="text" id="SeparationDateTxt" name="SeparationDateText" value="<% Response.Write(Session("varSeparationDate")) %>" size="10" />

The css is:
label
{
      font-size: 12px;
      color: #0033FF;
      display: inline-block;
      font-weight: bolder;
}

It doesn't matter where it is on my form, if the label is longer it puts the extra break in.  Any ideas on why it does this?

An example of what it looks like in IE vs FF:

IE7:
Separation Date:

|Text Box|


FF:
Separation Date:
|Text Box|

Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 13 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 13 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros