I have a problem with my css.
I tested it with both latest FF and IE without problem but Chrome does not render it properly.
I want to display all childs elements of a tag as blocks i use
Tag > * {
display:block;
}
it works fine in both IE and FF but not chrome.
I tried forcing it using the console and put display:block but it failed.
It seems as if chrome ignores display:block ?
EDIT: Tag is a custom Tag actually CurrentWeather
full Css :
CurrentWeather > * {
display:block;
}
body {
text-align:center;
}
div#result{
text-align:left;
margin: 0 auto;
width:50%;
}
EDIT2:
I think it is an ajax problem as when i harcode the added html it works fine.
Does chrome not apply css on dynamic content ?
thanks
The selector tag > * doesn't target all children of a tag, only the immedate children.
You would use tag * if you want to target all children.
Chrome doesn't have such a serious bug as ignoring display:block, so there has to be something that is specific to your case.
It's hard to tell exactly what it is without seeing the code, but some possible reasons:
The tag is an inline tag, and you are not using a HTML5 doctype.
The markup is broken, so the child elements are not the elements that you think they are. (Especially as different behaviour between browsers is typical for broken markup.)
works fine for me:
http://jsfiddle.net/DigitalBiscuits/nkymw/1/
There may be an error somewhere in your css that's causing Chrome to stop processing the CSS.
If you have a missing ; or } chrome doesn't like this.
You'll need to show us all your code or else use the CSS validator to look over your code
http://jigsaw.w3.org/css-validator/
Related
I have created a CSS rule that's being applied to a SPAN element residing within a TD element.
The rule is supposed to add content to the span. I'm using the :after selector for doing this.
So far so good. IE8 displays everything correctly. But with my IE10 I don't see the content added to the SPAN element.
Using Internet Explorer Development Tools (F12), I can see that both rules have been disabled by IE10:
What's causing this to happen? Why are these rules disabled? There are no overriding substitution rules defined in the stylesheet to do this.
Your help is appreciated.
Inserted elements are inline by default. Try setting it to inline-block.
I ran into a similar problem today with IE10 with an :after setting for an image. Turns out I had two errors; I didn't have <!DOCTYPE html> at the top of the file, and in Compatibility View Settings the Display intranet sites in Compatibility View option was checked. After I fixed my webpage and unchecked the value the page displayed as expected.
Here is the css I am using:
.foo:after {
content: url(images/foo.png);
position: relative;
top: 2px;
left: 8px;
}
In my site I need to give support for IE7. Now everybody knows that styling things in IE7 is not an easy task. People uses conditional statement in HTML to load specific stylesheet for specific version of IE. But in my case I cannot use such conditional statement, since I am in WebCenter Portal application. Here I need to use skin. It is also a CSS file.
So I want to know is there any formula exists by which I can specify a particular css attribute's value for IE7.
Say I have a class:
.filterbox{
padding:12px 0;
margin:12px 0
}
Now this margin is okay for every browser except IE7 (I didn't test it in IE<7). In IE7 if I use margin:0; then the style would be perfect, but it then breaks in other browser.
How can I specify this margin in a same css class for both in IE7 and non-IE7?
Regards.
Only use this hack if you really can't use conditional comments! They are the best solution for solving IE problems. Hacks like this will quickly mess up your CSS and also make it invalid.
So, here is a hack that targets IE7 (of course this comes after your normal definition):
html>body #filterbox {
*margin: 0;
}
from CSS hacks – Targetting IE7 on Thought-After
you can solve it if you seperate the style sheets for IE7 and other browser:
/* other browsers */
.filterbox{
padding:12px 0;
margin:12px 0
}
/* IE 7 */
*:first-child+html .filterbox
{
padding:12px 0;
margin:0;
}
Attention! You have to define the styles for Ie 7 at last, because the browser will overwrite the first definitions. The others will ignore the last ones.
I'm trying to get this to work:
<!doctype html>
<html>
<style>
section{
display: none;
}
section:only-child {
display: block;
}
</style>
<body>
<section>This should be visible</section>
</body>
</html>
I believe that the text 'This should be visible' should be visible! This is also the case in Firefox. Firebug, as well as Safari's Web Inspector think so as well.
However, if you open the page in Safari (OSX and iPhone), the text is not showing. Why is this?
I tested your code, also with a doctype, and with a non-HTML5 element (a div). All webkit browsers I could test had issue: Safari-on-Windows 5, Chrome Windows, Chrome Linux, Epiphany-webkit.
When I changed from display states to background colours, however, webkit worked fine. Changing other display states like float also worked fine.
This is very likely a bug (though I didn't see one via search engines, but I did not search bugs.webkit.org) purely to do with changing display states. It also works fine if the element is first set to block and :only-child is set to none, so it would specifically be overriding the display: none. Opening element inspectors seems to trigger the CSS display which remains until refresh.
Your code (if you add a doctype too) seems to be a pretty good test case. If this bug isn't already on bugs.webkit.org you could submit this code.
*edit okay I definitely have Javascript on, still don't see the ability to have this be a comment rather than an answer, which is what I originally intended.
I have the same problem and I found this workaround:
http://jsfiddle.net/ZxAnH/
section {
height: 0;
overflow: none;
}
section:only-child {
height: auto;
}
It wouldn't hide the elements margins but as a wrapper it could be enough to hide some elements. Did you found another workaround?
I am using Joomla 1.5.
i am having a page where a cSS has been added for the title
which is in <strong></strong>
I firebug it , it appears as
element.style {
color:#666666;
}
i dont know of from where it comes from..
but i am having a css applied for the same tag with other color. but it disappeared.
How to remove the element.style globally..
It is possible to override inline styles from an external stylesheet
strong[style] { color: blue !important; }
This works in most major browsers, Chrome, Safari, Firefox, IE8
It doesn't work (to my knowledge) in IE6 / IE7
Hope this helps.
This code comes from HTML and not from your CSS.
This HTML with generate your element.style:
<strong style="color:#666666;">Just text</strong>
Element.style, as the name says, its the style defined on element and there is no way to override it. If you do not want that color in that element you must remove/change it on html.
It seems it is not always set in HTML. In My case the element.style is empty:
element.style {
}
It is not set in any css and it is not set in any html source.
I dont't know where else I should look.
Inline styles are generated from HTML or (more often these days) javascript applying styles after the page had loaded.
Jquery is often a culprit of this, performing animations using css applied directly on the element that overrides your stylesheet.
For instance you may show, then hide a div, leaving a 'display:none' on the element that overrides any naturally cascading CSS that precedes it. This comes up often when you are mixing CSS transitions and media queries with javascript.
Check your JavaScript for any instances of applied styles.
Try using a callback function on the animation to clear styles:
$(this).css( "display", "" );
basically im in a little dilemma... As usual, IE6 is messing up some tiny line of CSS.
All i need to fix everything is:
overflow:hidden;
Thats it. But, heres the problem. This is for a uni assigned piece of coursework and they say only 1 css file which must be valid. And no conditional comments :S so there goes my plan. Is there any way to target IE6 ONLY (not 7+ etc.) and still maintain a valid CSS file?
PS: before any of you say, well you should rethink your CSS etc, I have, its for a CSS dropdown menu and a nested element is stretching my link container so i need overflow set to hidden. Only IE6 needs this :S
EDIT MY SOLUTION:
html>body .allbrowsersceptIE6 {
overflow:visible;
}
.onlyIE6 {
overflow:hidden;
}
It works because all other browsers use the first value and ignore the second one unless the second has !important on it :D
If it comes down to using hacks as your only option: http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml
So, you want to apply that rule to #menu or whatever:
* html #menu { overflow: hidden; }