I’m making a simple (and I mean simple) HTML form. I’ve been styling them using ordered lists for a while, and really like doing it that way.
Here’s my code right now:
<form name="retrieve" method="post" action="nom.cfm">
<ol>
<li><label for="useremail">Email Address:</label>
<input name="useremail" id="useremail" type="text" class="tpeainput1" />
</li>
<li><label for="tracknumb">Tracking Number:</label>
<input name="tracknumb" id="tracknumb" type="text" class="tpeainput2" />
</li>
</ol>
<div class="tpeasubmit"><input name="fetch" type="submit" value="Submit" /></div>
</form>
label {
float: left;
width: 25%;
display: inline-block;
line-height: 1.8;
vertical-align: bottom;
white-space: nowrap;
margin-bottom: 5px;
}
input.tpeainput1 {
float: right;
width: 60%;
padding: 2px 4px;
font-size: 1em;
margin-bottom: 5px;
}
input.tpeainput2 {
float: right;
width: 40%;
padding: 2px 4px;
font-size: 1em;
}
ol {
margin: 0;
padding: 10px 0 0 0;
}
ol li {
list-style: none;
margin: 0;
padding: 0;
}
It all looks fine. Two text labels on two rows with the input boxes to the right of the label. The problem is in Firefox, when I zoom the text size, the bottom label jumps to the right and gets hidden by the input.
I can’t figure out what’s making that happen.
ralphm
September 8, 2011, 12:01am
2
Try this:
ol li {
list-style: none;
margin: 0;
padding: 0;
[COLOR="Red"]overflow:hidden;[/COLOR]
}
I might have blown up the internet!
Always a danger in our profession.
We must have care, grasshopper
This code was originally from A List Apart, and modified by me as needed. That’s probably where the inline-block came from.
Well when your CSS skills are as elementary as mine are, you don’t dare remove something when you’re not sure what the result will be. I might have blown up the internet!
Anyway, ralph’s clear: left did indeed work! Everything looks fine now, zoom or no zoom. Thanks!
Well I don’t have two label opening brackets! But do you mean that labels float by default?
The douple opening label bracket is my wh00pz. But I meant, once you put float: left on the labels, the display: inline-block is just tinsel.
ralphm
September 8, 2011, 1:40pm
6
I don’t see the point of that inline-block there, but anyhow, the problem at hand could be cured with clear:left:
.tpeaexist label {
[COLOR="Red"]clear: left;[/COLOR]
display: inline-block;
float: left;
line-height: 1.8;
margin-bottom: 5px;
overflow: hidden;
vertical-align: bottom;
white-space: nowrap;
}
Ok, here we go. I did absolute linking of the two linked stylesheets to cut down on the clutter. Keep in mind the rest of the HTML might look awkward (like going from H1 to H3) because it’s recycled code that I have yet to tidy up.
<!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" xml:lang="en-us" lang="en-us">
<head>
<title>2012 Transportation Planning Excellence Awards - FHWA and FTA</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="http://www.fhwa.dot.gov/fhwadoc.css" />
<link rel="stylesheet" type="text/css" href="http://www.fhwa.dot.gov/hep/hep.css" />
<style type="text/css">
/* tpea index page login box */
#tpeaindex {
width: 680px;
margin: 30px 40px;
padding: 0;
border: 3px solid #800080;
}
#tpeaindex h3 {
margin: 0 0 5px 0;
padding: 0 0 5px 0;
border-bottom: 1px solid #800080;
}
/* Existing box */
.tpeaexist {
float: left;
width: 45%;
margin: 0;
padding: 12px;
border-left: 3px solid #800080;
}
.tpeaexist p {
margin: 0;
padding: 5px 0;
}
.tpeaexist label {
float: left;
display: inline-block;
line-height: 1.8;
vertical-align: bottom;
white-space: nowrap;
margin-bottom: 5px;
overflow: hidden;
}
input.tpeainput1 {
float: right;
width: 50%;
padding: 2px 4px;
font-size: 1em;
margin-bottom: 5px;
}
input.tpeainput2 {
float: right;
width: 35%;
padding: 2px 4px;
font-size: 1em;
}
.tpeaexist ol {
margin: 0;
padding: 10px 0 0 0;
}
#retrieve ol li {
list-style: none;
margin: 0;
padding: 0;
}
/* New nom box */
.tpeanew {
float: left;
width: 45%;
margin: 0;
padding: 12px;
}
.tpeasubmit {
float: right;
clear: both;
margin: 0;
padding: 5px 0;
}
.clearbox {
clear: both;
}
.thanks {
padding: 0 15px;
border: 1px solid #999;
}
/* misc */
div.trackbox {
padding: 0 15px;
width: 50%;
border: 1px solid #000;
}
p.trackbold {
font-size: 1.2em;
}
div.nomnav {
width: 680px;
text-align: center;
}
div#tpeaheader {
background: #fff url('tpea12header.png') no-repeat;
margin-top: 10px;
height: 200px;
width: 100%;
}
div#tpeaheader h1 {
float: left;
margin-left: -999px;
margin-top: -999px;
}
</style>
</head>
<body>
<table width="100%" cellpadding="4" cellspacing="0" border="0"><tr><td bgcolor="#000066"><a href="#content"><img src="../../../1x1.gif" width="1" height="1" alt="Skip to content" border="0" /></a><img src="../../../dotfhwa.gif" alt="U.S. Department of Transportation, Federal Highway Administration" border="0" width="210" height="31" /></td>
<td bgcolor="#000066" align="right"><a href="../../../index.html"><img src="../../../fhwahome.gif" alt="FHWA Home" border="0" height="18" width="79" /></a><a href="../../../feedback.html"><img src="../../../feedback.gif" alt="Feedback" border="0" height="18" width="76" /></a></td></tr></table>
<table width="100%" cellpadding="2" cellspacing="0" border="0"><tr valign="middle"><td bgcolor="#800080" class="white">Planning </td><td bgcolor="#800080" align="right"><div class="cgrumb"><a href="../../../index.html" class="cgrumb">FHWA </a>> <a href="../../../hep/index.htm" class="cgrumb">HEP</a> > <a href="../../../hep/awards.htm" class="cgrumb">Awards</a> > <a href="index.cfm" class="cgrumb">2012 TPEA</a></div></td></tr></table>
<div class="content"><a name="content"></a>
<div id="tpeaheader"><h1>The Federal Highway Administration's & Federal Transit Administration's<br />
Transportation Planning Excellence Awards</h1></div>
<div id="tpeaindex">
<div class="tpeanew">
<h3>Create a New Nomination</h3>
<p>Submitting a Nomination for the first time?</p>
<p><a href="nom.cfm#top">Please visit our Nomination form to get started!</a></p>
</div>
<div class="tpeaexist">
<h3>Retrieve a Saved Nomination</h3>
<form name="retrieve" id="retrieve" action="nom.cfm#top" method="post">
<ol>
<li><label for="useremail">Email Address:</label>
<input name="useremail" type="text" class="tpeainput1" id="useremail" />
</li>
<li><label for="tracknumb">Tracking Number:</label>
<input name="tracknumb" type="text" class="tpeainput2" id="tracknumb" />
</li>
</ol>
<div class="tpeasubmit"><input name="fetch" type="submit" value="Submit" /></div>
</form>
</div>
<div class="clearbox"></div>
</div>
</div>
<div class="moddate"><script language="JAVASCRIPT" type="text/javascript" src="../../../javadate.js"></script></div>
<hr />
<div align="center">
<a href="../../../index.html">FHWA Home </a>| <a href="../../../hep/index.htm">HEP Home </a>| <a href="../../../feedback.html">Feedback </a></div>
<img src="../../../fhwatag.gif" width="76" height="18" border="0" alt="FHWA" />
<div align="center" class="footer">United States Department of Transportation - <strong>Federal Highway Administration </strong></div>
</body>
</html>
I’m confused by this
they are floated.
Similar behavior ralph, except now the text gets chopped off. If I remove the width from the label, I can see the text, but it doesn’t stop the repositioning when I zoom text.
I’ve included a couple of screenshots.
Well I don’t have two label opening brackets!
Yeah, give me a few because it’s packed with serverside code. I’ll need to grab the source at the browser. I also have three linked stylesheets.
ralphm
September 8, 2011, 1:15pm
11
Could you post your current code, preferably all together (with CSS in head) for easy copying.
But do you mean that labels float by default?