The below is in style sheet
select,input ,td a {border:1px solid green; width:25%;height:25px;font-size:20px;margin- left:.1em;}
input.myradio {border:none;width:0%;height:0%;font-size:0%;}
The below is in html
<td><input class="myradio" type="radio" name="poolstatus" value="Add">Add</input><td>
It's perfect in firefox but chrome and IE are not showing radio buttons? Why so?
It's because you have told the radio button to be 0% tall - which is 0px - which is not there.
You can override this by telling the height and width to be 'auto' which will reset them (unless there's a rule which is more specific somewhere else in the stylesheet)
input.myradio {
border:none;
width:auto;
height:auto;
}
My guess is the "width:0%;height:0%" in your input.myradio class. you need a width and height.
Try this:
input.myradio {border:none;width:1em;height:1em;}
Why do you have a height and width specified of 0% for them? I'm guessing that is why IE and Chrome are not showing the radio button,s because they have a size of 0 pixels.
You need to put your radio button within <form> tag and they will appear in Chrome and IE:
<form><input type="radio" /></form>
Related
I'm trying to make radio buttons look the same in both IE and Firefox.
I have the following example:
<head>
<style media="screen" type="text/css">
html, body, div, form {
margin: 0;
padding: 0;
}
input{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<span style="font-family:Arial; color:#000000; font-size:8pt;">
<input type="radio" name="blah" value="7">MyWord<br>
</span>
</body>
In IE the radio button has an extra white space where the margin should be 0. So the text, which should be really close to the radio, is not.
I know I that if I use the DOCTYPE statement it works, but due to other problems, I can't use it.
Is there any other way to fix this problem?
Set the width of the radio button element to a sufficiently small value:
<input type="radio" name="blah" value="7" style="width: 13px">
The spacing you see is neither padding nor margin but part of the rendering of the radio button (as you can see if you press F12 in IE, then find the element under “HTML” and look at the layout description—the element).
It seems that browsers generally implement radio buttons and checkboxes as 13 × 13 pixels (in total dimensions), except IE in Quirks Mode, which uses 20 × 20, unless the dimensions are set otherwise in CSS.
I'm trying to write a contact form however my label widths aren't being forced in Firefox or Chrome - IE seems to be working okay though (for once). Here's my HTML
<form name="" id="" action="" method="post">
<div id="my_form">
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</div>
<div>
<form>
and here's my CSS
#my_form div label{width:200px;display:inline-block;}
any ideas how I can force the label width, they seem to collapse
Try this:
#my_form div label{width:200px; display:block; float:left;}
See this running (http://jsfiddle.net/jrpab/), it works fine in Chrome.
try:
#my_form label{width:200px;display:block; clear:left; float:left; }
#my_form input{display:block; float:left; width:auto;}
After some head-scratching and research, I've found it's because
labels are inline elements, which according to CSS documentation
should ignore width styling. So, as usual, IE is doing it wrong and
Chrome and Firefox are doing it right.
...
set its display property to something other than inline. I've found display: inline-block is the best for achieving what you're going for.
http://doctype.com/firefox-chrome-ignore-widths-my-labels
How to change background color of readonly textbox in css
There are too many unkowns in your question. Which browser do you want support? If you say textbox you seem to use ASP.NET, but there is no tag at you question.
Generally said, the behaviour between the browsers are different.
Consider the following html
<html>
<head>
</head>
<body>
<input type="text" disabled="disabled" value="This is a test" style="background-color:Black; color:Lime;" />
</body>
</html>
IE8 renders the background color properly, but disabled controls will always have gray text with shadows. Mozille Firefox beside that renders the control correct and i am sure there will be difference all over the different browsers and even between the browser versions (IE6 would interprete the color values correctly too).
If you want to have a html regardless which browser you use, you have to use a span or other inline element, to format it with border and colors you want, instead of using a input element.
You could use
input[disabled="disabled"] { background:url("url-to-background-image.jpg") no-repeat #fff; }
and for older browser that doesnt support this selector, you can use jQuery to apply a class
$(document).ready(function() {
$("input[disabled="disabled"]").addClass('disabled');
});
And unless it's disabled all the time, you should provide js for removing the class along with js for enabling it.
you can try this
input:-moz-read-only { /* For Firefox */
background-color: yellow;
}
input:read-only {
background-color: yellow;
}
Hi This will surely work for your code. Just try this..
<html>
<head>
</head>
<body>
<input type="text" disabled="disabled" value="JavaScript is the best" style="background-color:Black; color:green;" />
</body>
You can change the background color in css using this code but before that make sure your html page is linked with your css page.
Body {
Background-color: red;
}
Hope this code will work for you.
OK here is what I found out, when I assign height to all my form elements, they will not be aligned horizontally, when they actually should.
Chrome rendered this OK, FF pushed the form button too far up.
Is there an elegant solution to this?
<form>
<input class="input_text" type="text" style="height:40px" value="some text">
<select style="height:40px">
<option value="0">0</option>
<option value="1">1</option>
</select>
<input type="submit" value="Search" style="height:40px">
</form>
Make sure the button has no padding/margin:
style="height:40px;margin:0;padding:0"
Each browser does its own thing regarding padding and margin.
Find out more about reset CSS and why/how to use them.
This is vertical align, not horizontal. Looks like this is bug in FF. As the work around add the "vertical-align:top" to the button
you can try to ditch input type button and use <button type="submit">Hello Button</button> then reset your form elements.
by using button tag you will have option to add nested elements. like <button><span>Funky Button!</span></button> for background image tricks and so on.
reset for form elements may look something like this:
/*remove ie side spacing(paddings)*/
button {position:relative; border:0; padding:0; cursor:pointer; overflow:visible;}
/*remove extra padding for firefox*/
button::-moz-focus-inner {border: none;}
button span {position:relative; display:block; white-space:nowrap;}
/*fix for webkit (safari-chrome)*/
#media screen and (-webkit-min-device-pixel-ratio:0) {button span {margin-top: -1px;}}
input {border:0; margin:0; padding:0;}
textarea {border:0; margin:0; padding:0;}
then you can add your borders styles backgrounds as you want and they should look identical in almost every modern browser
I've found this to be a bug in Firefox.
In the past I've fixed it with
1: a firefox specific hack.
2: not setting the height of the button ever. It remains vertically centered in all browsers.
I have a submit button and am styling it using the following css:
.subm
{
background-color:Transparent;
background-image:url(Images/Button_Send.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;}
.subm:hover
{
background-color:Transparent;
background-image:url(Images/Button_Send_Over.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;
}
Here is the html:
<input type="submit" class="subm" value="" />
Nothing surprising. However, what annoys me is that when the submit button is clicked in IE it moves the image up a couple of pixels cutting them off which makes it look, hmm, good word, 'naff.' How can I compensate or stop this?
I have tried expanding the image and leaving a couple of blank pixels at the top but it still does the same thing!
Thanks R.
I had an issue with my buttons moving around when they were clicked in IE after I styled them too. The solution I found was:
1.) Give your button(s) an equal margin
2.) Place the button(s) in a wrapper division that you can position to your liking
.subm {
background-color:Transparent;
background-image:url(Images/Button_Send.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;
margin:10px; //maybe more maybe less
}
<div style="position:...;float:...;">
<input type="submit" class="subm" name="myButton" id="myButton" />
</div>
Although I have to mention that in my particular case I'm styling my buttons by ID and not applying a class so you might have issues with multiple buttons using the .subm class. THIS WORKED FOR ME IN IE THOUGH.
Try replacing the input with the button tag.
<button type="submit"><img src="..." alt="..." /></button>
and see if this doesn't accomplish it. You would need to adjust your hover effects though which might prove to require either just putting text inside the button and using a negative text-indent, or a javascript hover event to change the referenced image.
Another option is using javascript to call the form submit on a normal link, as buttons typically have a click animation.
Just a note, you could probably get more consistent results by adding a background position, and all of this you can shorthand as well
.subm:hover
{
background: transparent url("Images/Button_Send_Over.png") top center no-repeat;
}
Yet another maybe more ideal option, use the input type image instead of submit.
<input type="image" src="..." Value="Submit" />
I am pretty sure this describes the bug and has some solutions for you:
Fixing the IE8 Form Button with Background Image On Click CSS Bug