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
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'm making a user stylesheet for the add-on 'stylish.'
It applies a semi-transparent dark box over the entire page for night-browsing.
I'm using:
html:before {
content:url()!important;
position:fixed!important;
width:100%!important;
height:100%!important;
top:0!important;
left:0!important;
background:rgba(2,3,3,.35)!important;
z-index:99999999999999999!important;
pointer-events:none!important;
}
to create the fixed, overlying div.
This works just fine, however, if there are any iframes in the site, it will apply this code into the iframes' HTML as well as you can see here:
because these social networking widgets rely on an IFRAME, its repeating the code into those pages, creating a double-overlaying of the semi transparent dark box i've made.
the desired look would be:
I've tried hack-ish things, like applying a much-higher z-index to iframes and specifying the background-color and background of * of anything in the iframes to 'white' and 'opaque' so that it 'floats' on top of the parent html page, but this doesn't work perfectly. i've also tried something like:
html:not(iframe):before{}
but this also doesn't work. I'm wondering if there is a way to do what I'm trying to do in a way that doesn't rely on 'html:before' to create the same effect, or if there's a way to do that but not have it repeat inside the html of iframes on a page.
I've exhausted my efforts trying to get this to work, so any help would be really appreciated. Thank you.
Unfortunately, there is no way using CSS to target only the contents of an iframe from within the source of the iframe, i.e. the page that contains the iframe element.
I'm assuming, since you're using Stylish, that your CSS is in a Firefox user stylesheet. If so, you may have to look at the source URLs of those iframes, create a #-moz-document rule targeting those URLs at their domains, and remove the html:before pseudo-element accordingly.
Something like this, which should go beneath what you already have:
#-moz-document domain(/* Facebook Like */),
domain(/* Tweet Button */),
domain(/* Google +1 */)
{
html:before
{
content: none !important;
}
}
The content: none declaration disables the pseudo-element, preventing it from being rendered.
Having to exclude specific domains in this manner means this method is extremely limited and not very versatile at all, but it's the best I can think of.
You may want to try a different route:
html {
box-shadow: inset 0 0 0 2000px rgba(2, 3, 3, .35) !important;
}
Demo
This way the webpage is still useable when the user's browser doesn't support pointer-events.
You may also want to checkout this question: CSS - max z-index value
To apply these styles to only the parent document's <html> element, and not to iframes, simply apply the box-shadow to document.documentElement with JS:
document.documentElement.style.boxShadow = "inset 0 0 0 2000px rgba(2, 3, 3, .35) !important";
Edit:
I don't know about the addon thing but you could give your HTML tag an ID and target it that way, although if you want this to apply to all pages then that's an issue
or maybe use html:first-child ? I honestly don't know what will happen, you can give it a try though
CSS doesn't allow you to style HTML inside an iframe. Since you're using an add-on, this is a non-standard implementation of CSS. Styles are not inherited by iframes, because an iframe is basically a new browser window. The add-on is adding the style to every HTML page in the browser window. There's no way for the browser to know that a page is inside an iframe (at least not in a way that's accessible via CSS).
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
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%; }