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.
Related
I'm building a Wordpress website by customizing and editing an existing theme called 'onetone'. It's an one-pager theme. The problem I'm having is that neither the homepage (the one-pager landing page) nor the individual posts/pages will extend to full height.
Under the footer, there's a thin black line 23 pixels in height, that extends 100% of the width.
Here's the quirky thing: while I'm logged into the site as an admin, the line disappears. When I'm visiting as an unlogged, regular user the line is there. All major browsers (FF, Opera, IE, Chrome). Also, on my sister's computer with FF installed the line didn't show even when unlogged.
I've searched StackOverflow, and the usual answer to have <body> and <html> set to height:100%; (including min-height:100%;) isn't working. I've also added height/min-height to containers and wrappers to test the setting. (Not all, though, only the ones I thought were relevant to the issue I was trying to solve) I've also tried the margin: 0; & padding: 0;, but NOTHING works.
I suspected it's the footer's fault, but using the inspect element function in my browser (and some further tests) I found the footer has nothing to do with it.
In the original, untouched theme, the line doesn't appear. So it must be some of my edits causing it, though even by comparing the original and my edited CSS file line by line, I couldn't find something that should've caused this error. And the CSS is the only thing I've edited.
I'm not a coding expert, and I've about exhausted my wits and available knowledge trying to figure this out. Does anyone have any idea what may be causing this glitch?
This is my site. The glitch is best seen on posts / pages. If any specific code samples are needed, just say and I'll post them.
Your code has this weird image just before the <body> tag ends, after all javascript calls:
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=651&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2F&rand=0.7281985701993108" id="wpstats">
Remove it and you're golden
There's a background color on body. Getting rid of that fixes the "border".
body.custom-background {
background-color: #000000;
}
Also there's a smiley on the bottom
It looks like this
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=444&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2Fblog%2F&rand=0.1907386933453381" id="wpstats" scale="0">
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 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 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
I have a site that has a simple HTML button in a form. All browsers show this button correctly. However, in Firefox 2 and Seamonkey it appears just as a solid grey square that cannot be clicked on and that has no text.
<input id="getaudiobutton" type="button" value="Get Audio" onclick="convert()" />
For those of you that have Firefox version 2 or Seamonkey, please see my site
Thanks all
SOLVED
No idea why but what I did was increase the size of the div holding the button so that the button can be shown fully. There wasn't enough space for the button to be clicked. Firefox 2 and Seamonkey managed to find this a bit troublesome.
Thank you all for your help. :)
From what I can see just by viewing it in Seamonkey and looking at the contents of the page and your CSS, you may want to check the style for the div that the button is contained in. I can see the button in Seamoney, but it is cut off at the very top, only allowing about 1-3 pixels to show. I can click it as well.
My guess would be that since you are setting a static height of 34px for the style that is applied to the parent div of the button, it is cutting off most of the button.
I observe the same behavior as s13james (+1 for that) but have some more things I want to point out.
You may want to rethink your use of line-height and height there, as the wrapping of that input element to the next line with the combination of those values has a lot to do with your trouble.
I see you're applying the same style via id and class, however that style is declared only for use as a class:
div.w_span_auto{
background:url(../images/wr.png) top right no-repeat;
padding-right:18px;
height:34px;
line-height:34px;
text-align:left;
border:none;
}
(For an id, you'd need to have declared it as div#w_span_auto.)
I'm not sure why you're declaring it twice either. There's an identical declaration later in the same css file.
Cheers.
Are you sure JS is enabled on your copy of Firefox?
Do you really have to worry about FireFox 2? It also only has a 3% market share:
http://marketshare.hitslink.com/report.aspx?qprid=0
DO you need a type="submit", instead of type="Button"?