SitePoint Sponsor |
|
User Tag List
Results 1 to 12 of 12
-
Oct 1, 2007, 18:44 #1
- Join Date
- Mar 2007
- Posts
- 5
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
inconsistent form alignment in IE6/IE7
Major newbie here -
I have a simple form that I wish to align. My problem is that the alignment works in some IE6 browsers and not others. Ditto IE7. IE6 on XP Pro. IE7 on XP Pro and Vista. (Didn't work on Vista). I took the CSS from Rachel Andrew's book. Also the trick with wrapping the controls in <div>. Here's the style4.css:
Code:form div { clear: left; margin: 0; padding: 0; padding-top: 0.6em; } form div label { float: left; width: 25%; }
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Form Layout Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="style4.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="content"> <p>Please provide the following information:</p> <form method="post" action="register.html"> <div> <label for="memberid">Member #:</label> <input type="text" name="memberid" id="memberid" /> </div> <div> <label for="homezip">Home Zip Code:</label> <input type="text" name="homezip" id="homezip" /> </div> <div> <label for="password1">Password:</label> <input type="password" name="password1" id="password1" /> </div> <div> <label for="password2">Confirm Password:</label> <input type="password" name="password2" id="password2" /> </div> <div> <input type="submit" name="submitbtn" id="submitbtn" value = "Register" /> </div> </form> </div> </body> </html>
Any help would be greatly appreciated.
-
Oct 1, 2007, 19:35 #2
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What does the full HTML and CSS code look like (I'm asking because this looks like a portion of the implementation)?
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Oct 1, 2007, 20:30 #3
- Join Date
- Mar 2007
- Posts
- 5
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank you for your quick response. Actually, this is all there is. The website I'm building will have many forms. This was a test page to determine whether the styling would render correctly. Which it did on some machines and not on others.
The html is in a file called FormLayoutTest.html. I simply put that and style4.css in a folder on each test machine's hard drive and brought the html page up in the machines browser.
-
Oct 1, 2007, 22:07 #4
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well, I don't have any time right this moment to help you out, but I do have a sample form laid out with CSS that you can use to study (and use in your sites).
Code XHTML 1.0 Strict:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS Based Form Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen,projection"> * { margin: 0; padding: 0; } body { background: #FFF; color: #000; font: normal 85%/140% "lucida console", tahoma, verdana, arial, helvetica, sans-serif; letter-spacing: 1px; padding: 0 1em; } h1 { background: #FFF; color: inherit; font: bold 1.95em/2em georgia, garamond, "times new roman", times, serif; } #example-form { padding: 0.5em 0; } #about { float: left; margin-right: 1em; width: 30em; } #survey { float: left; width: 33em; } .fieldset { background: #FFE; border: 1px solid #000; margin-bottom: 1.5em; padding: 1em 0 0.5em 0.5em; position: relative; } fieldset { border: 0; display: block; } legend span { background: #CFC; border: 1px solid #000; color: #00C; padding: 0 0.25em; position: absolute; top: -0.75em; } } label { margin: 0.25em 0; vertical-align: middle; } #about label { clear: left; float: left; padding-top: 0.1em; width: 14em; } #survey label:hover { background: #FFE; color: #00F; font-weight: bold; } input { margin-bottom: 0.5em; padding: 0 0.25em; vertical-align: middle; } #about input { background: #FCFBFA; color: inherit; width: 14em; } #survey input { margin: 0 0.25em 0 0; padding: 0; width: auto; } select, textarea { margin: 0.5em 0.25em; } select { background: #FCFBFA; color: inherit; } textarea { background: #FCFBFA; color: inherit; padding: 0.5em; } textarea:active, textarea:focus, textarea:hover { background: #FFF; color: inherit; } .controls { clear: left; } </style> </head> <body> <h1>Semantic Forms with (X)HTML and CSS</h1> <form action="#" id="example-form" method="post"> <div id="about"> <div class="fieldset"> <fieldset> <legend><span>Basic Information</span></legend> <label for="name">Your Name:</label> <input id="name" type="text" size="30" /><br /> <label for="email">Your Email Address:</label> <input id="email" type="text" size="30" /> </fieldset> </div> <div class="fieldset"> <fieldset> <legend><span>What Is Your Favorite Color?</span></legend> <select name="sections"> <option value="0">--select one--</option> <option value="1">Black</option> <option value="2">Blue</option> <option value="3">Brown</option> <option value="4">Green</option> <option value="5">Grey</option> <option value="5">Orange</option> <option value="6">Purple</option> <option value="7">Red</option> <option value="8">White</option> <option value="0">Yellow</option> <option value="10">Other/No Preference</option> </select> </fieldset> </div> <div class="fieldset"> <fieldset> <legend><span>Tell Us About Yourself</span></legend> <div> <textarea rows="10" cols="40"></textarea> </div> </fieldset> </div> </div> <div id="survey"> <div class="fieldset"> <fieldset> <legend><span>What browsers are installed on your computer?</span></legend> <div> <label for="msie"><input id="msie" type="checkbox" name="browser" value="Microsoft" /> Internet Explorer</label><br /> <label for="netscape"><input id="netscape" type="checkbox" name="browser" value="Netscape" /> Netscape Browser</label><br /> <label for="mozilla"><input id="mozilla" type="checkbox" name="browser" value="Mozilla" /> Mozilla FireFox</label><br /> <label for="opera"><input id="opera" type="checkbox" name="browser" value="Opera" /> Opera Web Browser</label><br /> <label for="konqueror"><input id="konqueror" type="checkbox" name="browser" value="Konqueror" /> Konqueror KDE</label><br /> <label for="safari"><input id="safari" type="checkbox" name="browser" value="Apple" /> Safari Web Browser</label><br /> <label for="another-browser"><input id="another-browser" type="checkbox" name="browser" value="Other" /> Something Else</label> </div> </fieldset> </div> <div class="fieldset"> <fieldset> <legend><span>What do you use to build your Web sites?</span></legend> <div> <label for="golive"><input id="golive" name="editor" type="radio" value="Adobe GoLive" /> Adobe GoLive</label><br /> <label for="dreamweaver"><input id="dreamweaver" name="editor" type="radio" value="Macromedia Dreamweaver" /> Macromedia Dreamweaver</label><br /> <label for="frontpage"><input id="frontpage" name="editor" type="radio" value="Microsoft FrontPage" /> Microsoft FrontPage</label><br /> <label for="hand"><input id="hand" name="editor" type="radio" value="A Text Editor" /> Text Editor</label><br /> <label for="other"><input id="other" name="editor" type="radio" value="Other" /> Something Else</label> </div> </fieldset> </div> </div> <div class="controls"> <input class="submit" type="submit" value="Submit Form" /> <input class="reset" type="reset" value="Clear Form" /> </div> </form> <p> Copyright © 2006-2007, The Monster Under the Bed. All Rights To Scare Unsuspecting Children Reserved. </p> </body> </html>
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Oct 1, 2007, 22:33 #5
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Don't you need to give the inputs a width and/or margin-left?
-
Oct 2, 2007, 02:19 #6
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Dan, what about <label>'s for your textarea and select?
I'd probably add those within the <legend> for those two scenario's so that it acts as both the <legend> and the <label> for that particular form item.
-
Oct 2, 2007, 03:11 #7
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Good catch, Dave. I forgot to add those when I was working on the sample form earlier this year.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Oct 2, 2007, 06:29 #8
- Join Date
- Mar 2007
- Posts
- 5
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank you for the sample page. I will study it carefully, try to adapt it to my needs.
If you do happen to see something in my page that might have caused this inconsistent behavior in the browsers, I would love to know what it is...
-
Oct 2, 2007, 14:06 #9
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
When you say it doesn't work in some browsers, what does that mean exactly?
-
Oct 2, 2007, 16:30 #10
- Join Date
- Mar 2007
- Posts
- 5
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Tyssen - to answer your question:
Browsing the same html page with the same stylesheet has one of two outcomes:
The labels line up one under the other, left justified and the text boxes line up one under the other and left justified. So it looks like a two column table.
or
The text boxes appear immediately after their respective labels: eg.,
label1islong ___________________
label2islmuchonger_______________________________
lablel3_____________________
I have had each of the results above with machines running XP Pro IE6.
I got the first result on XP Pro IE7, the second on Vista IE7.
-
Oct 3, 2007, 01:13 #11
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Something like this might be useful
Accessible forms
I'd always wrap the entire label and input with the <label> tag but then use <span> around the actually label text so that it can be styled and positioned however you require.
Hope that helps.
-
Oct 3, 2007, 07:00 #12
- Join Date
- Mar 2007
- Posts
- 5
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
A very clear article and excellent example. I think I'm finally getting the hang of this. Thanks again.
Bookmarks