1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE7 Form alignment issues

aligning label, input and an error message

         

greencode

6:55 pm on Jun 5, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



I'm having a lot of trouble getting the label to align with the text field and then the text field to line up with a potential error field. I'm slightly losing my mind at the moment!

Everything works in all browsers except IE7 where there's a horrible alignment issue with the error message not aligning with the text field. I need it all vertically centered but at the moment it's aligning itself on the lower edge. I've added the code below. I'm hoping somebody can help.

Thanks in advance. 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
input.m {
width: 290px;
height: 32px;
line-height: 32px;
font-size: 15px;
padding: 0 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 1px solid #c2c2c2;
}

label {
font-size: 13px;
font-weight: bold;
margin-right: 5px;
float: left;
}

label.s {
width: 70px;
line-height: 34px;
text-align: right;
margin: 0 10px 0 0;
}

div.alert {
display: inline-block;
font-size: 12px;
padding-left: 21px;
line-height: 32px;
color: #f32c76;
background: yellow url(../images/icn-alert-s.png) no-repeat 0 center;
margin-left: 5px;
}

<!--[if IE 7]>
div.alert {
display: inline;
height: 32px;
zoom:1;
}
<![endif]-->

-->
</style>
 <title></title>
</head>
<body>
<div class="row"><label for="password" class="s">Password</label>
<input class="m" type="password" name="password" id="password" />
<div class="alert">Incorrect password</div>
</div>
</body>
</html>

greencode

6:58 pm on Jun 5, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



Actually just looking at it a bit more and it doesn't appear to be lining up that well in the other browsers either! Arrghhhhh

Paul_o_b

7:28 pm on Jun 5, 2011 (gmt 0)

10+ Year Member



Hi,

You have an old doctype that will trigger quirks mode in IE so use a full doctype with uri.

Conditional comments are html and should not be in the css file itself. You can call the css from within the conditional comments but you can't actually mix CCs in the stylesheet.

Use inline-block for the label elements instead of floating and then apply vertical-align:middle to the label, inputs and error message and they should then align correctly.

If you also use a span instead of the div then you won't need the hacks for IE7 at all as it understand inline-block on elements that are natively inline and indeed in your structure a span is the more semantic element as it lies next to other inline elements.

e.g.Roughly like this: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.m {
width: 290px;
height: 32px;
line-height: 32px;
font-size: 15px;
padding: 0 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 1px solid #c2c2c2;
vertical-align:middle;
}
label {
font-size: 13px;
font-weight: bold;
margin-right: 5px;
}
.s {
width: 70px;
line-height: 34px;
text-align: right;
margin: 0 10px 0 0;
display:inline-block;
vertical-align:middle;
}
.alert {
display: inline-block;
font-size: 12px;
padding-left: 21px;
line-height: 32px;
color: #f32c76;
background: yellow url(../images/icn-alert-s.png) no-repeat 0 center;
margin-left: 5px;
vertical-align:middle;
}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<div class="row">
<label for="password" class="s">Password</label>
<input class="m" type="password" name="password" id="password" />
<span class="alert">Incorrect password</span>
</div>
</form>
</body>
</html>

greencode

7:44 pm on Jun 5, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks so much for your help with this - I shall take a proper look tomorrow as I'm a little exhausted to go through this now. Sorry, I only added the conditional CSS statement in this example - I have a separate stylesheet for IE7. I must have tried most of what you've said but I think in the end I was probably mixing and matching the incorrect items and therefore that's when everything was starting to look like a dogs dinner (umm, wonder where that came from!). I'll reply back tomorrow after fully testing inside my actual page.

greencode

8:38 am on Jun 6, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



Hi Paul_o_b - Just wanted to say thanks so much for helping out with this. Just tested in all browsers and your code works perfectly. Just goes to show it's often worth asking for help as that was taking me hours to do and I still wasn't getting it right - you come along and do so right away! Thanks again.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026