homepage Welcome to WebmasterWorld Guest from 54.205.98.35
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE7 Form alignment issues
aligning label, input and an error message
greencode




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

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




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

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




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

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




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

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved