I have two divs like this
<div style="position:relative; width: 500px; overflow:auto">
<div style="position:absolute; top:0;left:0;width:100%">
</div>
</div>
Now the problem in IE is Scrollbars start to appear unnecessarily for the outer div. Even when i have specified the inner div's width to be 100% it extends more than it is supposed to. Works fine in Firefox, Chrome. IE is causing problems.
Try removing overflow:auto property from outer div
Try specifying a margin-right:-1px for IE only using ConditionalComments ( apply it to the AP'd el )
Related
When I used CSS position:fixed, it never works at all in one of my site but works in other site.
I couldn't find out any reason. It works perfect in all of my developing sites in all browser.
However, position:fixed never works in one site only wherever I put it except for Firefox.
Example:
<div style="position:fixed">
This div is fixed
</div>
This never fixed its position.
Now the is fixed but it doesn't stick to the window when scrolled as it does in Firefox.
<div style="position: fixed; width:100px; height: 100px;"></div>
Don't put the div into relative container.
You have to set left/right and top/left position.
<div style="position: fixed; left: 0; top: 10px;">
It might be coused of parent element overriding your statement. Try adding
<div style='position: fixed !important;'>
Now I found the solution & working on it.
It was because I call some other css files. when i remove one of the css it works perfect.
I don't know why but it works..
I have a little dilemma. I could work around this issue, but it would be a pain to do so and still limit things in sense of how a site layout could work. Basically I've been using the following method to give myself a sticky footer that is actually height variable:
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
Example:
The CSS:
html, body {height:100%; width:100%; margin:0;}
.wrapper {display:table; width:100%;}
html>body .wrapper {height:100%;}
.wrapperRow {display:table-row;}
.wrapperRow.wrapperExpand {height:100%;}
.this-wont-expand-to-100-percent-in-IE {height:100%;}
The HTML:
<body>
<div class="wrapper">
<div class="wrapperRow">This is the header</div>
<div class="wrapperRow wrapperExpand">
<div class="this-wont-expand-to-100-percent-in-IE">
This is the content
</div>
</div>
<div class="wrapperRow">This is the footer</div>
</div>
</body>
CodePen: http://cdpn.io/ILisk
THE PROBLEM:
Well, the problem is this works just fine in Chrome and Firefox... however it does NOT work in IE 9 or lower (not sure if it does in IE 10). The 'wrapperRow wrapperExpand' div does have it's height set to an absolute height of 100%, which is the parent of the 'this-wont-expand-to-100-percent-in-IE' and that is also set to 100%. I don't understand why this doesn't work. Does anyone have a solution or work around to make that inner child div (the 'this-wont-expand-to-100-percent-in-IE' one) match the height of it's parent? (the 'wrapperRow wrapperExpand' one)
I'm starting to think that it's just not possible in IE... at least not without using java-script perhaps... unfortunately I'm really not that familiar with that. Any ideas?
Web browsers often tries to fix your bad-coding, but only smarter ones will succeed!
When you use table display type such as table, table-row for some elements, It's supposed to use table-cell for inner elements too. That's what you've forgot:
.this-will-expand-to-100-percent-in-IE {
display: table-cell;
height:100%;
}
Here is the CodePen Demo.
By the way, in this case, I'd prefer to use Ryan Fait's Sticky footer (instead of using a CSS table layout). You could also find a snippet on CSS-Tricks.
Consider the following HTML:
<div style = "overflow: hidden; height: 5em" id = "selections-outer-wrapper">
<div id = "selections-inner-wrapper" style = "position: relative">
<ul style = "text-align:left; width: 12em;">
<!---- LOTS OF LI ELEMENTS GO HERE ---->
</ul>
</div>
</div>
My intention here is that anything within the outermost DIV should be hidden (clipped) if it extends beyond 5em in height. (That is the purpose of the overflow: hidden style attribute.) When I render this HTML using Firefox or any Webkit-based browser, the inner content is correctly clipped.
jsfiddle link: http://jsfiddle.net/Q82N9/
Screenshot with Firefox:
However, with IE-7 it doesn't work correctly. (surprise, surprise) For some reason, the inner UL element is not clipped, despite the overflow: hidden property.
Screenshot with IE-7:
It seems the problem is the position: relative styling attribute in the inner-DIV. If I remove that style attribute, it works fine on IE-7. However, I need the inner-DIV to have a relative position, because certain Javascript code that I'm working with assumes it does in order to scroll it up and down.
Question: So, is there some reason this isn't working on IE-7? Is this a well-known problem with a workaround? Or is IE-7 actually doing the right thing and for some reason relatively positioned nodes can't be hidden using the overflow property.
Add position:relative to container with the overflow declaration, and problem should be solved.
I want to construct a timeline that has horizontal scrolling.
I have a wrapper DIV, inside it has months. Each month is a DIV inline-block. This works:
<div class="wrap">
<div class="month">Jan 2013</div>
<div class="month">Feb 2013</div>
...
</div>
This almost works, but because my clients site uses tables for layout the scroll bars don't work. This fails:
<table><tr><td>
<div class="wrap">
<div class="month">Jan 2013</div>
<div class="month">Feb 2013</div>
...
</div>
</td></tr></table>
Here is a jsfiddle to show what I mean: http://jsfiddle.net/fhL9u/2/
NOTE: The top timeline example works as you resize the browser. It is 100% width of the page (or containing element.)
How do i make the second timeline overflow correctly? It must take up the remaining width of the screen (no with: 100px hacks), and if possible only show scroll bars when the months overflow.
This is an internal application so I can tell people to use Firefox or Chrome if I need to. This means I can use advanced CSS3 stuff or browser specific ( -webkit or -moz ) stuff. I'd prefer that it was IE8 compatable (just for my own curiosity)
If you can fix the width of that text (in pixels or percents) use this solution:
table {
table-layout: fixed;
width: 100%;
}
td:first-child {
width: 100px; /* or width: 15%; */
}
Note that you can use a different selector for the text (like a class)
Possible solution....
The main issue may be that the "Site Navigation" cell is part of the scroll area.
table { display: block; }
Then assign the .wrap class to the table and remove the div encompassing the months.
Fiddle here
only tested in Chrome.
You could just put a width on the div.wrap, say 400px- that works and is just one line of code:-)
has anyone got the bug on Opera (and others) but not IE6 (here everything is OK) when the block (DIV) has a background-image (no-repeat) does not appear if the block has negative margin? Something like this:
#slide_desc {height: 60px;margin-top: -84px;background: url('back/slide_desc.png') no-repeat;}
IE6, IE7 - OK
IE8, Opera, Firefox, Chrome, Safari - BUG
No background image no PNG hacks
Just this HTML:
<div id="slider"> <img src="img/slide.jpg" height="300" width="730" border="0" /> <div id="slide_desc"> Lorem ipsum </div> </div>
and this CSS
#slide_desc {margin-top: -84px;background: url('slide_desc.png') no-repeat;}
If I add position: relative - works in Opera but doesn't work in IE6
If I change to position: fixed - everything is great but I'm not sure it's perfect way to solve the problem.
Becase of scrolling this scrolls too.
Looks like you just need to give it a height and width or else it is only as big as the text in that div:
Here is a fiddle:
http://jsfiddle.net/VrEvA/
And another with the background in the original div:
http://jsfiddle.net/VrEvA/1/