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

RadTextBox Margin and IE Compatibility browser

3 Answers 164 Views
Input
This is a migrated thread and some comments may be shown as answers.
mc2000
Top achievements
Rank 1
mc2000 asked on 26 Aug 2010, 10:11 PM
I have a number of areas in my application where I have divs containing a radtextbox or radcombobox. In IE 8 and Firefox everything seems to be fine, visually. If I run the application in IE compatibility mode (which for some reason is what my IIS 7 server is seeming to run the application as, visually) I always get a 1 pixel margin on top of each text box and below each textbox. I end up having all of these boxes appear smashed together and it's really frustrating. I believe its an inherit nature of textboxes in general in IE, and I am looking to acheive a consistent behavior regardless of combobox or textbox and regardless of browser. Any suggestions on this?

Thanks in advance!

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Aug 2010, 10:15 AM
Hello Mark,

The issue is caused by differences in browser behavior and can be observed with standard textboxes as well. If you must achieve a pixel-exact look, one option is to set a vertical-align:bottom style to the textboxes:

style="vertical-align:bottom"

Another option is to use negative top or bottom margin styles and target them at IE7 only by using a CSS hack:

*+html  .className
{
       margin-bottom: -2px ;
}

.className is a CSS class applied to the <div>s which hold each textbox.

Regards,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
mc2000
Top achievements
Rank 1
answered on 28 Sep 2010, 06:20 PM
First and foremost, thanks for your response. This is still not quite working for me. I set the textbox to vertical-align: bottom. This works in IE8 with the document mode rendering in IE7 mode. It did NOT work in IE9 BETA with the document in IE7 mode but did work in IE9 BETA if the doucment was in IE8 rendering mode. The textboxes are still off by one pixel regardless in Chrome, which is a browser we are trying to target. You can see the problem in the attachment.

Thanks!
0
Dimo
Telerik team
answered on 29 Sep 2010, 07:55 AM
Hi Mark,

The demo below shows how to achieve a consistent look in Chrome by removing the default margin that textboxes have in this browser.

By the way, achieving a pixel perfect layout in all browsers becomes an overhead from a certain point, so it is good to create designs, which can tolerate a couple of pixels of differences across browsers:

http://www.alistapart.com/articles/12lessonsCSSandstandards/

See point (2).

As for IE9 - we do not support browsers in beta stage.


<%@ Page Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
<style type="text/css">
 
input[type="text"]
{
    margin:0;
}
 
.riTextBox
{
    vertical-align:bottom;
}
 
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadTextBox ID="RadTextBox1" runat="server" />
<br />
<telerik:RadTextBox ID="RadTextBox2" runat="server" />
<br />
<telerik:RadTextBox ID="RadTextBox3" runat="server" />
 
</form>
</body>
</html>


Kind regards,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Input
Asked by
mc2000
Top achievements
Rank 1
Answers by
Dimo
Telerik team
mc2000
Top achievements
Rank 1
Share this question
or