I'm working on some cross-browser form styling and have hit upon a snag in ie7.
If you look at my linked fiddle here in ie7 you will see that the input on the first line is offset. The span styled similarly below it is not subject to the same problem.
The system I'm testing works on every other browser I've tried.
Does anyone have a fix to this or indeed a simpler way to style it?
The answer is to wrap a div around all field elements undoing the hasLayout bug.
More info can be found here: http://my.safaribooksonline.com/book/web-development/css/9780321703392/the-usual-suspects/ch04lev1sec3
<form action="#" class="form-horizon">
<fieldset>
<legend>Test Form</legend>
<!-- div fixes hasLayout inherited margin bug in ie7-->
<div>
<label for="input-focused">Focused</label>
<input type="text" id="input-focused" class="focus" value="focused input" />
<label for="input-no-edit">Non editable</label>
<span id="input-no-edit" class="no-edit-input">none editable</span>
</div>
</fieldset>
</form>
Related
the problem is simple to explain, i have done a form, but the radio buttons are not showing in safari, and in chrome they are showing but they're not clickable.Is it a problem of css? The radio buttons are just as normal as they should:
<input type="radio" name="message" value="x" checked> Option
What am I doing wrong?
Agnese
Check if there are any elements overlapping, maybe you used floating without a clearfix which means your browser does not get the height of your form?
<input type="radio" name="message" value="x" checked="true"> Option
Try this. The checked needs to be set and not left empty.
Refer to the image below to see it in action. Tested on W3Shools itself.
I am using Twitter Bootstrap for Rails, in a 3.2 app, and am not seeing the checkboxes appear.
If I look at the same page in just straight HTML (with checkboxes hardcoded in, and using the regular Bootstrap assets) it works fine.
The HTML code is produced correctly, I believe...e.g.:
<div class="field">
<div class="control-group check_boxes optional"><label class="check_boxes optional control-label">Listing Type</label><div class="controls"><label class="checkbox"><input class="check_boxes optional" id="search_listing_type_id_1" name="search[listing_type_id][]" type="checkbox" value="1" />For Sale</label><input name="search[listing_type_id][]" type="hidden" value="" /></div></div>
</div>
Here is the Rails Code:
<%= f.input :listing_type_id, collection: ListingType.order(:name), as: :check_boxes, label: "Listing Type" %>
Here is a live example. Right beside the text "List square footage", should be a checkbox. Scroll down to amenities, and there you will see a list that obviously should have checkboxes.
This doesn't work in development either.
Not quite sure why it's not showing up.
Thoughts?
Looks like uniform.js is setting the opacity of the checkbox to 0.
Try disabling uniform.js if you're not using it.
Update: It also looks like you're getting a 404 on a sprite image? Probably a uniform theme sprite image?
GET http://realty-cloud.herokuapp.com/img/sprite.png 404 (Not Found)
Another Update: This is definitely the problem. Uniform works by making the opacity of the input 0, so that it's invisible, but still clickable, and changing up the markup a little bit, so it looks like this.
<div class="checker" id="uniform-listing_amenity_ids_4">
<span>
<input class="check_boxes optional" id="listing_amenity_ids_4" name="listing[amenity_ids][]" type="checkbox" value="4" style="opacity: 0;">
</span>
</div>
And it sets a css rule on div.checker span:
div.checker span {
background-image: url(../img/sprite.png);
}
That image is missing, so the input appears to be invisible.
actually the problem in you have the check boxes but its hidden, due to the margin property
input[type="checkbox"] {
float: left;
#margin-left: -20px;
}
so remove or change the margin size
see below, FF with firebug
$('input[type="checkbox"]').css("visibility","visible");
I just started with twitter bootstrap.
I want to create a disabled form field. In the documention I found this snippet:
<input type="text" placeholder="Disabled input here..." disabled>
But in IE9 the placeholder doesn' work. When I use the value attribute to set the content it works (and overwrite the palceholder text, which worked in other browsers like chrome).
There is an alternative way without using the input element:
<span class="uneditable-input">Some value here</span>
This also works in IE9 and chrome. Which solution is better (compatible with old browsers, like IE8, 7 (and 6) ?
I found out, when I want to use the Prepended and appended inputs of twitter bootstrap
I must use the input element. It doesn't work with the span element.
Example:
<div class="input-prepend">
<span class="add-on">#</span>
<input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
<div class="input-append">
<input class="span2" id="appendedInput" type="text">
<span class="add-on">.00</span>
</div>
IE 7/8/9 doesn't support the HTML5 placeholder. The best solution must be to use a script/plugin that provide the functionality (when it does not exist)
See https://github.com/miketaylr/jQuery-html5-placeholder
I also have had great experiences with http://jquery-watermark.googlecode.com/
They both use the HTML5 if it is available, and emulate it if it's not.
They are incredible simple to use. To use watermark for instance, just include it and add a line to your document.ready()
$("#my-input").watermark('default text');
<span class="uneditable-input">Some value here</span>
is better imho..
Reason- it will act as expected in new and old browsers and it doesn't depend on any external script but only css style uneditable-input
When you can simply echo your value in a span tag than why to use a disabled form field..??
The placeholder attribute is HTML5 and does not work in many browsers, especially older ones, which is why it doesn't work in IE9. (Microsoft doesn't follow standards even in IE9.)
If your question is if a span would be more compatible than the placeholder attribute, then yes it is. A span should be supported by all browsers.
You could go with the javascript alternative...
<input type="text" placeholder="Disabled input here..." onfocus="this.blur()" />
I have a search textbox and two image buttons on a page I created with ASP.NET.
When I look at the page with either IE8, Google Chrome or Opera, the textbox does not align with the two image buttons. The buttons appear higher than the textbox and I can't tell why.
Here is the key markup:
<div id=searchbar>
<div id=Panel1
onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')">
<input id=txtSearch type=text name=ctl00$txtSearch>
<input id=btnSearch title=Search src="Test_files/search.png"
type=image name=ctl00$btnSearch>
<input id=btnAdvanced title="Advanced Search" src="Test_files/adv.png"
type=image name=ctl00$btnAdvanced>
</div>
</div>
NOTE: I realize there are a few strange things here such as no quotes around the ids. But there ARE quotes around them in my source. The above snippet is from saving the content from IE and it made a number of changes to the markup.
I also posted the same code at http://www.blackbeltcoder.com/Test/Test.htm if anyone would be willing to take a look. The issue is with the search controls to the right of the black bar near the top.
Thanks.
Try
vertical-align:text-bottom;
on the elements that are too high. It's a common problem. You can try out other options for that CSS property too if that isn't quite right. Have a look here
just add
vertical-align: middle;
to the the input tags css and that should solve the issue
I'm styling a form that was already marked up (made some markup changes), and I normally work in Firefox to style so I can use firebug and the web developer toolbar.
On this project, I noticed that my styles are displaying quite differently for one particular area (several elements) in webkit based browsers Chrome and Safari, than in Firefox (we won't even get into Internet Explorer, although it is siding with the Firefox display).
I can't figure out though why the styles are displaying so differently. Normally there is some rule that I'm neglecting that Firefox just takes for granted, and the others need it specified. But here I'm not getting why it's displaying this way. In particular I'm referring to the bottom area of the form where users can enter their contact info, then submit the form. I'll attach screen shots for reference as to the discrepancy.
Here's the URL so feel free to check it out on your own. Although be advised that this is a production page (already released) so if you try out the form, you WILL BE added to CURE's contact database.
http://www.helpcurenow.org/survey2010
Here's the screen shots:
Firefox (the way I intend it to look) alt text http://static.helpcurenow.org/images/test/firefox.jpg
Chrome, and then Safari - strange change to submit button alt text http://static.helpcurenow.org/images/test/chrome.jpg
alt text http://static.helpcurenow.org/images/test/safari.jpg
As a bonus, if anybody wants to help me with figuring out why on earth IE7 wants to not show the background behind the questions only, and how to fix that I would be much obliged!
Thanks very much.
Your <ol> is not closed, which makes webkit place the submit button inside the <fieldset> in an attempt to fix up your code.
FF and Webkit browsers do have a few differences, I have encountered them as well, especially with forms!
I solved it by splitting my CSS to target the two browsers with the CSS Browser Selector script. Worked wonders, just set some things differently for Webkit and fixed the whole thing.
Do you have a live example or some source code to post up so we can help you more with your IE7 issues as well?
Hope that helps.
Edit:
<ol>
<li class="contact-info">
<label class="field-required" for="first_name">First Name</label>
<input type="text" size="35" maxlength="250" name="first_name" value="" id="first_name" />
</li>
<li class="contact-info">
<label class="field-required" for="last_name">Last Name</label>
<input type="text" size="35" maxlength="250" name="last_name" value="" id="last_name" />
</li>
<li class="contact-info">
<label class="field-required" for="email_address">Email Address</label>
<input type="text" size="35" maxlength="100" name="email_address" value="" id="email_address" />
</li>
</fieldset>
<!--TransactionFields section end-->
<script language="JavaScript" type="text/javascript">
...
</script>
<div class="button-row">
<input type="button" name="SubmitButton" id="SubmitButton" value="Submit" onclick="SubmitForm425952(form);" class='HtmlButton' />
</div>
</form>
<!--form javascript-->
<script language="JavaScript">
...
</script>
NO OL
</div></td></tr>
</table>
</div>
<!--End Featured Content-->
Your <ol>hasn't been closed after the second script tag.
You may have forgotten -moz specific css rules.
For example - to use box-sizing you may have to specify -moz-box-sizing
Have you used browser reset css. Different browsers have different default styles for various elements, the reset CSS resets all these default styles so that stuff looks similar in all browsers.