For some reason my checkboxes and dropdown arrows are not visible in chrome, however, they still work.
They are perfectly visible in IE. When I load the page in IE, then try loading the page in chrome, they usually appear until I refresh the page again in chrome.
Anyone know what the problem might be?
Reference image: http://i.imgur.com/Q66w6.png
A 'solution' to this Chrome problem is to
open Task Manager
refresh the page in Chrome while the Taks Manager is open in front of the browser.
I couldn't believe this would actually work when I read about it, but I've seen it with my very eyes. This issue apparently exists since the early versions of Chrome and still exists in current versions, though it only occasionally occurs. It seems to be permanently gone after this 'fix'.
In webkit browsers the following code will remove dropdown arrows.
select{
-webkit-appearance:none;
}
Checking in your browsers inspector will indicate if it's being applied in your case or not.
Found this question while having the same problem.
Setting:
input {
width:100%
}
was the cause of the problem for me. This:
input[text] {
width:100%
}
was what I wanted (leave checkbox widths unchanged) -- setting the width of checkboxes in chrome seems to make them disappear.
As user48956 mentioned; setting input width to 100% causes checkboxes to vanish in chrome.
I use bootstrap and often have forms where I want all inputs to stretch 100% and don't want to use bootstraps form methods and this issue still comes up.
If you have defined input {width:100%} you can put a width on the div containing the checkbox and it will fix. e.g.
<div style="display:inline-block; width:20px"><input type="checkbox" name="read_privacy_policy" id="read_privacy_policy" class="pull-left"></div>
<div style="display:inline-block">I have read and understand the Privacy Policy.*</div>
or you can set style="width:auto" on the input itself
I had the same issue
Try this css style supression all style that acts in the input checkbox element.
-webkit-appearance: checkbox!important;
I think it's a bug and it's still there. I use checkboxes in a ligthbox window and they don't show. I'm on OS-X using Chrome 21.
Related
I would like to resolve, in some elegant way, a design problem which only happens in Chrome.
When I wrap “input” type checkbox with div which has bootstrap class col-…. This div div is filled by checkbox, but in Chrome the checkbox also changes size (gets bigger)
I found a solution, which basically resolves problem, but is not ideal.
#media (-webkit-min-device-pixel-ratio: 0) {
[class*="col-"] input[type=checkbox] {
-webkit-transform: scale(0.5) !important;
}
}
JSFiddle example
Firstly, I need to make this rule for Chrome only, because according to MDN this not best practice.
Secondly, the change of scale not only affects the size of the check box, but also everything within the div. Due to that, I lose the feature, that customer must not click exactly into the check-box to get it checked.
Is there any better solution?
Well your problem is that in your code presented in the JSFiddle, you are using form-control class which has fixed height. Regarding FF and Chrome behaviour, it seems that only Chrome actually lets you to set the dimensions of checkbox using CSS...
I recommend you to check the Bootstrap docs and see how the checkbox is implemented in Bootstrap.
I can't get a input button to change its font size unless I change the background color.
this html:
<input type="button" id="startStop" value="start" />
and this css:
input#startStop{
font-size: 3em;
}
result in this:
which is exactly the same as with no styling at all.
Nothing I do to the css changes it: making it 60em; changing how I select it; they all result in the same, default-looking button.
I inspected it in Chrome, and the style is actually hitting the element, and not getting overridden:
But somehow the computed style isn't working:
(that's with a base font-size of 1em for the whole document. and, no, changing the base font-size has no effect)
The only thing that changes the font size it is if I give it a background-color:
input#startStop{
font-size: 3em;
background-color: white;
}
results in this:
Can anybody tell me what is going on?
EDIT: #Hashem Qolami, thanks for posting it in an external editor, which I should have done. When I look at your JS bin, it looks like this:
EDIT 2: it's browser specific.
The error is only occurring on Chrome, Safari and Opera, and only on Mac.
If renders correctly on Firefox for Mac and on all browsers (IE10, Chrome, Firefox, Safari, and Opera) on windows.
Indeed this only happens on WebKit-MacOS based browsers. Seems to be a WebKit restriction so that the Aqua appearance stays always so.
As long as the Aqua appearance is enabled for push buttons, certain CSS properties will be ignored. Because Aqua buttons do not scale, the height property will not be honored. Similarly font and color customizations will also not be honored. The overriding principle for push buttons is that you will never see a button that is some “half-Aqua” mix. Either the button will look perfectly native, or it will not be Aqua at all.
Source: https://www.webkit.org/blog/28/buttons
Which explains why setting a background makes font-size works; it breaks the Aqua appearance.
#pzin's response got me started on the right track. He's right in that anything that breaks aqua will get it done. The recommended way to handle it without having to specify a background color is this bad boy:
-webkit-appearance: button;
Setting a border property should also work. But I think -webkit-appearance: none; would be the best approach, as it "turns off" the Aqua appearance on MacOS browsers, so any other form control that Aqua inhibits CSS for would subsequently be style-able with your choice of CSS. Was meant to add this as a comment, but don't have enough reputation ;_;.
I see that you successfully had solved the problem, but I wonder, if the only problem is to make the button bigger, why sticking to font-size method while you can also change the button size by width + height or padding.
I need to print a page in IE8, IE9, and Chrome. It prints perfectly in Chrome, no so well in IE8 (have not tested IE9 yet).
The 3 major problems I'm facing with IE right now are:
Checkbox and radio button width is messed up and it has a border
Extra padding throughout the form, especially between label and field
Internal table borders do not show up, and the first column should be hidden
See the screenshots below. Why is this happening? I can't seem to fix it, I've tried changing the css several times. I know it is reading the CSS though.
Checkbox:
Extra padding everywhere:
No internal table borders:
UPDATE:
The form shows up correctly (table borders shown, padding correct, etc.) in both Chrome and IE. It prints correctly in Chrome. It does not print correctly in IE.
Please do not tell me to print the form another way. I've made a design decision to print it from the browser: it's what's best for my project.
1: You probably have something like
input {border: ...; width: ...}
which affects your checkboxes and radios. At least in Internet Explorer. You can fix this either by using
input[type=radio], input[type=checkbox] {alternating styles}
or by assigning specific classes:
input.radio, input.checkbox {alternating styles}
2: The padding you might get rid of by giving both the input-forms and the label right next to it
text-align: vertical
3: To solve the borders you should provide the CSS for that ;)
I added a simple table with borders to the page to test if IE not displaying table borders, or if my css was some how overridden. When that worked, I realized my table was being selected somewhere else by it's ID (and having it's borders removed). When I tried to add in the borders for printing, I was selecting the table by it's class name not ID.
I also realized the jquery.jqprint plugin was not including the doctype in the iframe it was printing. Now, it prints perfectly in IE8.
I have a WordPress site that I recently moved from one domain to another (using my host's dotnetpanel). When it went live on the new domain, it does not show up correctly in Internet Explorer. Previously, it worked well in all browsers. Specifically, it seems like parts of the stylesheet are just being ignored. It works fine on all browsers tested except IE.
Try putting the code here in and testing to see if it fixes your problem. What parts look like they're being ignored?
Maybe you have to reinstall some of your plug-ins?
I guess there are some wrong paths in the database or config-files.
Try to search database by db-admin-tool and all the files with an advanced text-editor with the option to search automatically in all files at the same time.
As far as I can see the style sheets are applied.
You have width: 100% and height: 100% on the links in the menu, which messes with their size in IE. Remove those styles.
The reason that the gradients doesn't show up is because they are filters, and the elements has to have layout for the filters to apply.
The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.
Ref: http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx
If you give the elements layout, the gradients will show up, for example:
.block h2 { width: 100%; }
I have a site that has a simple HTML button in a form. All browsers show this button correctly. However, in Firefox 2 and Seamonkey it appears just as a solid grey square that cannot be clicked on and that has no text.
<input id="getaudiobutton" type="button" value="Get Audio" onclick="convert()" />
For those of you that have Firefox version 2 or Seamonkey, please see my site
Thanks all
SOLVED
No idea why but what I did was increase the size of the div holding the button so that the button can be shown fully. There wasn't enough space for the button to be clicked. Firefox 2 and Seamonkey managed to find this a bit troublesome.
Thank you all for your help. :)
From what I can see just by viewing it in Seamonkey and looking at the contents of the page and your CSS, you may want to check the style for the div that the button is contained in. I can see the button in Seamoney, but it is cut off at the very top, only allowing about 1-3 pixels to show. I can click it as well.
My guess would be that since you are setting a static height of 34px for the style that is applied to the parent div of the button, it is cutting off most of the button.
I observe the same behavior as s13james (+1 for that) but have some more things I want to point out.
You may want to rethink your use of line-height and height there, as the wrapping of that input element to the next line with the combination of those values has a lot to do with your trouble.
I see you're applying the same style via id and class, however that style is declared only for use as a class:
div.w_span_auto{
background:url(../images/wr.png) top right no-repeat;
padding-right:18px;
height:34px;
line-height:34px;
text-align:left;
border:none;
}
(For an id, you'd need to have declared it as div#w_span_auto.)
I'm not sure why you're declaring it twice either. There's an identical declaration later in the same css file.
Cheers.
Are you sure JS is enabled on your copy of Firefox?
Do you really have to worry about FireFox 2? It also only has a 3% market share:
http://marketshare.hitslink.com/report.aspx?qprid=0
DO you need a type="submit", instead of type="Button"?