I have this title on my page:
<h2 style='color:#33bbff;'>Los Angeles, <span style='font-size:10px;color:black;'>Unites States</span></h2>
As you see I want the country to be a different color and size from the city. Now, I've done similar things probably a hundred times, but for some reason the span styles aren't applied here - the country looks just like the city. What am I doing wrong?
I tried writing the styles like h2 span { ... } instead of doing them inline, didn't help.
Your code appears to be fine (see here).
Perhaps you've cached the old version. In your test browser, hit CTRL+F5 to force a reload of all files.
Otherwise, try checking if you've made use of the !important; to force a style and ignore other styles.
Debug it by using a Developer Tool Bar e.g. FireBug, and trace the styling applied, maybe something else is overriding the style. ( http://jsfiddle.net/unVNN/ )
There is no mistake, simply delete cash in your browser, CTRL+F5
Related
Bit of a strange occurrence with my web page, currently trying to resize the font of a facebook like button I have on my website.
Currently the HTML I'm targeting is:
<span id="u_0_3">2.1k people like this. Be the first of your friends.</span>
In the google chrome console adding either of the following will change the font
1.
#u_0_3 { font-size: 14px }
2.
span#u_0_3 { font-size: 14px }
but adding either of these lines of code to my web pages stylesheet has absolutely no effect. No clue how to proceed from here as it works in one stylesheet and not the other?
The reason the styles aren't updating when adding the code to your stylesheet as opposed to in the browser is because you're trying to a stylesheet on an iframe, which isn't possible. You can however add the styles using jQuery or something along those lines.
Try this...
$("iframe#idhere").contents().find("span#u_0_3").css('font-size', '14px');
Ensure that you have added CSS file reference in your HTML.
Also, clear browser cache and load the page.
I'm using Joomla 3 and I created a blog site, I'm using a design-controll tamplate
I created a "new-article" page, but I noticed that some of the buttons don't have text in them, when I checked with firebug I discovered there's a font-size:0 on them, when I remove the V from it in firebug it displays the text. I found the file and the line and deleted ALL the font-size: 0px; lines, the simply don't exist in the file, yet the text is still invisible, and when I check Inspect-Elemnt it still shows
how it looks now:
how it looks when I remove the V from font-size:0 (and how I want it to look)
it seriously drives me NUTS
and here's the file as you can see line 2875 is EMPTY
I tryed checking on different browsers and different computers, still the text is invisible and Inspect Element shows font-size: 0px;
here's the link to the page (it's public now, later on it's supposed to be a members only page)
http://debutinvest.com/new-article
you can overwrite this in your css by adding following, that will overwrite the font-size:0px;
.btn-toolbar{
font-size:12px !important;
}
Hope this helps
It would be best to provide a link so that we can inspect ourselves.
You can also look for a text-indent with a negative value, typically something like -999.
I understand that with CSS formatting the first letter of each paragraph is possible via:
p:first-letter
{
font-size:20px;
}
However upon using this code it is impossible to highlight/select these "First Letters" from the web browser, is there a way to amend this?
Edit - It is possible to select the text, however it isn't shown visually, how can I change this?
This is a bug in Chrome/ium/WebKit: https://code.google.com/p/chromium/issues/detail?id=17528
Right, it is not visually selected but in the background it is. If I select and copy and then paste it, I get "Hello" so this just might be a problem with the different font-sizes. font-variant:small-caps works perfectly (but uses uppercase).
You might want to try Lettering.js or alternatives
http://letteringjs.com/
https://github.com/davatron5000/Lettering.js
I have a div : <div id="fancyboxID-1">
<p>0767380042</p>
</div>
and this css:
#fancyboxID-1 p { font-size:150px; text-align: center; line-height:150px; overflow:hidden;}
After I upload and refresh the website I don't see any changes but if I check the source code: I see the css properties.
It's very strange for me, I've tried to upload on another server and there it works.
Any ideas why this is not working ?
Looking at your stylesheet (style.css) there appears to be some strange characters (corruption / unicode?) before your problematic line which is probably invalidating your stylesheet. Removing these characters results in your styles suddenly bursting to life...
When viewed with ISO-8859-1 encoding, they appear as 4 visible characters, although if viewed as UTF-8 it just looks like a single space (although it's not a single space):
​ #fancyboxID-1 p { font-size:150px; ...
(Btw, hyphens in the id/class names are perfectly valid.)
Are there any other styles\sheets that are overriding these changes? You said it works on other servers, so there must be something specific to the server youre hosting from.
If you use developer tools (F12 in IE or Chrome, Firebug in FireFox) you can browse to see if the changes are actually applied.. the code being present only means those styles are available, but something else might be enforcing different rules against that div, p, etc.
I understand that elements can have multiple classes:
.rfrsh-btn {
background-image:url(../../upload/rfrsh_nb_grey.png);
...
}
.submit
{
font-size: 0.85em;
padding: 0;
}
This was working perfectly as an ID before. now I changed it to a class and lo and behold, no images.
But for some reason this <button> element doesn't seem to want to display with a background image and styles applied.
Is there a reason for this? Or am I codeblind and doing something wrong.
I can't use ID either as it's repeated many times on the page.
Thanks all :)
There are several reasons. For instance, it's quite possible your image path is not correct. It 's worth noting that paths in CSS are relative to the .css file 's location, and not to the including page.
To better understand what's going on now and in the future, however, I recommend either working with Chrome, which offers a nice set of debugging tools, or use Firefox with Firebug installed. This way you can inspect your elements and see what styles get applied, overlapped, or any images the browser cannot locate.
For more information: http://www.thetruetribe.com/2008/03/firebug-tutorial-getting-started/
Underscores in class names can cause issues. Try renaming rfrsh_btn.
https://developer.mozilla.org/en/Underscores_in_class_and_ID_Names