Here's a live demo of the issue on JS Fiddle. I have some jquery UI radio buttons, and by setting the font-family on the body element, suddenly spaces appear between the buttonset, ruining the appearance and connectivity of the buttons. They look like this:
Update: the bug is now happening in all browsers, though slightly different in each browser. In all cases the font-family attribute is the problem.
I included some minimum CSS/HTML from my site that causes the issue, the Themeroller CSS for my site. You can mess with the fiddle and you'll see the gaps disappear when the font-family tag is removed from the body tag. Note it doesn't have to be a body tag, it happens if you make it a div or anything else that applies to the radio buttons.
This one bit of CSS is enough to break it:
body{
font-family: Verdana, Helvetica, Arial, sans-serif;
}
Is there any way I can specify the font family for the parent elements without the jquery UI buttons breaking? Interestingly this font-family isn't being used, as the Jquery UI theme's CSS sets the radio button's font as well.
I couldn't tell you why it does it, but if you are happy just to add CSS code that fixes it then use this:
#radio input, #radio label {
float: left;
margin-right: 0px;
}
Edit
In response to your comment below - try adding !important to margin-right; it looks like it is being over-ridden.
#radio input, #radio label {
float: left;
margin-right: 0px !important;
}
JS Fiddle - http://jsfiddle.net/kwpGn/7/
Related
The context is I need to use select elements built from a framework that I would prefer not to change (respectively jqxComboBox and jqxDropDownList from jQWidgets), and use their built-in placeholders.
jqxComboBox creates an inner input for that with the attribute placeholder="my text", so it gets styled correctly in browser-dependant placeholders gray.
However jqxDropDownList creates an inner span with the attribute unselectable="on" that by default appears in the page's font color.
I'd like to style the jqxDropDownList accordingly, but the gray changes following the browser. Is there a consistent way to obtain the placeholder color that uses the browser, without having to declare a different rule for every one?
example: this gray is nice for Firefox, but not on Chrome (the difference might seem small here, but it is accentuated with our CSS).
body {
font-weight: bold;
}
input { /*just for the example*/
width: 100%;
}
input::placeholder { /*just for the example*/
font-weight: bold !important;
}
span[unselectable="on"] {
color: #777777 !important;
}
<input style=type="textarea" placeholder="native browser placeholder color"><br>
<span unselectable="on">testing placeholder color emulation</span><br>
<span>what I have currently in my jqxDropDownList</span>
EDIT: partially solved my problem by overriding placeholders color for all browsers following this post's accepted answer, but still interested for the sake of pure knowledge..
Try using color: unset to use the default color for given element.
I'm having some difficulties styling mdl-textfield.
Specifically, styling size and color the floating label, and height and color of the animation after pressing the input field.
Effectively, this is my starting point, as taken from the component list.
https://jsfiddle.net/2aznyc4n/1/
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" placeholder="Text here.">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
I am able to set the size and color of the floating label by adding into the label in the html
style="font-size:x-large; color:purple"
So is it some kind of bug that this has no effect when the label goes floating, if this is set in the css? If I set the style in the html and the css, then both of them suddenly has an effect. I just cant wrap my head around this.
If all possible, I want to avoid having styling in my html.
I have been digging through the source code, with no success in figuring out the styling of the mdl-js-textfield color and height.
Customization of MDL is a little bit tedious. At the beginning you can choose your primary and accent color and have a set of useful and beautiful componets, but when you need customize something a little bit, difficulties come out.
I digged for MDL source code in order to find what classes added color and font-size styling. I solved the need to adjust color and font-size of input text floating adding this hacking code in my css.
.mdl-textfield{ input[type="text"]{ font-size: 24px; color: #color500;} }
.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
font-size: 14px;
top: -5px; //Manages floating label fly
}
.mdl-textfield__label{ font-size: 24px; top: 20px; color: #color500;}
Normally the customization should be done with the custom CSS theme builde.
But if you prefer to use your own css you should use !important.
.mdl-textfield__input {
color: black !important;
}
For the pleaceholder text you need to use vendor prefix CSS:
::-moz-placeholder { /* Firefox 19+ */
color: red !important;
}
::-webkit-input-placeholder {
color: red;
}
I really struggled lots specifically with the bottom-border-color after the animation but thankfully after some research I could deduct a solution mentioned over here (it's prohibited to duplicate answers, so I rather put a direct link to it):
https://stackoverflow.com/a/43512625/1920145
Hope it helps many more people.
I'm working on a responsive site. After viewing it on a device running iOS5, I notice that all my h2 tags seem to display twice, one on top of the other. I checked it on a device with iOS6 and it looks better, but not on the iOS5. However, when I change my h2 tags to spans (changing them to display: inline-block) it seems to work fine as well.
I'm not doing anything seemingly out of the ordinary with my HTML or CSS, and I'm also not using a z-index anywhere in the document so would anyone have an idea what is happening?
<h2>Hello</h2>
h2 {
display: block;
font-family: "Segoe UI Light";
font-size: 36px;
color: #C41230;
}
Seems your problem could be a font weight rendering bug. It might be inheriting bold styling. See this SO post. You could try setting your font weight to normal for h1, h2, etc.
just a quickie...i am trying to change the colour of certain backgrounds within bootstrap.
i have removed the main background colour from the bootstrap css. So i am able to add my own. i have created a div with content and i want that background to be a different colour to the rest of the page. so assigning the background color to that div.
but its still white, even though i have removed the default background colour from the bootstrap
this is now the default body css for bootstrap
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
}
any ideas?
here is an an example of what I'm trying to say. even though i have added a id its not showing up
Think i have found the issue, but have no idea how or why they are here....most of my style sheets are in the 'other' folder??? any ideas why or how this happened?
Are you sure that main.css is being loaded? Is it listed in Chrome's Resources tab? If it is, is the latest footer definition in there? Your screenshot suggests that none of the footer properties are being applied, not just the BG colour.
Since the inspector screenshot references a copy of bootstrap.css that's on your production server I'm wondering if you're also loading this copy of your main.css file.
What is the usefulness of these 2 things in CSS reset?
What is the problem in resizing of input elements in IE and in which version?
and if legend color doesn't inherit in IE then how it can be solved adding color:#000;
/*to enable resizing for IE*/
input,
textarea,
select {
*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
color:#000;
}
The first rule actually doesn't apply on IE only, but on all webbrowsers. Normally you would like to define a global font in the body:
body {
font: 1.1em verdana, arial, sans-serif;
}
But this doesn't get applied (inherited) on the form controls in all webbrowsers. That rule would then apply (only) the font size on them as well. One way is to set the font to inherit on those elements:
input, select, textarea {
font: inherit;
}
But that doesn't work in IE6/7. Another way is to just explicitly include the elements in the rule:
body, input, select, textarea {
font: 1.1em verdana, arial, sans-serif;
}
That only the font-size is been set is probably because the YUI guys would like to keep the form controls their own browser-default font family (which is sans-serif for input and select and is monospace for textarea). The 100% is been used because IE6/7 doesn't support inherit.
As to the second rule: I am not sure what they meant here. I did a little test in IE6/7. The legend just inherits the color from its parent element. Maybe the actual problem lies somewhere else?