<!DOCTYPE html> has been set, and html5shim.js has been included in the <head> of each page.
I have the CSS:
.height_fix_container > * { margin:0; background:#fff url(../images/bg.jpg) top left no-repeat; min-height: 400px; }
.height_fix_container > *:first-child { background:#fff; } /*Good eye! But the problem still exists*/
...being applied to this code in the middle of the page:
...
<div class="height_fix_container">
<div>Content box 1</div>
<div>Content box 2</div>
</div>
...
In every browser other than IE7 and 8, the CSS selectors work great. However, in IE Content box 1 recognizes the selector but Content box 2 completely ignores it. I'm checking this with the built in Developer Tools in IE.
Why might this be happening?
In IE you need to have a DOCTYPE declared in order for it to recognize the first-child selector.
<!DOCTYPE .......>
You're also missing a # infront of the 'fff' in the second class definition. It doesn't affect the code at all, just a syntactical edit.
http://www.w3schools.com/cssref/sel_firstchild.asp
IE7 is very particular with :first-child and might be choking on the * before it.
Perhaps you can add another style to the sheet:
.height_fix_container > div:first-child { background:#fff; }
Untested
Your page is being displayed in Quirks Mode. Your description and CSS is making me quite certain.
The most likely cause is that you don't have a valid doctype as the very first line. Add this:
<!DOCTYPE html>
If you do already have a doctype, there are other things can cause Quirks Mode.
Once you fix this, background:fff will no longer work. You need background:#fff. The # is important.
http://jsfiddle.net/a256R/ - similar selectors - work in IE7 and IE8 (first div is green, second is red). Problem is somewhere else (background image url, other rules etc.).
Related
Hi stack overflow community :)
this is driving me crazy ...
it is about internet explorer 11 (didnt test previous versions, doesnt matter).
Sorry for the german screenshots of IE etc.
The Problem:
I have this huge table, about 1500 lines with a noticeable amount of elements inside.
So one cause of the problem is the amount of elements, probably exceeding
1500 lines * 7 cells * 2 HTML elements.
This is a fact i am not allowed to change ;)
Clicking on the scrollbar button triggers a style calculation of all elements inside
the scrollable element. Due to the amount of the elements this style calculation
takes about 300ms, therefore noticeable.
The code:
<style type="text/css">
.fooooooo:active {
/* just remove this EMPTY rule to "fix" IE? */
}
* {
padding: 0;
margin: 0;
}
html, body {
min-height: 100%;
height: 100%;
}
.screen-container {
height: 100%;
overflow: scroll;
}
</style>
<section class="screen-container">
<table><!-- huge --></table>
</section>
How to reproduce:
Open IE "devtools", start a profiling session and just click on the scrollbar button of the <section> element.
Stop the profiling session and glance at the green bars - about 300ms style calculations. One for the click (":focus",":active"?)
on the button, one for the :blur on the button?
#see screenshot and or try the fiddle. jsfiddle
screenshot of jsfiddle with IE devtools
More information i found out so far:
1# The very existence of the CSS rule ".fooooooo:active" is enough. Notice that this rule has
no rules nor does it match any element.
Just removing it "prevents" the 300ms style calculation.
2# Moving the scrollbar away from the <section> to the <body> element also "fixes"
the style calculation problem. Probably because "body:active" "is not allowed"?. At least i cant
get it to work ;)
3# it doesnt matter if we have a huge <table> or a huge soup of <div>'s
I appreciate any information you can give me :)
Solutions i can NOT take:
Moving the scrollbar to the <body>
Replacing :active with JS and regular .active CSS classes.
Reducing the amount of elements (paging etc.) (my dear and lovely customer want it like that!)
This guy Motyar from India from the website: http://motyar.blogspot.no/2011/02/handling-onclick-event-with-css.html
showed a very nice pure css method to hide and show divs. However I can't seem to understand it. Here is the code and please explain this to me, to a newbie.
THE HTML (NOT MY CODE):
<div id="lightbox">
Hide me<br />
Hi!! <br />
i am the lighbox
</div>
<a href="#lightbox" >Show the lighbox</a>
THE CSS (NOT MY CODE):
#lightbox {
display:none;
}
/* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */
#lightbox:target {
display:block;
}
Please explain this to me comprehensively. Thank you :)
In CSS, the :target placed after a CSS token, say for example, #lightbox means that the inner code of your rule #lightbox:target will be evaluated if and only if the URL of your page is appended with #lightbox such as for example, http://www.stackoverflow.com/#lightbox. In this case the following code will be evaluated by the browser :
#lightbox:target { display:block; }
As of the W3 Selectors Level 3 Recommendation:
Example:
p.note:target
This selector represents a p element of class note that is the target element of the referring URI.
So, as you click on #lightbox, the lightbox-Element becomes the target of your URI.
The pseudo-selector can identify this and applies the proper styling.
The key is :target pseudo selector. It qualifies to active anchors (#lightbox in this case).
You can read more about this here: http://css-tricks.com/on-target/
I'm breaking my head with this simple? problem. I know its not a bug nor a cross browser issue, tested on firefox and internet explorer. Simply I don't understand why its resolving this way.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.red_class { color: red; }
.blue_class {color: blue;}
</style>
</head>
<body>
<div class="red_class">
<a class="blue_class" href="http://somesite.com">Somesite</a>
</div>
</body>
</html>
In my humble opinion both rules have the same specificity so I expected the link to show in BLUE because the blue_class rule is closer, but the link is shown in RED. I actually changed the order so that the ".blue_class" rule was written first, but it didn't change the result
I have found some ways to make the code work, like making 2nd rule more specific, for example:
.red_class a.blue_class {color: blue;}
But I would really like to understand why this is not working as I expected, that is, if the link has a class blue_class it should be shown in blue.
Really appreciate the help. Thanks in advance.
Actually I don't see how you're getting a red colored link...
Anchor elements with defined href doesn't inherits attributes like color or text-decoration, so the result you're getting it's a little odd.
http://www.w3.org/TR/html401/struct/links.html#h-12.2
User agents generally render links in such a way as to make them obvious to users (underlining, reverse video, etc.). The exact rendering depends on the user agent. Rendering may vary according to whether the user has already visited the link or not.
So, this results in a default styled anchor:
.red_class{color:red;}
<div class="red_class">
Something
</div>
In this case the anchor inherits the red color:
.red_class{color:red;}
<div class="red_class">
<a>Something</a>
</div>
I really don't get the problem, but at least this is an explanation of how anchor styling works.
#Luxfer This is just a simple thing that I do. Download Firebug Addon for your Firefox. Inspect the element to which you want to give style. On the right side of Firebug, there is a box where you can see the CSS used. Simply Right Click on the CSS pane, there you will find an option as Add Rule. As you Click on that, it will take the selectors that will target the required element perfectly.
Are you certain it's not working? Blue is not a good color to test with because most browser default to a blue for hrefs.
<div class="red_class">
<a class="green_class" href="http://somesite.com">Somesite</a>
<p>More Text</p>
</div>
with
.red_class { color: red; }
.green_class {color: green;}
Seems to work fine in Chrome here.
----Demo-----
I'm talking about the <html> element itself, seems to work in most browsers, but IE7/8 doesn't want to play. The reason I'm even doing this is because my chore is to theme a RoboHelp web output which uses a million frames - I need to set the topmost frameset's background image otherwise background-positions don't line up when a nested frame invokes a vertical scrollbar.
I tried applying height:100%; on the <html> element also. Solution must work in IE6+. Javascript should be avoided.
EDIT:
Clarification: I'm applying style="background: transparent url(image.gif) left top no-repeat;" to the html element via a style block in the header (everything is dynamic, this is my only available method of accessing the html element).
Good heavens, just tested this on a basic page - fine. Replace the body tag with a frameset, like in my situation, and now the images don't show up. This looks to be IE-frameset specific, any suggestions?
Not sure I completely understand your problem. But applying height to an HTML element is a definite no-no. You can apply a background directly to the entire page using the HTML selector
html {
background-image: url("../images/background_image.png");
}
Hint: the '..' in the above example moves to the previous web directory. Be cognizant of your file structure.
I think you should be using CSS instead of HTML background image tag. Background image in HTML is now deprecated (outdated and not recommended) by the W3C.
Something like this:
<html class="imageBox">
<style type="text/css">
.imageBox {
width:300;
height:100;
background: url("/foobar.gif") #ff9900 90% 30% no-repeat fixed
}
</style>
<p>This div element has a background-image.</p>
</html>
I have several pages and one stylesheet.
The page bodies get two classes: Their name, and the language.
For example:
<body class="contact english">
Now, in the stylesheet, I have an special rule for the german version of the "expertise" page:
body.expertise.deutsch .container
{
width: 590px;
}
In IEs 6, 7, and 8, this style gets consistently applied not only to
<body class="expertise deutsch">
but to every body element on every page.
When I remove the "body":
.expertise.deutsch .container
{
width: 590px;
}
it works as intended and applies only to "expertise deutsch".
Am I daft? Blind? Overlooking the obvious?
Is this intended behaviour, a known bug, or neither?
I can't find anything except that from IE 8, IE is supposed to handle multiple selectors.
Because it has been misunderstood: "Every body element" of course refers to separate body elements on separate pages that all include the same style sheet.
As I understand it, IE6 doesn't understand the difference between body.expertise.deutsch and body.deutsch. It only picks up the last class in the chain. Ryan Brill has more on it here.
I'm not sure if IE7 or 8 fixed it, but if they did you'll probably need to be in standards mode for it to work (easiest way is to include a strict or HTML5 doctype at the top of the document).
You may want to post your entire stylesheet and markup somewhere. My guess is you have some invalid statements elsewhere as well, and some are getting applied weirdly. You may want to validate your css and markup as well: http://jigsaw.w3.org/css-validator/.
Check this link out too. Seems like some IE gotcha in there: http://www.ryanbrill.com/archives/multiple-classes-in-ie/
I tested your example in ie7 but cannot reproduce your findings:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.container{
height: 200px;
background-color: red;
}
body.expertise.deutsch .container {
background-color: blue;
}
</style>
</head>
<body class="expertise english">
<div class="container">
</div>
</body>
</html>
Shows a red div, like it should. And when you change the second body class from english to deutsch, the div is blue.
The only browser that should have problems with this code is ie6 as it doesn't understand multiple classes in css and only applies the last.(which would colour the page blue if only the class deutsch was applied)
Not sure…
every body element on every page.
So you have multiple body elements on the page? That's not normal. It's hard to say without seeing the HTML, but one thing to keep in mind is, body.expertise.deutsch .container is not an immediate child selector. So imagine some HTML like this (I guess):
<body class="expertise esperanto">
<div class="container">I'm 590px wide</div>
<body>
<div class="container">I'm also 590px wide</div>
</body>
</body>
Because container has some parent (however remote) with class of "expertise esperanto" it picks up the style. My advice is, don't use multiple body tags in the same page. Also, if you have two .container elements and only one should pick up the style, perhaps give them different classes.
Actually the body tag has two seperate classes applied to it in your code, they are not joined as one but rather reside at the same depth.
body.expertise
body.deutsch
So your code...
body.expertise.deutsch .container
{
width: 590px;
}
Would only work if the class was:
<body class="expertise.deutsch">
I'm a bit unsure of a good work around at this time for your problem...
You may want to check if their are any other unique class identifiers you can rely on to narrow down the css.
Ultimately its more headaches then it is worth to use multiple classes per element if you can avoid it. I generally setup my pages like <body><div id="body"> </div></body> so I have a second outer container to play with for css for reasons like this.