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!)
Related
I wanted to use a span element to style some text, but for some reason when I enter that code it will on the right side of the page show that scroll bar. It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
I don't know how to fix that. I have tried reducing the padding, adding <br> at the end, etc.
This is the code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
I have restricted my text to a border on the page, so it looks better, but it can't have anything to do with my problem since I haven't had it before and I've been using this border tactic for a while now. And as well I know the button "My other articles" isn't linked to anything--I'll add the link later. I just need help with this one problem.
Thanks to whomever helps me out with this in advance.
It seems to be rendering correctly for me (Chrome on Linux):
I'd suggest you update your answer with a screenshot of what's happening.
The best thing to try in this scenario is to add the following CSS to your code if it's not working for you:
span {
overflow: visible;
}
Since you're doing inline CSS (you don't appear to have a linked stylesheet), you probably want something like this as your full code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px; overflow: visible;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
overflow: visible; ensures that the element doesn't show scrollbars. In most cases (such as if this rule is applied to a <div>), then text inside the element will visually overflow if the element is a fixed size. The <span> isn't a fixed size (it grows as text is added), and so text won't appear as overflowing. Hopefully, though, it should solve the scrollbar problem.
Alternatively, you could try using overflow: hidden; which will hide the overflow entirely. Try experimenting with either visible or hidden and see if your code works!
More info about overflow: overflow - CSS: Cascading Style Sheets | MDN
It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
Try also applying the CSS to the <p> element as well/instead, or even the <body>. The <span> may or may not be the element that's experiencing the overflow issue, after all. Your question is admittedly worded quite vaguely for us to tell how the problem manifests.
Here's what I know:
In HTML, the document's root element is <html>
A document's root element creates a stacking context, hence <html> is the root element of the first stacking context created in any HTML document
From this, I'd expect any z-index: -1 element to be positioned behind <body> (though in front of <html>) in a document where no other stacking context comes into play.
The following example, however, demonstrates otherwise in all modern browsers: http://jsfiddle.net/39q2u/
I've dug a little deeper in that second example: http://jsfiddle.net/39q2u/1/
Adding a background-color to <html> somehow makes the rendering engine realize that the z-index: -1 element should indeed be displayed behind <body>, effectively making it invisible since <body> also has a background-color set.
Interestingly, I've given a try to several other CSS properties, an none of them seem to have the same effect.
(The element remains visible in IE 9.)
Removing the background-color from <body> makes the z-index: -1 element appear again, proving it was hidden behind <body>.
The issue I'm having with this is how to make sense of that behavior:
Is <body> subject to additional rules when it comes to stacking contexts?
Why is it needed to set a background-color on <html> for the rendering engine to behave correctly?
Or did I just misunderstand something, somewhere?
The default background-color of html is transparent. Thus, elements with a negative z-index are displayed, because you can see them "through" the html element. The link provided by #thirtydot points toward the right direction, although perhaps this link: http://www.w3.org/TR/css3-background/#background-color might be more on point.
I am not 100% sure but I believe the body tag always follows a z-index which is relative to other elements to make it easier when ordering multiple elements on the page.
If you apply an attribute to html, it suddenly becomes, and behaves like any other element, therefore putting it's child element, tag, into use as an element on the page also. Think of it as if you have toys you can play with, then toys you cannot reach. By assigning an attribute to the html, you are bringing the toys you could not reach into reaching distance. You are allowing the webpage to use the and subsequently the
That made sense in my head but I am stood from a bias stance so I hope that helped!
actually your expectation working as described except for the background property
take a look at this snippet it a prove that p element under body after positioned with negative integer :
html{
border: 20px solid green;
width: 250px
}
body {
padding:0;
margin:0;
width: 200px;
border: 20px solid orange;
overflow: hidden;
background:red;
}
p {
position: relative;
z-index: -1;
background: yellow;
}
<p>helllllllllllllllllllllllllllllllllllllllllllo</p>
so we can now exclude z-index from reasons
and It looks like a weird behavior on background-color property
I think it's better to read about it by following this links :
https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/
Giving background-color to body applying whole page. Why?
I encountered a strange problem in IE 8/7 and I have gone through hell (and back) to reach a minimal test-case that demonstrates the issue...
Consider the following bit of HTML:
<form id="hover-test">
<fieldset>
<div id="hover">
<p>always visible</p>
<p class="hidden">Visble only on hover</p>
</div>
</fieldset>
<fieldset>
Please jump
</fieldset>
</form>
And this bit of CSS:
form { background-color:#f5f5f5; }
.hidden { display:none; }
#hover:hover .hidden { display:block; }
#link { position:relative; }
What it should do: On hover an additional paragraph becomes visible, pushing the next fieldset and all its contents down. (works fine in FF/Chrome/Safari/Opera)
What it does in IE 7/8: The paragraph becomes visible, pushing down the following fieldset. The link however stays fixed in place for reasons I can't fathom.
In the frustrating chase for a minimal mark-up that reproduces the problem (the effect vanished when I removed single lines of CSS from the original code, but my testcase could have them and still be fine... O_o) I identified at least three players working together here:
the fieldset: If I put everything in divs or in a form without fieldsets, all is well
the position:relative: Uncomment that line and voilá - link jumps.
the background color: This makes no sense whatsoever to me, but without this it works.
So, here's the question (apart from the implied "WTF?"):
Has anybody any clue on what is causing this behavior? And how to solve it? Or at least a hint into which of the many known IE issues I could look into to further test stuff?
Maybe I could come up with a way to bend the structure and...say... have the background-color on some additional wrapper div or something, but this seems... somewhat silly, and anyway, I feel as if not understanding this now will make things possibly very complicated down the road.
It was your comment about the position: relative that helped me solve it. That flagged me to think hasLayout! The issue seems resolved if you make sure both form and fieldset have layout set also (just giving it to the #link created the issue). One (among many) ways:
form, fieldset {zoom: 1}
See the working fiddle.
BTW: You should not have two #hover id's in your code. That should be set to a class (maybe it is just an error in your example, but I wanted to note it).
I am trying to code a page, and for some reason i have a random css spacing issue for my list that i created. On the bottom right i have a random space between the list and its div.
I am styling it fine i think but my code is here at jsFiddle
and it works fine there for some reason. Any ideas?
If needed i can supply the entire page link.
I want that whole entire css list to span accross the entire div but it has a huge gap between the left wall of the div and its list.
The list on the page you link to needs to have its padding (and potentially its margin ... some browsers have different default styles) cleared. Here are some rules you could use to fix this:
#navlist {
list-style-type: none; /* Removes default list style */
margin: 0;
padding: 0;
}
I highly recommend getting the Firebug extension for Firefox. It makes debugging layout issues like this very easy. It also helps you see whether the style rules you are writing are being overridden by a more specific rule elsewhere in your style sheet.
As an aside, you shouldn't be using the center element. That element has been deprecated, and should be handled via your style sheet like so: text-align: center;
Here is a link to my problematic page:
http://www.studioteknik.com/lamouvance/programmation.php
I'm trying to have a box be as big as the content injected into it (with PHP). It works on IE6 but not in Firefox... maybe I have done too many tricks, that the world is now upside down...
Please, help! I'm sure it a one line solution... Thanks in advance!
Note that the foot at the to should be in fact a full background picture (ok it's ugly, but the client ask for it), you can click on service, the image is just fine !
I hijack my own question.... IE6 is playing me mad, the mission (first in the menu) there is a calendar, the aout 2009 is supposed to be ON ONE LINE.... why its on two line in ie6 ?
I think I see the issue, try:
.content {
overflow: auto;
}
If you don't set a height, a box will stretch to fit content in it. If the box only contains floating elements, either add this just before the end:
<div class="clear"></div>
With this CSS:
.clear {
height: 0;
clear: both;
}
Or, a simpler solution is to add the style overflow: auto to the box. (Note this will show scroll bars if you have set an explicit height on said box.)