This is a migrated thread and some comments may be shown as answers.

RadTextBox/DatePicker top margin IE7

3 Answers 57 Views
Input
This is a migrated thread and some comments may be shown as answers.
Tzvetan
Top achievements
Rank 1
Tzvetan asked on 13 Oct 2011, 02:30 AM
Hello,

We are using several radtextboxes in our application and the top margin is not able to be set to 0px in IE7. The top margin seems to be 2px in IE7, and when I set vertical-align:top or bottom !important its only off by 1px. It renders fine in IE8-9, and Chrome. We have the same problem with the raddatepicker but there is only a 1px margin on it. I know setting top:-1px; will work in IE7 but the problem is it breaks it for all other browsers.

Do you know any way to get rid of the top margin on IE7 without executing different CSS based on browser?

Thank you,

Tzvetan

3 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 13 Oct 2011, 06:15 AM
Hello Tzvetan,

Check out the following forum which discussed the same.
RadTextBox Margin and IE Compatibility browser.

Thanks,
Shinu.
0
Tzvetan
Top achievements
Rank 1
answered on 14 Oct 2011, 09:44 PM
Ya the reccomended IE7 star plus hack doesn't work I had tried it before and seen the post you pointed me to.

I actually found a different CSS hack that worked for me

.yourRadTextBox{
    margin-top/*\**/: 0px\9;
    *margin-top:-1px;
}

The first line is for IE8, and the second one is read by 7. The textboxes now display the same way through all versions of IE and Chrome.I hope this helps anyone who is struggling with style differences across browsers.

Good Luck,

Tzvetan
0
Galin
Telerik team
answered on 19 Oct 2011, 03:34 PM
Hi Tzvetan,

I am glad you have found a solution. However I do not recommend you to use CSS "hacks" for IE when it is possible to do it with conditional comments, e.g.
<!--[if IE 7]> <!--According to the conditional comment this is IE 7-->
    <style type="text/css">
       .yourRadTextBox
       {
          margin-top:-1px;
       }
     </style>
<![endif]-->
 
<!--[if IE 8]>
<!--According to the conditional comment this is IE 8-->
    <style type="text/css">
       .yourRadTextBox
       {
          margin-top: 0px;
       }
     </style>
 <![endif]-->

I hope this helps.

Best wishes,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Tags
Input
Asked by
Tzvetan
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Tzvetan
Top achievements
Rank 1
Galin
Telerik team
Share this question
or