I am using a condensed font in Cufon. When the page loads, my menu is too wide and wraps. Then Cufon replaces the font and it looks fine. To reduce the visual distraction, I want to set the font size smaller and then have Cufon change the font size when it displays.
Currently the font size is set by the div containing the menu. Here is the CSS for the menu container:
.header_menu_block
{
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
margin-top: 3px;
/*margin-left: 238px; ie 6 can't handle, see margin block below*/
float: left;
text-align: left;
font-weight: normal;
font-size: 14px;
color: #FFFFFF;
height: 41px;
width: 991px;
}
The Cufon replacement code looks like this:
<script type="text/javascript">
Cufon.replace('.header_menu_block_col_menu ',
{ color: '#ffffff',
hover: {color: '#204966'}
} );
</script>
I've tried setting the CSS font size to 12px and then using the following Cufon code, but it does not work:
<script type="text/javascript">
Cufon.replace('.header_menu_block_col_menu ',
{ color: '#ffffff',
hover: {color: '#204966'},
font-size:'14px'
} );
</script>
Does anyone know how to do this?
You could try using the set() method. I find that this works.
<script type="text/javascript">
Cufon.set('fontSize', '14px').replace('.header_menu_block_col_menu ',
{ color: '#ffffff',
hover: {color: '#204966'}
} );
</script>
Although the manual explicitly suggests not using the font size.
https://github.com/sorccu/cufon/wiki/API
Let me guess, you never see the underlying font in non-IE browsers, right? The non-cufon appears briefly first in IE? I've been dealing with the same issue and I solved it by having the div with the text fade into view with jQuery. The fade time can be set to appear very fast--200ms in this example, I think you can make it fade-in even faster.
$(window).load(function(){$(".header_menu_block_col_menu").fadeIn(200);});
Don't forget to set the CSS for that div to display:none for the fade-in to work...
Of course, if your viewer has Javascript disabled, then nothing will appear--but what percentage of visitors to your web site have js disabled?
And, worried about your Google ranking with display:none? Read more on Google Groups.
I did it changing my CSS as below
.cufon-active h1 { /* for Cufon.replace(‘h1′) */
font-size: 3em;
color: #FF0000;
}
Related
The TinyMCE 4 button for Remove Formatting is , which is certainly not intuitive to me. I'd like to make the button face something more obvious, like by, say assigning an image to it. But I'm not finding anywhere to change the button face. The markup assigned to the button is
.
I'm not sure how that gets that Tx symbol on the button, but there it is.
Thanks for any help.
In skin.min.css change
.mce-i-removeformat:before {
content: "\e01d";
}
to something like
.mce-i-removeformat:before {
background-image: url("http://i.stack.imgur.com/0rzf2.png");
background-size: 15px 15px;
background-repeat: no-repeat;
}
You can probably remove the background-size and background-repeat if you make your image the right size
If you don't want to edit the css directly, you could just make a new css file and load it after the default one to override the settings. If you did this, you would have to override the contents to remove the original icon
These icons come from the tinymce font. for me in the tinymce source i have the fonts at
tinymce/skins/lightgray/fonts/tinymce.woff|ttf|etc
If you added your own font file withyour own icon it should allow you to change the icon
If you inspect the css you'll notice there are two parts that control the icons being used
On the ::before inside the tag
.mce-i-italic:before {
content: "\e02b";
}
on the i tag itself
.mce-ico {
font-family: tinymce, Arial
}
both comefrom skin.min.css
What do you say that instead of new image you use :after pseudo element and remove :before one.
This is how it would look
https://jsfiddle.net/nj6yn4bq/4/
And the code
<button><i></i></button>
i:before { display: none; }
i:after {
content: 'FMT';
text-decoration: line-through;
font-style: initial;
font-size: 15px;
}
button {
background: linear-gradient(#FFF,#E0E0E0);
padding: 0.7em;
border: 1px solid #DEDEDE;
border-radius: 3px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22);
}
I have some CSS:
fieldset {
border-radius: 5px;
border: 3px solid blue;
padding: 5px;
margin: 0em;
}
legend {
font-weight: bold;
color: green;
}
#myform{
width: 330px;
margin: 0em;
}
body {
font-family: Arial, sans-serif;
}
When I embed it with <style>, it works perfectly fine:
But when I put the same CSS into a stylesheet and import it using <link>, I get some random whitespace:
I have removed the form elements completely, and there is still whitespace (although if I keep them in, there is considerably more of it). I used the Chrome developers console to check form and body height using $(body).css("height") (and the same for the form), and it gives me a number which is way too small to include the whitespace, but seems to match the height if the whitespace is ignored. Where is this coming from?
This seems to be a bug, when changing the margin of the body back and forth in the developers console it gets right again. Setting this property in the CSS doesn't have any effect at all.
A measly workaround would be creating a javascript file for your popup, like popup.js, and then change the margin in there after the popup window is loaded:
document.addEventListener('DOMContentLoaded', function() {
document.body.style.margin = '8px';
});
I took 8px as value because that's the standard value of a Chrome popup:
You should consider reporting this bug to the Chrome issues list.
put CSS with !important keyword
i.e.
#myform{
width: 330px !important;
margin: 0em !important;
}
I have followed instructions verbatim using border:none and background:transparent, but a border still shows in the my text areas. I am using a background image to customize the look, but can not seem to remove the border.
website in question
http://www.officeyoganyc.com/
markup
<div class="fieldHolder">
<div class="attributeinput1"><input type=text name=email value="email" size="16">
<script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script></div>
</div>
css
.fieldHolder
{
width: 137x;
height: 24px;
background: url(http://www.officeyoganyc.com/themes/zen/zen/images/textarea.png) no-repeat;
margin-left: 209px;
margin-top: 162px;
}
.attributeinput1
{
border: none;
color: #000000;
background: none repeat scroll 0 0 transparent;
color: #000000;
height: 22px;
margin-left: 5px;
margin-top: 5px;
width: 170px;
}
This selector:
.attributeinput1 {
Only styles the <div>. You want the <input /> inside the <div>:
.attributeinput1 input {
By the way, the input tag is self-closing:
<input ... />
Your site might look funky in IE if you omit the />, as it might be treated as the beginning of a block element.
Also, one more thing (just a nuance in HTML), the language= attribute in the <script> tag is depreciated (i.e. unsupported and old). You can safely omit:
language="Javascript"
in your <script> tags.
If you use Google Chrome or Firefox, there is a really useful tool you can use. In Firefox, it's called Firebug. In Google Chrome, it's called something like Inspector.
They both allow you to "inspect" the webpage's layout and see what CSS properties affect what elements.
Here's what I mean. Look at the right-hand-side:
I used this to confirm that your CSS wasn't being applied properly. To activate it, right click on any part of a webpage and click "Inspect".
Hope this helps!
You have too many attributes for your background and border definitions.
This should work.
.attributeinput1 input {
border:0;
background:none;
}
If not then try
.attributeinput1 input {
border:0!important;
background:none!important;
}
I want to use an image for the background of a select/dropdown. The following CSS works fine in Firefox and IE, but does not in Chrome:
#main .drop-down-loc { width:506px; height: 30px; border: none;
background-color: Transparent;
background: url(images/text-field.gif) no-repeat 0 0;
padding:4px; line-height: 21px;}
select
{
-webkit-appearance: none;
}
If you need to you can also add an image that contains the arrow as part of the background.
What Arne said - you can't reliably style select boxes and have them look anything like consistent across browsers.
Uniform: https://github.com/pixelmatrix/uniform is a javascript solution which gives you good graphic control over your form elements - it's still Javascript, but it's about as nice as javascript gets for solving this problem.
Generally, it's considered a bad practice to style standard form controls because the output looks so different on each browser. See: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ for some rendered examples.
That being said, I've had some luck making the background color an RGBA value:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #d00;
}
select {
background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0;
padding:4px;
line-height: 21px;
border: 1px solid #fff;
}
</style>
</head>
<body>
<select>
<option>Foo</option>
<option>Bar</option>
<option>Something longer</option>
</body>
</html>
Google Chrome still renders a gradient on top of the background image in the color that you pass to rgba(r,g,b,0.1) but choosing a color that compliments your image and making the alpha 0.1 reduces the effect of this.
You can use the CSS styles below for all browsers except Firefox 30:
select {
background: url(dropdown_arw.png) no-repeat right center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 90px;
text-indent: 0.01px;
text-overflow: "";
}
Updated
Here is a solution for Firefox 30. There is a little trick for custom select elements in firefox :-moz-any() CSS pseudo class.
I am having some trouble with a font size with CSS. Below you see I have .post I have < pre > tags that are nested inside of the post class so should the css I have for the pre tags work below? It is not working but I can't figure out why? The text inside my pre tags end up being 15px instead of 12px
.post {
width: 100%;
clear: both;
padding: 10px 0;
border-bottom: #CBCBCB 1px solid;
background: url(images/post_element.gif) no-repeat 126px 21px;
font-family: arial;
font-size: 15px;
}
.post pre{
font-size: 12px;
}
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
.post pre{
font-size: 12px !important;
}
Should work, but to answer your questing we need to view all html + css because it really depends...
In a vacuum, that code should work. However, base tag styling can vary browser-to-browser and <pre> tends to be a bit of an odd one. My first thought is that some other style is overriding it.
Have you used Firebug (or some other developer console) to take a look at the styles being applied and the computed style for the element? That should put you on the right track.
This was a weird issue, I had to end up changing the class and font size for all the other text, everything except the pre tags to get it to finally quit resizing after page load from my JS syntax highlighter