Related
I am trying to change the style property which is set in the inline in the HTML. I'm using clickfunnels as my landing page builder and I can only add CSS rules.
My issue is that when you view the site on mobile there is extra empty space to the right of the page (see screenshot).
I troubleshooted it in the console to find out that if I manually change the property of the overflow to auto it solves the issue.
Since then I've tried to add various type of custom css (disclaimer I'm not familiar with this) but with no success.
What I've tried to add to the css:
html.style.property={overflow:auto;}
#html.style.property={overflow:auto;}
.html.style.property={overflow:auto;}
grammarly-btn {display:none!important;}
#html{overflow:auto;}
#clickfunnels-com{overflow:auto;}
#wf-proximanova-i4-active{overflow:auto;}
#wf-proximanova-i7-active{overflow:auto;}
#wf-proximanova-n4-active{overflow:auto;}
#wf-proximanova-n7-active{overflow:auto;}
#wf-active{overflow:auto;}
#wf-proximanova-i3-active{overflow:auto;}
#wf-proximanova-n3-active{overflow:auto;}
#elFont_opensans{overflow:auto;}
#wf-proximanovasoft-n4-active{overflow:auto;}
#wf-proximanovasoft-n7-active{overflow:auto;}
#wf-proximasoft-n4-active{overflow:auto;}
#wf-proximasoft-i4-active{overflow:auto;}
#wf-proximasoft-i6-active{overflow:auto;}
#wf-proximasoft-n6-active{overflow:auto;}
#wf-proximasoft-i7-active{overflow:auto;}
#wf-proximasoft-n7-active{overflow:auto;}
#bgRepeat{overflow:auto;}
#avcHn2VQJenBvoR5hilPG{overflow:auto;}
getElementByID.html{overflow:auto;}
getElementByID.html='overflow:auto';
The element in the source view is this:
<html lang="en" class="clickfunnels-com wf-proximanova-i4-active wf-proximanova-i7-active wf-proximanova-n4-active wf-proximanova-n7-active wf-active wf-proximanova-i3-active wf-proximanova-n3-active elFont_opensans wf-proximanovasoft-n4-active wf-proximanovasoft-n7-active wf-proximasoft-n4-active wf-proximasoft-i4-active wf-proximasoft-i6-active wf-proximasoft-n6-active wf-proximasoft-i7-active wf-proximasoft-n7-active bgRepeat avcHn2VQJenBvoR5hilPG " style="overflow: initial; background-color: rgb(252, 213, 213); --darkreader-inline-bgcolor:#2f251e; font-family: Lato, Helvetica, sans-serif !important;">
here is a screenshot better describing my issue:
screenshot of the issue
If you are trying to use JavaScript to apply styles to your HTML, you need access the specific style property of your html that you are trying to change.
getElementByID.html='overflow:auto'; won't work.
You should write something like document.getElementbyId('your_id').style.overflow = 'auto'
If you are just trying to select your HTML entirely then you don't need to use getElementById but can rather use a
document.getElementsByTagName('html')[0].style.overflow = 'auto'.
Another alternative is using an external stylesheet and implementing media queries to adjust for mobile view. Here is how to add an external stylesheet.
See the snippet for an example of a media query in CSS. is some example CSS.
html{
background-color: pink;
}
#media only screen and (max-width: 300px) {
/* when screen is this size or smaller, background color will change */
html {
background-color: orange;
}
}
to fix your issue of white space on the right, study more about Responsive Web Design.
in general, I would put all my body in one container and set its margin to 50% of both sides.
I have a text that is uppercase, e.g. ABC.
As it is uppercase, all characters have the same height.
I also have a container (div) with fixed height, e.g. 100px.
How do I make this text fill it vertically, so each letter is exactly 100 pixels high?
I tried font-size: 100px, but it does not fill the container (there are gaps above and below).
See http://jsfiddle.net/6z8un/1/ for an example.
UPDATE 1:
Let's assume all characters actually have the same height (difference either does not exist or is negligible). Otherwise the question does not make much sense.
UPDATE 2:
I am pretty sure it can be solved using https://stackoverflow.com/a/9847841/39068, but so far I had no perfect solution with it. I think ascent and descent are not enough, I would need something else for the top space.
line-height http://jsfiddle.net/6z8un/2/ will not solve the problem because this will not remove the whitespaces. You could apply the size by hardcoding (for me it fits with font-size of 126px) But this is different to every user (sans-serif can be configured by user/system/browser)
Windows default sans-serif font MS sans serif is different to Droid sans serif on Android or DejaVu Sans on Ubuntu.
To solve this problem, you could set a font to default, like Times New Roman, but not every system does have this font by default.
To solve this, you could use a custom font imported from a server like htttp://google.com/fonts
but not every browser does support custom fonts.
I think the only way to solve this is to use an image.
But custom fonts should do their job on modern browsers too :) (e.g.: http://jsfiddle.net/6z8un/5/ )
Is this ok?
http://jsfiddle.net/6z8un/4/
HTML:
<div><span>ABC</span></div>
CSS:
div {
height: 100px;
background-color: #ddd;
font-family: sans-serif;
}
span {
font-size:136px;
margin-top:-25px;
display:inline-block;
};
Use this code. I hope this can help you.
<div class="outer"><div class="inner">ABC</span></div>
.outer {
margin: 0;
padding: 0;
height: 75px;
overflow-y: hidden;
}
.inner {
font-size: 100px;
background-color: #ccc;
font-family: sans-serif;
margin-top: -18px;
}
Note: As I know whenever we use font-size the upper and lower gap is also the part of height. I mean font-size = upper gap + actual height of font + lower gap. So if we want 100px div then use font-size larger than 100.
So far I made a small script that measures letter heights using canvas (would be a good thing to put on GitHub I suppose).
It is currently slightly unprecise, mostly because of caching.
I have published it as a library on GitHub, see here: https://github.com/ashmind/textmetrics.
Unfortunately I did not have time to make demo work as a GitHub page yet, so I can't link to it.
If web designer has a full control over the entire code, it is easy to use browser default font - just don't change any font style and you got it.
However if there is not a full control over it and for example there is some font-related style defined on html or body element, or font-related CSS style for * { ... }, then there is a need to redefine font style to not inherit modified styling.
Is there any way, CSS, pure JavaScript or jQuery solution that would allow explicitly set browser default font for specific element?
Unfortunately, there is no simple "initial value" for font-family. It is, as you know, user-agent dependent.
Perhaps the closest you can come is by using a font keyword. font-family:serif; will use whatever the browser considers to be the default serif font. font-family:sans-serif; is the same, for sans-serif.
This is the closest I can suggest, sorry!
Yes. Do
.my-selector {
font: initial;
}
Well, I understand your requirement sounds simple but UNFORTUNATELY this is just a limitation of web technologies. We can not read browser's / system's font using either CSS or jQuery in any way.
The fonts rendered either by browser or system can not be read by web application. It is not designed that way. All we can do is apply font-family:serif or something similar to that.
I tried couple of POC for you but I could not retrieve the browser default settings.
All we can do is create a new ticket in W3C for font-family reset and let's keep hoping that they include something like that in future..
I would still do some digging for you and get back to you if I find something. This definitely is one very important requirement..
I dealt with such situations before but the other way. Just like overriding with the required font.. That's it!
However,
There is an alternative for this. I won't say it is the best way but we can try this :
Prpeare a JavaScript that reads the user agent, something like this..
var setDefaultFont = {
Android: function () {
$('*').css( "font-family", "//FONT USED IN ANDROID BROWSERS" );
},
BlackBerry: function () {
$('*').css( "font-family", "//FONT USED IN BLACKBERRY BROWSERS" );
},
iOS: function () {
$('*').css( "font-family", "//FONT USED IN iOS BROWSERS" );
},
Opera: function () {
$('*').css( "font-family", "//FONT USED IN OPERA BROWSERS" );
},
Windows: function () {
$('*').css( "font-family", "//FONT USED IN WINDOWS BROWSERS" );
}
};
We can be specific to Windows browsers if we need..
I know this is not the best solution but it should work
This has already been answered, but I found a solution that may be helpful:
*, html, body {
font-family: inherit !important;
}
This tells the root elements of the HTML document to inherit their font from the parent. In this case, the parent would be the browser's user agent styles, so your fonts will inherit from the default.
I've been coming across your questions on a somewhat regular basis it seems, and they appear largely theoretical cases. In any case, the others have more or less pointed you in the right direction, but I'm going to sound off just to re-enforce some points.
Explicit Means
There is no existing built-in functionality in Javascript nor CSS to explicitly assign the browser default font. This is outright impossible with the present CSS specification, however, you could, theoretically, utilize Javascript to get the name of the font for explicit use. I will not attempt to write the Javascript code because I predict it would be time consuming to accurately portray, but I will at least try to provide light on how it may be possible. Additionally, I under no circumstances am implying the following idea will work, but I believe it could work.
Conceptual Structure
I'd suggest the following:
Create 5 span nodes as following:
<span style="font-family: monospace;">Monospace Text</span>
<span style="font-family: sans-serif;">Sans-Serif Text</span>
<span style="font-family: serif;">Serif Text</span>
<span style="font-family: fantasy;">Fantasy Text</span>
<span style="font-family: cursive;">Cursive Text</span>
The five generic font families are the browser defaults, however this does not immediately resolve your question because a) it does not give us an explicit font-name that a person is using and b) the default font for a given element is one of these, not all of them.
Pay respect to the words "a person is using"; what the browser would have used by default versus what the user has set the default font to and subsequently sees by default is very different; this is why Rahul Patil's structure would be imperfect, despite I'll admit this was my original assumption and in most cases he would be absolutely correct.
Note
Certain elements default to different generic font families, and are not consistent from browser to browser. Code blocks, for example, are typically rendered as monospace by default. For consistency, you will need to utilize a CSS Reset file.
Use something like this to detect the font:
http://www.lalit.org/lab/javascript-css-font-detect/
This font detection is not ready for what you need out of the box, you need to modify it to parse a list of fonts and match it to the default. This script only shows the theory behind what may work for you; character dimension comparison, as typically all fonts are different in size in height and width, and that difference is easier to detect when the font size is large (hence why it uses 72 pixels).
Caveat
One major caveat I can think of is that this will typically only be able to detect ASCII / Romanized fonts and may not apply to Unicode sets; I'm sure you could modify it, but it may computationally intensive to accurately detect the font. You would likely retain a database of fonts applicable to each language, and you would need a consistent way to detect the language settings for the browser (and not the system); this is not easy, or even possible to my knowledge in a consistent way.
You can obtain an idea of the language settings using the "navigator.language" and "navigator.userLanguage" variables in Javascript, but these, to my knowledge reflect the system language and not the language used by the browser. Server side code would likely be necessary for this to be achieved with any degree of accuracy.
Build a Javascript routine to parse a list of fonts, and compare said fonts against the dimensions of the elements created in Item 1 of this list. You can get a list of fonts necessary to parse by using Flash. I'd suspect a Java applet would be able to do this as well. This may be helpful (JS+Flash):
https://github.com/gabriel/font-detect-js
http://font-detect.s3.amazonaws.com/index.html
This should, theoretically, give you the explicit font name used by the person. You could extend upon this and also get the default generic fonts for each individual element type (e.g. sans-serif, serif, monospace, fantasy and cursive), but I suspect this would be CPU intensive and would be best used with some of type of system level application; e.g. caching the given conditions for a given member, and create the CSS catered to that specific user.
Implicit Means
A number of people suggested some other means, Daniel Lisik in particular highlighted what I may do, with respect that is "serif" declaration is invalid in it's context, since declaring "sans-serif !important" would assign "sans-serif"; you can actually build up using "inherit !important" and make strict font-family changes with the given "font-family !important". For example:
<html>
<head>
<style>
div { font-family: Cursive; }
p { font-family: Inherit !important; }
.serif { font-family: Serif; }
.sans-serif { font-family: Sans-Serif; }
.serif-important { font-family: Serif !important; }
.sans-serif-important { font-family: Sans-Serif !important; }
</style>
</head>
<body>
<div>
Normal Div Text
<p>Default P Text</p>
<p class="serif">Serif</p>
<p class="sans-serif">Sans-Serif</p>
<p class="serif-important ">Important, Serif</p>
<p class="sans-serif-important ">Important, Sans-Serif</p>
</div>
</body>
</html>
"Normal Div Text" would be in "Cursive"
"Default P Text" would be in "Cursive"
"Serif" would be in "Cursive"
"Sans-Serif" would be in "Cursive"
"Important, Serif" would be in "Serif"
"Important, Sans-Serif" would be in "Sans-Serif"
If you need any clarifications, just ask and I'll edit as necessary.
References
http://www.w3.org/TR/CSS21/fonts.html#value-def-generic-family
http://www.w3.org/TR/CSS2/cascade.html#value-def-inherit
Resources
http://www.lalit.org/lab/javascript-css-font-detect/
https://github.com/gabriel/font-detect-js
http://font-detect.s3.amazonaws.com/index.html
Your question isn't very clear. I don't know if I've misunderstood but I will try to help anyway.
If you're really determined to respect the default browser fonts and font sizes set in the browser then this should do the trick:
html, body {
font-size: 100% !important;
}
body {
font-family: serif !important; /* Or sans-serif, monospace or whatever is appropriate. */
}
Then the inheritance should kick in, as long as you don't set font stacks or sizes on everything else.
Bear in mind, the cascade order comes into play here.
This would override all types of stylesheets except for user stylesheets containing !important declarations set on relevant elements. In this particular case, you just need to respect the user's choices.
Personally, I would just write this:
html, body {
font-size: 100%;
}
body {
font-family: serif; /* Or sans-serif, monospace or whatever is appropriate. */
}
Then I would refrain from setting font stacks on everything else simply because, if an user was really determined to have his own way, he's likely to have set !important declarations on the elements that matter to him, like fonts, etc in his own user stylesheet - and this will override a normal author stylesheet (which omits !important declarations).
The others are right, the initial keyword is a viable method as long as you're not worried about IE because, no version of IE supports it.
So I think your best bet is to look for a polyfill of some sort for IE, or create your own. Modernizer might be worth a look or if you want to create your own, there's polyfill.js. I don't know anything about creating polyfills, sorry!
I know it's not a perfect answer (it's 6am and I've been up all night), but I hope it helps you in some way.
P.S. I've just realised you might have been referring to hijacking a browser's settings to set the default font you want set, regardless of how the user has it set up. It would be pointless doing that. In any case, I don't think it would work if an user has his own user stylesheet especially if it has !important declarations set on the font properties.
You can try it in this way:
.element {
font-family: -webkit-body;
font-family: -moz-body
font-family: -o-body
font-family: body
}
And also try the following which is also working fine:
.element {
font-family: none;
}
Are you simply talking about element selectors?
div {
color: red;
}
input {
font-family: sans-serif;
}
As per my understanding, font-family: none; works fine for me in chrome and firefox.
.element {
font-family: none;
}
This code will inherit to default browser font.
Use a generic font-family. The browser will choose which font is "best" for him :)
font-family: serif;
I use the Google Maps API (v.3) to show a map with a couple of markers. I recently noticed that the control used to zoom the map is messed up (it wasn't always like this). I have no idea what the cause is.
Update
This post originally had a link to a page where you could view the issue, but the link is broken now, so I've removed it.
Your CSS messed it up. Remove max-width: 100%; in line 814 and zoom controls will look fine again. To avoid such bugs use more specific selectors in your CSS.
#myMap_canvas img {
max-width: none;
}
fixed it for me, but I also wanted to point out the comment on the question by #Ben, "This issue doesn't happen with Bootstrap if you use the is map_canvas as the map div id". He's right. I'm not using Bootstrap, but the problem started happening after I changed the div id.
Setting it back to map_canvas fixed it without the max-width change.
<div id="map_canvas"></div>
If you're using Bootstrap, just give it "google-maps" class. This worked for me.
As an alternative you might reset everything for the google map div as a kind of last-resort solution:
HTML:
<div class="mappins-map"><div>
CSS:
.mappins-map img {
max-width: none !important;
height: auto !important;
background: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
Just share #Max-Favilli answer:
With latest version of google maps api you need this:
<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>
Thanks to #Max-Favilli
https://stackoverflow.com/a/19339767/3070027
If you're a Twitter Bootstrap user you should add this line to your CSS:
.gmnoprint img { max-width: none; }
I had this problem as well and using
.google-maps img {
max-width: none;
}
didn't work. I eventually used
.google-maps img {
max-width: none !important;
}
and it worked like a charm.
If you're using Yahoo's Pure CSS, give your div the "google-maps" class like Bootstrap, and put this rule in your CSS:
.google-maps img {
max-width: none;
max-height: none;
}
As far as I can tell, Pure CSS has no way of fixing this issue on its own.
Those options you guys told me didn´t work for my website.
I use Bootstrap V3 and focussed on the functionality. The main reason was that i had given my map a different ID then the CSS file used to display the zoom bar with the yellow streetvieuw guy
I renamed map_canvas to mapholder and then it worked for me! Thanks anyways for the hints that i should look into the CSS files!
I tried all the above solutions, and others from other forums to no avail. it was really annoying because I have another non-Wordpress site where the code worked perfectly. (I was trying to display a Google map in a Wordpress page, but the zoom and Streetview controls were distorted).
The solution I did was to create a new html file (copy paste all the code into Notepad and name it xyz.html, save as type "all files"). Then upload/ftp it up to website, and setup a new Wordpress page and use an embed function. When editing the page go to the text editor (not the visual editor) and copy/type:
http://page URL width="900" height="950">
If you change the dimensions, remember to change it in both arguments above, or you get weird results.
There we go - might not be as clever as some other answers, but it worked for me! Evidence here: http://a-bc.co.uk/latitude-longitude-finder/
I am trying to get leading and kerning to work on some sIFR 3 type on a site I'm working on (as described in the wiki: http://wiki.novemberborn.net/sifr3/Styling), but these two parameters seem to have no effect no matter what I do.
I am not using intergers (no 'px' or 'em') just as it requires. I've also tried several different font swf files, just to make sure it's not the font. I don't know why it doesn't work. All of the other css parameters that I assign to .sIFR-root work just fine. Here's a sample of my code using 'leading'.
In sifr_config.js:
sIFR.replace(snl, {
selector: '.section-title h1',
css: ['.sIFR-root { color: #FFFFFF; text-align: center; leading:2; }'],
wmode: 'transparent'
});
In the HTML doc:
<div class="section-title">
<h1>sIFR Text</h1>
</div>
(I've also tried the css code with and without the square brackets, as I've seen it done both ways. Doesn't seem to make a difference).
What am I doing wrong? Any help would be greatly appreciated; thanks!
ETA: Found an less hackish way:
line-height seems to work when added to the CSS for the replaced element (in my example that'd be: .sIFR-active .section-title h1). So I was able to use regular old line-height to fake a margin.
All righty—since this one left everyone speechless, here's what I discovered:
Originally, there were many suggestions for using leading as a replacment for margin-top or padding-top since these will not work with sIFR. This is what I was trying to use it for. I had a single line of text and needed to give it some space up top, so I was trying to do this by increasing the leading (line height) to no avail. I think this worked at one point, but then as I was looking at the change logs for all the revisions of sIFR, I found a note about a "fix" to leading. Apparently the developer considered leading being recognized on single-line text as a bug, so "fixed" it so that leading is only applied when the text is multiple lines. I tested by putting a line-break before my text, and sure enough, leading started to work!
So it seems that now, in order to achieve a top margin on my sIFR header, I have to add unneccessary code one way or another—by wrapping it in a div or span with a top margin, or by adding a line break and using negative leading.
I still have no idea about the kerning, but letter-spacing seems to be working, so…
If anyone has any additional insight to offer, I'm all ears!
Here's what works for me, using sIFR 3 to get a h2 with Serifa font in red with minimal letter spacing and leading. The actual sIFR swf is nothing special, simply created as per the sIFR documentation. As mentioned above, offsetTop and tuneHeight also work for adjusting positioning (shown below although I haven't used them so set to 0).
In sifr.css
.sIFR-active h2.replace {
color: #FF0000;
visibility: hidden;
font-family: arial,helvetica,clean,sans-serif;
font-size: 2.5em;
text-transform:uppercase;
}
in sifr-config.js
sIFR.replace(serifa, {
selector: 'h2.replace',
css: ['.sIFR-root { letter-spacing: -2; leading: -15; kerning:true; color:#FF0000; text-transform:uppercase; font-size:2.5em; }' ],
tuneWidth: '0' , tuneHeight: '0' , offsetTop: '0' });
In html page (for example):
<div class="column grid_4">
<h2 class="replace">Title here</h2>
</div>