Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Thursday, February 24, 2011

Why validators error messages not displayed in Google Chrome?

I asked myself several times. Why are validators error messages not displayed in Google Chrome? It is weird. Not a single validation error message is displayed in the page as soon as the following CSS is added. It works well with IE, Safari and Mozilla-type browsers but fails on Google Chrome.

  div.sink {padding:20px; width: 190px;border:1px silver solid;}
  div.sink input[type="text"]{width: 190px;}
  div.sink input[type="submit"]{width: 50px;}

I am sure that all the validators are fired and the page as a result reports invalid but there is no error message. There is no doubt that the problem is somehow related to the above CSS. To reduce the complexity of the page and easily to nail down the problem, I marked up a simple login page for investigation.

login page

With a bit modification, the page looks like this - very simple, only text boxes, RequiredFieldValidators and a login button. There is no code behind (no OnClick event) and they are straightly marks up.

<head>
<style type="text/css">

div.login {padding:20px; width: 190px; border:1px silver solid;}
div.login input[type="text"], div.login input[type="password"]{ width: 190px; }
div.login input[type="submit"]{width: 50px;}

</style>
</head>
<body>
<form id="form1" runat="server">
<div class="login">

  User Name:<br />
  <asp:TextBox id="txtUsername" runat="server" MaxLength="30"></asp:TextBox><br />     
  <asp:RequiredFieldValidator ID="RequiredFieldValidatorUsername" runat="server" 
       ControlToValidate="txtUsername" Display="Dynamic" 
       ErrorMessage="A username is required."></asp:RequiredFieldValidator><br />

  Password:<br />
  <asp:TextBox id="txtPassword" runat="server"  TextMode="Password" MaxLength="180" ></asp:TextBox><br />     
  <asp:RequiredFieldValidator ID="RequiredFieldValidatorPassword" runat="server" 
       ControlToValidate="txtPassword" Display="Dynamic" 
       ErrorMessage="A password is required."></asp:RequiredFieldValidator><br />

 <asp:Button ID="btnLogin" runat="server" Text="Log In" /><br />

</div>
</form>
</body>

With the above markup, the error message is shown at least for the User Name, unlike my problem page. The funny is that in this simple example, only the last validator won't be able to display error message if I keep adding more the similar control and validator. For sure, everything works normal if the CSS is removed.

No error message for the only and one validator

no error message for the only and one validator
No error message for the last validator
screen 1

no error message for the last validator - screen 1
No error message for the last validator
screen 2

no error message for the last validator - screen 2
No error message for the last validator
screen 3

no error message for the last validator - screen 3

The CSS is not complex. As a matter of face, it is very simple. What it does is to set the width for the input box or button in the page. To resolve this, I can simply add the width back to the control inself by removing the CSS. However, I cannot do it with my original page. Most controls are from user controls which won't allow me to set width. In addition, If I manage to add the width to them, the changes will affect other pages across the entire project unless I do it programically instead of static. It means I have to go in every single user control to add some code so that it can accept width change. I don't think that I want to go this route.

After playing around for some time, I finally found out the problem. The problem is the width setting in the first line.

  div.login {padding:20px; width: 190px; border:1px silver solid;}
  div.login input[type="text"], div.login input[type="password"]{ width: 190px; }
  div.login input[type="submit"]{width: 50px;}

Adding 4 more pixels fixes the problem!

  div.login {padding:20px; width: 194px; border:1px silver solid;}
  div.login input[type="text"], div.login input[type="password"]{ width: 190px; }
  div.login input[type="submit"]{width: 50px;}

It appears to me that Google Chrome browser cares about the outer width of the DIV when a CSS is specified. Most browsers may ignore it if the outer DIV is not width enough for its child components. From this instance, I learn that I need to pay attention to declare my CSS in order to prevent this from happening.

Monday, October 26, 2009

Why inner DIV doesn't inherit background color

What situation will make an inner DIV not inherit the background color of the outer DIV? It usually happens when CSS or HTML style's float attribute exists. Considering the following HTML,
<html>
<body style="background-color:#F8E0EC;">
<div style="background-color:#fff;padding:20px;border:10px solid blue;">        
  <div style="float:left;width:330px;border: 1px dotted red;">
      <p>
        <strong>When:</strong>          
        12/5/2009        
        <strong>@</strong>
        3:30 PM
      </p>
      <p>
        <strong>Where:</strong>
        5 main street
        USA
      </p>
      <p>
        <strong>Description:</strong>
        test
      </p>
      <p>
        <strong>Contact:</strong>
        425-555-1212
      </p>   
  </div>   
</div> 
</body>
</html>
The picture will look like this:
inner div floats outside
As you can see, most inner DIV text are sitting outside the blue box (outer DIV). If you take out the float attribute, everything will work fine. The reason of using float attribute is that you may want to have another DIV sit side-by-side together. In this situation, you need to put
   <div style="clear:both"></div> 
at the end of the inner DIV, just before closing the outer DIV. In my example, I will continue to use only one inner DIV. You can test it yourself with two.
<html>
<body style="background-color:#F8E0EC;">
<div style="background-color:#fff;padding:20px;border:10px solid blue;">        
  <div style="float:left;width:330px;border: 1px dotted red;">
      <p>
        <strong>When:</strong>          
        12/5/2009       
        <strong>@</strong>
        3:30 PM
      </p>
      <p>
        <strong>Where:</strong>
        5 main street
        USA
      </p>
      <p>
        <strong>Description:</strong>
        test
      </p>
      <p>
        <strong>Contact:</strong>
        425-555-1212
      </p>   
  </div>

  <div style="clear:both"></div>
   
</div> 
</body>
</html>

inner div floats outside
Now the problem is fixed.