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!
Thanks in advance!
3 Answers, 1 is accepted
0
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
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
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!
Thanks!
0
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.
Kind regards,
Dimo
the Telerik team
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"<html xmlns="http://www.w3.org/1999/xhtml"><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