Hi Hadi.... The mis-alignment is caused by the default Blueprint .text class that is applied to inputs type=text. Select boxes do not have padding, however, inputs with the .text class do have padding and a width. The mismatched padding creates a mis-alignment when developing inline forms.
The best solution I've found is to play with the top and bottom padding of the divs that contain the select elements. In my tests IE6 and IE7 liked a padding that was higher than the default .text class padding (i.e padding:6px 0;) and IE8 liked a padding that was lower than the default .text class padding (i.e padding:3px 0;). To the community... what's the best solution to fix this for future releases? I'd hate to add a IE8 specific conditional comment, but due to each IE browser doing it's own thing... idk? Any ideas out there -- Sean K. Stewart On Jul 8, 5:27 am, Hadi Teo <[email protected]> wrote: > Background: > *) I am hosting this .ASPX page in the IFrame. > *) Currently i am dividing the sections into .span-12 and .span-12 > last > *) I am using IE 8 > > Issue: > *) When i am combining the label with the textbox in the > first .span-12 section, the textbox size is quite big and it's > misaligned > *) The label and the textbox in the 2nd .span-12 section are > misaligned as well. > > Please refer to the screenshot here :http://tinyurl.com/kjwn4v > > Here are the body of the .ASPX : > > Thanks for all your help. > > <%@ Page Language="C#" AutoEventWireup="true" > CodeBehind="LayoutTestPage.aspx.cs" > Inherits="LayoutTestPage" %> > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head runat="server"> > <title>Untitled Page</title> > <link rel="stylesheet" href="../style/blueprint/screen.css" > type="text/css" media="screen, projection"> > <link rel="stylesheet" href="../style/blueprint/print.css" > type="text/css" media="print"> > <!--[if lt IE 8]><link rel="stylesheet" href="../style/blueprint/ > ie.css" type="text/css" media="screen, projection"><![endif]--> > </head> > <body> > <div class="container showgrid"> > <form class="inline" id="form1" runat="server"> > <div class="span-12"> > <label for="ContactMemoNumber"> > Contact Memo Number</label> > <input type="text" class="text" id="q" name="q" > value="Field with class .text"> > </div> > <div class="span-12 last"> > <label for="CallMemoType"> > Call Memo Type</label> > <select id="a" name="a"> > <option value="0">Quick Brown Fox Jumps Over The Lazy > Dog</option> > <option value="1">Lorem ipsum dolor sit amet</option> > </select> > </div> > </form> > </div> > </body> > </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Blueprint CSS" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en -~----------~----~----~----~------~----~------~--~---
