Html css IE7 inline-block

Question

I have a problem with a simple form, in IE7.

In FF, and other browsers, I have no problem.

<form class="hotline_form">
     <fieldset>
         <legend>TEST</legend>
         <div class="field">
             <label class="question">Name:</label><input name="name"  type="text">
         </div>
         <div class="field">
             <label class="question">Username:</label><input name="name"  type="text">
         </div>
     </fieldset>
</form>

My CSS styling:

form.hotline_form{
    margin:0; padding: 0;
}
form.hotline_form fieldset{
    border: 0;
    padding: 0;
    margin: 25px 0 0 0;
}
form.hotline_form fieldset legend{
    width: 100%;
    padding: 0px 0px 5px 0px;
    margin: 5px 0px 5px 0px;
    border-bottom: 1px solid #999;
}
form.hotline_form fieldset div.field label{
    display: inline-block; 
    width: 130px; 
    padding: 0pt 20px 0pt 0pt;
    margin-top:5px;
    vertical-align: top;
    zoom:1; *display: inline; _height: 15px; /* IE7 fix*/
}
form.hotline_form fieldset div.field input, form.hotline_form fieldset div.field select, form.hotline_form fieldset div.field textarea{
    width: 330px;
    margin: 5px 0px 0px 0px;
    padding: 1px 0px 1px 0px;
}
form.hotline_form div.submit{
margin: 40px 0 0;
padding: 0 0 5px;
width: 100%;
}
form.hotline_form div.submit input{
    float: right;
    padding: 0px 7px 0px 0px;
}

Notice the fix I have tried

zoom:1; *display: inline; _height: 15px; /* IE7 fix*/

I got that from http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html

In Firefox it display, like this:

enter image description here

And IE7:

enter image description here

Have you tried removing your fix for IE 7? IE 7 supports inline-block on elements that are display:inline by default, which includes <label>. — Paul D. Waite
– Paul D. Waite, Commented Apr 10, 2012 at 12:51

Etienne Dupuis · Accepted Answer · 2012-04-10 12:47:41Z

1

I usually load different .CSS files for Internet Explorer, it keep my code clean:

<!--[if IE 7]> <link href="ie7.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if IE 8]> <link href="ie8.css" rel="stylesheet" type="text/css"> <![endif]-->

answered Apr 10, 2012 at 12:47

Etienne Dupuis

13.8k7 gold badges50 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

psalvaggio · Accepted Answer · 2012-04-10 12:47:50Z

1

Could this be a case of IE's funky way of dealing with padding? Is your fieldset fit tightly around those text boxes?

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

answered Apr 10, 2012 at 12:47

psalvaggio

1816 bronze badges

Comments

Brad Fox · Accepted Answer · 2012-04-10 12:48:22Z

0

See this alot in IE, its an issue with how IE formats what the code tells it to do

Your best bet is use to use JS to identify what browser is being run then build a custom style sheet for IE. Here are some links to help out

http://javascript.about.com/library/blbrsdet.htm

http://www.w3schools.com/js/js_browser.asp

Best of luck to you :)

answered Apr 10, 2012 at 12:48

Brad Fox

6816 silver badges19 bronze badges

5 Comments

Paul D. Waite Over a year ago

“Your best bet is use to use JS to identify what browser is being run then build a custom style sheet for IE.” It’s really not.

Paul D. Waite Over a year ago

Sure, but it’s unnecessary JavaScript, and doesn’t work when JavaScript’s turned off.

Brad Fox Over a year ago

This is true, guess it comes down to how I was taught to bypass this issue.

Brad Fox Over a year ago

Oh, Thanks for the link, taught me something today :)

Paul D. Waite Over a year ago

You’re very welcome. I doubt you’ll get many issues in practice doing IE6 stylesheets via JavaScript, but when there’s a built-in non-JavaScript method for achieving the same thing, it seems churlish not to use it.

Fantasmagorical · Accepted Answer · 2012-04-10 12:52:16Z

0

I would give the div.field overflow:hidden and then float:left; both the label and input, make sure when using margins for float elements you give them a display:inline;

No hack required and works for all browsers, you can set a height and line-height for both the label and input.

answered Apr 10, 2012 at 12:52

Fantasmagorical

1012 bronze badges

Collectives™ on Stack Overflow

Html css IE7 inline-block

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related