I'm in the midst of the HTML5/CSS/JavaScript learning curve and have hit a wall.
My goal is to create a form. In the process of executing this seemingly simple task, I've created a confusing monstrosity that displays perfectly in Firefox and IE, but appears as a jumbled mess in Chrome and Safari. I've written some sample code that illustrates my problem. Consider this three line form that has two text fields for username and password, and a checkbox to indicate whether or not the theme from 'Sanford and Son' should play during the user's session.
<!DOCTYPE HTML>
<html>
<head>
<style>
form label{
float: left;
clear: left;
text-align: right;
margin-right: 10px;
width: 110px;
}
form input{
display: block;
margin-bottom: 5px;
padding: 0px .2em;
outline: none;
}
</style>
</head>
<body>
<form id="loginPopup">
<fieldset>
<label for="username">Username:</label>
<input type="text" id="username" name="username"/>
<label for="password">Password:</label>
<input type="password" id="password" name="password"/>
<label for="sanford">Sanford Theme:</label>
<input type="checkbox" id="sanford" name="sanford"/>
</fieldset>
</form>
</body>
</html>
Try viewing it in IE or Firefox and everything looks perfect. Now try viewing it in Chrome or Safari. The 'sanford' checkbox appears underneath its label. Not good. The checkbox is obviously supposed to appear to the right of the label. What's even more perplexing is that if I replace the checkbox with some other input (e.g. text, radio, etc.), everything appears properly in all browsers. This problem seems limited to the checkbox.
I can't wrap my head around what's going on here. The 'Sanford' label is floated to the left so presumably the checkbox should flow to the immediate right of that label -- and in fact that's exactly what happens in Firefox/IE… so why not in Chrome/Safari?
Any help would be greatly appreciated.
EDIT: I posted the code to the Fiddle site as requested: http://jsfiddle.net/ChadDecker/FyNZw/
Float is tricky. If one element is floated, the others have to be floated or it will be all screwed up. So you must float every element and adjust with padding/margin as necessary. What you may want to try also is using:
position: absolute;
and also using z-index which tells the page what items to display over top of the other:
z-index: 0;
EDIT
Your form on JSFiddle: It's all designed wrong in my opinion. You shouldn't be using form.input because since the checkbox field is considered a form of input, hence <input then it gets the properties from form.input style. I made a simple class to show you called box:
http://jsfiddle.net/FyNZw/2/
Related
I'm making an options menu, and I'd like to be able to enable/disable part of the menu with a checkbox. So I've tried 3 things here which work fine and look alright in Chrome/Firefox but I can't figure out how to get it to look alright in IE too.
I tried first using the fieldset and offsetting a legend and checkbox which were inside it, see here: fieldset
Then I tried using a div and label doing a similar approach, see here: div/label
Finally I tried moving the label/checkbox outside of the div but again it looks bad in IE, see here: div/label outside div
I'm not very good at CSS for different browsers so I'm sorry if this is a really simple common thing, but I couldn't find anything about it from what I could think to Google.
I have all the logic working fine and I'm only trying to display the html/css correctly here so no need to post answers with javascript enabling/disabling stuff.
This is the HTML for attempt 1:
<fieldset class="groupBox">
<legend>Load template automatically</legend>
<input id="LoadTemplateCheckBox" type="checkbox" class="fieldsetCheckbox" />
<div id="templateDiv">
<label>Root Path:</label>
<input type="text" id="templateLocation" readonly="true"/>
<button type="button">...</button>
</div>
</fieldset>
and the relevant CSS:
.fieldsetCheckbox{
width: 16px;
margin-top: -31px;
margin-left: -14px;
float: left;
}
.groupBox{
padding: 15px;
border: 2px solid #ccc;
margin: 0px 0px 5px 0px;
}
How about putting the input inside the legend, like this: http://jsfiddle.net/dv866/6/
<legend>
<input id="LoadTemplateCheckBox" type="checkbox" class="fieldsetCheckbox" />
Load template automatically
</legend>
I need to figure out how to to put label text next to checkbox button. I need the text in the middle of the checkbox button. I always got the checkbox a little above the text or little below it. Hard to get it exactly in the middle. When I fix in to the middle in one browser, in other browser it doesn't exactly in the middle. There is always a pixel or two that ruins it.
Here's the fiddle
http://jsfiddle.net/JhPHm/
<style>
.field input
{
margin: 0;
padding: 0;
vertical-align: top;
}
.field label
{
margin: 0;
padding: 0;
vertical-align: top;
font: normal 12px/14px arial;
}
</style>
<div style="padding: 30px;">
<div class="field">
<label for="x"><input type="checkbox" id="x" name="x" value="1" /> Text in the middle</label>
</div>
</div>
Please help me get the text in the middle in all browsers. Here a picture with the differences:
http://img708.imageshack.us/img708/5410/checkbox.png
Instead of vertical-align:top, try vertical-align:middle. It may help a bit, but input elements are notorious for being uneven across browsers.
Aligning input elements is tough, and sometimes nearly impossible.
If the problem is that it's misbehaving in old browsers, consider that people browsing the web with these browsers will stumble upon misaligned checkboxes on more places than just yours. They are browsing the web while it's crumbling around them so to speak. They won't care because they either know they're using an old browser or they don't notice because all sites show these tiny glitches.
If you're going to have to add all sorts of tweaks and fixes for various browsers to get to an acceptable end result, also consider that all these tweaks add to the size of your CSS and to the complexity making it tougher to maintain in the future.
In the end for me, this stuff depends on the audience, the budget and obviously the amount of checkboxes. ;-)
The way I've hacked around this is to use relative positioning, like this:
input[type="radio"], input[type="checkbox"] {
cursor: pointer;
line-height: normal;
margin: 0px;
position: relative;
top: -3px;
}
For example, if you want to shift them up 3 pixels. Like you've pointed out above, you might get different results in different browsers.
In this situation, Firebug or Chrome Developer Tools is going to help you a lot. There may be some garbage you're inheriting from elsewhere. Like in the example above, I set the margin back to 0px because something higher up (and unavoidable) in the CSS structure was setting a margin of 4px on all input and screwing me.
Good luck!
I see plenty of IE 7 workarounds for other CSS float problems, but I have yet to find one for this issue: when an element has both clear and float properties, the clearing doesn't work correctly.
This jsFiddle illustrates the problem. I'm trying to solve a very basic problem. I have a form with label/form item pairs. The labels should be on the left, and the form item should be to the right of the label. The next label should display on the next line. With this simple HTML:
<fieldset>
<label>Label 1:</label>
<input type="text" />
<label>Label 2:</label>
<input type="text" />
</fieldset>
This CSS should be sufficient:
label {
width: 200px;
text-align: right;
clear: both;
float: left;
}
input {
float: left;
}
However, what's happening instead is that although the second label clears the float and is rendered on the next line, the adjacent input is still shown on the first line.
Is there any workaround for this problem beyond adding more markup?
If you enclose the groups in a seperate div, the problem is solved. Of course you don't even need the clear then at all.
http://jsfiddle.net/Qh87k/1/
so I have a form that I have multiple input text fields as well as a select box or two and then 3 checkboxes. Everything lines up correctly in Chrome and looks great, then I look at it in firefox and everything except the checkboxes line up, they instead are center aligned in their area rather than being to the left like in Chrome. I have tried putting an extra div around it and everything but nothing seems to break it. Any help or errors that I am not seeing in the code?
Checkbox on the form
<div class="blueTable"> - this is for the rest of the form and table
<div class="checkbox"> - this is what I put in to override
<label>Is this a letter?</label>
<input type="checkbox" name="letter" value="YES" class="checkbox"/>
<label>Return label?</label>
<input type="checkbox" name="return" value="YES" class="checkbox"/>
<label>Save destination for future shipments?</label>
<input type="checkbox" name="save_destination" value="YES" class="checkbox"/>
</div></div>
CSS File
.blueTable input,.blueTable select{
float:left;
font-size:12px;
padding:4px 2px;
width:400px;
margin:2px 0 20px 10px;
text-align: left;
}
.checkbox {
text-align: left;
float: left;
vertical-align: bottom;
position: relative;
}
http://jsfiddle.net/MfNdF/ is this something you are going for?
.blueTable input gives your checkboxes width of 400 pixels which might cause the problem.
Try using a CSS and table hybrid layout. To align your page. This may help your web page show up better across more browsers especially ones that are not as CSS compliant as chrome.
Hopefully a picture is worth a thousand lines of code because I don't want to have to strip down all of the ASP.Net code, HTML, JavaScript, and CSS to provide an example (but I'll supply what I can upon request if someone doesn't say "Oh, I've seen that before! Try this...") [Actually, I did post some code and CSS - see bottom of question].
Here is a portion of a form page being displayed in Firefox:
The blue boxes are temporary stylings of a <label> tag and the orange lines are temporary border styles of the <div> tags (so I can see where they extend and break). The <label>'s are styled to float: left as are the <div's on the right. In addition, the descendant controls of the <div> are also float:left purely so they will line up on the top of the <div> (since there are some taller controls like multiline textboxes down below).
The radio buttons are generated by an ASP control, so they are wrapped in a <span> - also floated left since it is a descendant of the <div>.
Here is the same portion of the screen rendered in IE7:
There are a few minor rendering differences, but the big one that's driving me crazy is the extra white space beside the <input> controls! Note that the <span>'s around the radio buttons and checkboxes line up correctly.
Although they aren't shown, the same thing happens with drop-down lists and list boxes. I haven't tried wrapping the input controls in a <span>, but that might work. It's an ugly hack, though.
I've tried several of the IE7 workarounds for box issues and I've edited the CSS until I'm in pure voodoo mode (i.e., making random changes hoping something works). Like I said, I hope someone will look at this and say, "I've seen that before! Try this..."
Anyone?
Followup 1:
I'm using the XHTML 1.0 Transitional <DOCTYPE>, so I should be in standards mode.
Followup 2:
Here is a small snippet of the generated code for the above (the first control and the last control). Note that this code was generated by ASP.Net and then dynamically edited by JavaScript/jQuery.
<fieldset id="RequestInformation">
<legend>Request Information</legend>
<ol>
<li>
<label id="ctl00_ContentPlaceHolder1_txtRequestDate_L" class="stdLabel"
for="ctl00_ContentPlaceHolder1_txtRequestDate">Request Date:</label>
<div class="FormGroup">
<input id="ctl00_ContentPlaceHolder1_txtRequestDate" class="RSV DateTextBox hasDatepicker"
type="text" value="10/05/2004" name="ctl00$ContentPlaceHolder1$txtRequestDate"/>
<img class="ui-datepicker-trigger" src="/PROJECT/images/Calendar_scheduleHS.png" alt="..." title="..."/>
<span id="txtRequestDate_error"/>
</div>
</li>
--STUFF DELETED HERE--
<li>
<label id="ctl00_ContentPlaceHolder1_chkAppealed_L" class="stdLabel"
for="ctl00_ContentPlaceHolder1_chkAppealed"> Request Appealed?</label>
<div class="FormGroup">
<span class="stdCheckBox">
<input id="ctl00_ContentPlaceHolder1_chkAppealed" type="checkbox" name="ctl00$ContentPlaceHolder1$chkAppealed"/>
</span>
</div>
</li>
</ol>
</fieldset>
Here is the relevant portion of the CSS (I double checked to make sure this duplicates the problem):
div
{
border-style: solid;
border-width: thin;
border-color:Orange;
}
label
{
border-style: solid;
border-width: thin;
border-color:Blue;
}
.FormGroup
{
float:left;
margin-left: 1em;
clear: right;
width: 75em;
}
.FormGroup > *
{
float:left;
background-color: Yellow;
}
fieldset ol
{
list-style: none;
}
fieldset li
{
padding-bottom: 0.5em;
}
li > label:first-child
{
display: block;
float: left;
width: 10em;
clear: left;
margin-bottom: 0.5em;
}
em
{
color: Red;
font-weight: bold;
}
Solution!
Matthew pointed me to this page on IE/Win Inherited Margins on Form Elements and that was the problem. The input boxes were inheriting the left margins of all of their containing elements. The solution I chose was to wrap each <input> element in an unstyled <span>. I've been trying to keep the structure of the HTML as semantically sound as possible, so I solved it using a jQuery command in the $(document).ready() function:
//IE Margin fix:
// http://www.positioniseverything.net/explorer/inherited_margin.html
jQuery.each(jQuery.browser, function(i) {
if($.browser.msie){
$(":input").wrap("<span></span>");
}
});
Note that this will only add the stupid <span>'s on IE...
StackOverflow to the rescue again!
The input is inheriting the margins from the surrounding div and the ol. If you surround it with another tag like a span or a div, it should solve your problem.
Edit: You can find more information and workarounds at http://www.positioniseverything.net/explorer/inherited_margin.html