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;">
Related
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.
I'm a server-end python programmer, and have very few knowledge about css.
Recently I was using gitbook to write our doc-sites.
Everything was OK, except when I'm using anchors in the md files.
The content wrapped in the anchor tag will be show in blue. Which isn't good.
I wanna disable this blue color rendering, then I did some search and find the page was influenced by a file named style.css.
There is only 1 extremely long line in this file. I searched blue in it, nothing.
And then I searched anchor in it. I got:
fa-anchor:before{content:"\f13d"}.
.anchor{position:absolute;top:0;bottom:0;left:0;display:block;padding-right:6px;padding-left:30px;margin-left:-30px}
.anchor:focus{outline:0}
Is this fa-anchor:before{content:"\f13d"}. thing which influenced the anchored content rendering? How to disable its effect?
If it isn't, what key-word should I searching in the css file for anchored contnet rendering?
PS: In this question the anchor means syntaxs in html like <a href='#stash_save'> save </a>
#Zen fa-anchor:before{content:"\f13d"} this code means the generated icon using unicode character won't be part of DOM.
By default when <a>element apply by default color turns into blue color you have to find the class if any applied on <a> tag. otherwise you can change the color using <a href="#" style="color:#535353">. using inline CSS here just for reference.
You can make a specific class for <a> tag.
Hope it solve your problem. check the DEMO also.
add color: red;
to the end of
.anchor{position:absolute;top:0;bottom:0;left:0;display:block;padding-right:6px;padding-left:30px;margin-left:-30px}
and see if it modifies the color.
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.
I'm specifying a teal background color for the body of a page:
<body style="background-color: #0197B1">
This overrides a style sheet, and sure enough the teal appears, but not all the way down the page (both in Firefox and Chrome)
I add the following at the bottom:
<br style="clear:both" />
some text
</body>
to attempt to resolve things and also debug what is occurring with the inline element at the bottom. It appears (Chrome developer tool) that the body does not go all the way down the page. Hmm ... why does this happen, what's the fix?
Page can be viewed at: http://www.momentumnow.co/testimonials
Thanks
Remove the height: 100%; property on the body (it's set in the CSS) and the background will fill the entire page. Also, as a friendly note, you shouldn't be using tables to design websites. It's very poor practice - what you want to do is easily achievable without tables.
Remove html {background-color:#ffffff;} and you should be done.
When you float an element you are removing it from the document's flow. The page loses a sense of where and how large the element is.
You page is a series of nested tables with floated elements inside. The only thing providing actual vertical structure is the tables themselves. Your background is ended where the tables run out.
To recode this page would be easy for someone who was familiar with Standards-based, semantic markup. I would suggest learning those methods. In the meantime, #Christian Varga's solution will get you off for the time being.
I check Firefox only,
line 4: html{background-color:#ffffff; height:100% }
Just remove body
or
line 4: html,body{background-color:#0197B1; height:100% }
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.