Font disappearing on click in IE9 (Custom font, no Javascript on page) - html

You can see the issue here:
http://referrals.users34.interdns.co.uk/
It works in all other browsers, it is using a custom font that is being generated by PHP (Base64 encoded). There is no javascript included on that page and the text seems to be just changing colour. However, not all the text with that custom font is disappearing, only the body text and the text above the table (Well, most of it). The navigation and grey text stays the same.
I am using the reset CSS:
http://meyerweb.com/eric/tools/css/reset/
I have tried Googling but couldn't find anything.
If anyone could help that would be great as I have absolutely no idea what is happening!
UPDATE: Happens in IE8 too.
Regards,
Connor

the culprit is color: transparent from div:focus in style.css (line 59)
when you click the text, IE is giving the focus to the div you click on which makes the text transparent per the style above.
you can remove that style or set the color explicitly for the elements that disappear.

Related

Getting FontAwesome to respect CSS color -- are there FontAwesome quirks?

I'm having trouble getting a span (or i) that I'm having represent a particular icon using FontAwesome styles to be the color I want it to be.
The weird thing is that the Chrome inspector shows it to "be" the color the CSS says it should be, and it shows that the rule is correctly implemented, but in the browser it appears as the color of the surrounding div, which, again, Chrome inspector shows to be correctly overridden.
Fontawesome works fine, using CSS styling to set color, in other parts of my app.
Has anyone run into any quirks with fontawesome and CSS styles? Under what circumstances would Chrome inspector show the font as one color but it would display as another?
If you can help, would appreciate. If not, that's fine, but don't down-vote me, if you would.
Assuming I understand your problem, you don't have any text in the <span>.
But even if you add some, you're hiding the parent element by calling:
#la-tarifa-es{
display: none
}
So all of the children will be hidden as well regardless of how you target them.
The answer was that FontAwesome works by adding a ::before to the SPAN (or I). So, apparently, the CSS rule for the containing DIV was operating on that, not the CSS rule for the SPAN. When I made a very specific rule for SPAN::BEFORE it worked.

Button (using <button> tag) does not display in Opera

On my website I am using the html 'button' tag but the button does not display when page is opened in Opera version 12.15. Works fine in chrome, firefox and IE.
If you go to my cdn test site CDN Comparison u see cloudflare, incapsula and page speed images. below the three cdn images there's a button which does not display. It's supposted to be right above the 'Test and monitor image load speed of the top three Free CDN Service providers' sentence. please help.
<button id="button" onclick="changeLink()">Test Another Image</button>
I have not added any style to this tag using CSS
It looks like Opera doesn't like showing the native-look button background on an element with both border-radius and border styles set, but no background-color.
To make it work you either need to specify a background-color for the element, or remove/override either the border-radius or border styles defined in style.css near line 208 (at least just for that element).
You can see the differences between the buttons with only very slight differences in style.

Debugging css in Firebug

I'm having a problem finding out which css is actually applied to an element when using Firebug 1.11.2. I'm setting the paragraph font from my own css file (d.css), which is meant to over-ride 3 system css files (a.css, b.css, c.css).
I click on the html tab, and click on the <p> element that I'm
trying to debug.
The style window on the right now shows the applied styles from a.css, b.css, and c.css, but not d.css. No paragraph font is shown, but I can change the paragraph line-height, for example, from a.css.
If I click on the css tab, and find d.css, I can manually change the font and font size and see the changes applied to the <p> element in the main window. However, the style window on the right still shows no font.
Is there some magic to showing all the applied styles?
Try using another add-on for viewing your CSS code, for instance:
https://addons.mozilla.org/en-US/firefox/addon/web-developer
You can try other add-ons.
A bit dumb, but probably worth answering rather than withdrawing the question...
turns out that you have to be rather more careful when selecting the html element than I'd realised. My text was actually in a span:
<p>
<span class="foo">bar</span>
</p>
The problem was simply that selecting the <p> element or the bar text doesn't show the styles applied to bar - you actually have to select the entire span element by clicking on the span word.
Thanks.

Unchangeable input image border in FF/CH/SAF/IE8?

I've found a very strange thing.
I was complaining about it before, but nobody sees old questions here.
Here's an example.
It works perfectly in Opera only... In Firefox, Chorme, Safari and IE8 there's a border around this button... And I have no idea WHY? How to delete the border?
Thanks.
Thats because you have set a type of image and not defined an image url... you have set the background image using CSS.
Change your element to a span or such and this will fix the issue, also add cursor to be a pointer in css too, this will give the user the idea to click it.
then use an onclick event for the submit.
As others have noted, you have defined an "image"-style button but not provided a source URL, resulting in a broken image.
The simplest solution is to change type="image" to type="button", which removes the broken image icon and border.

Weird CSS issue involving inline overrides in IE

http://searchdatacenter.techtarget.com/informationCenter/0,296712,sid80_iid371,00.html
On this page the ad on the bottom right with the black background header doesn't pickup the inline styles in IE. So it's the custom grey and black text in IE but the correct black background and white text in Firefox.
The default styles come from a stylesheet....the overrides come inline. Any reason why this isn't being picked up by IE?
Edit: Thanks, missed the overrides come inlinedoctype. Any reason why this isn't being picked up by IE?
The style tag is only valid inside the head section of the page, and the linked stylesheet just above it should be in the head as well. You're lucky what you have works in anything.
If this is difficult to change, your best bet is probably removing your style block and using the style attribute on the div instead:
<div class="cltHeader" style="background-color: black;">