I have my page up at http://www.playcademy.com/nolimits_mockup.php, and I am getting a bunch of whitespace below the slideshow in Chrome, though it isn't appearing in Firefox or IE.
When I inspect elements it seems that the headlineArea div is in the correct spot, but everything inside it is about 70px too low.
I'm sure I am missing something basic, but I have no idea what.
Thanks,
Doug
Your #slidearea div is too wide.
#slidearea {
display: inline-block;
text-align: center;
position: relative;
width: 915px; /*This was 920px. I narrowed it down to 915px.*/
height: 83px;
overflow: visible;
}
You need to apply a clearfix on headlineArea in order for it to display consistently because it only contains floating child elements.
See: What methods of ‘clearfix’ can I use?
Related
When you scroll with the mouse wheel in Windows 8 the fixed background image bounces around like crazy. This only affects IE 10 and IE 11. This affects elements with position:fixed as well.
Here is an example with a fixed background-image:
http://www.catcubed.com/test/bg-img-fixed.html
Here is example code:
#section{
position: fixed;
top:0;
left:0;
background-color:#eee;
background-position: top left;
background-image: url("images/7.png");
background-size: auto;
background-repeat: no-repeat;
z-index: 10;
}
Is there a solution to keep the background still in IE 10 and 11?
I know it is a bit late for an answer but I've had the same problem and was able to fix it by adding these attributes to my css file
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
From the comments:
This solution stops scroll events from firing on the window, so do be careful if you're using anything that relies on such events firing. codepen.io/anon/pen/VawZEV?editors=1111 ( overflow: hidden, scroll events don't work) codepen.io/anon/pen/PNoYXY?editors=1111 ( overflow: auto, scroll events fire) - Dan Abrey
So this might cause some problems in your projects. But I don't see another way to workaround this bug in IE.
This looks like a z-index bug, try adding z-index: 1.
Looking into this, I've found the best way to debug is to:
Create a simple element at the top of the page, e.g.
<style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
<div id="test">Test</div>
In all the above cases, this works correctly, and the scroll is smooth. So this proves it can be done! Now slowly add your properties back in, until you are able to get the element with position fixed to work in the context of your site.
I then found that adding a z-index to the fixed items resolved the issue. (e.g. z-index: 1)
I also discovered that once a position is set on a child element, the bug presents it's self from that point down/onwards.
So you need to ensure none of the child elements have a position set,
or if they do, you explicitly set a position on each child.
E.g.
<!-- Works -->
<div style="position: fixed;">
<div>Nice</div>
<div>Wicked</div>
<div>Cool</div>
</div>
<!-- Element with position: relative, experiences the bug -->
<div style="position: fixed;">
<div style="position: relative;">sad</div>
<div>sad</div>
<div style="position: fixed;">happy</div>
</div>
It's fixable, but will require some tweaking!
Here is a workaround (tested on Windows 8.1):
Move the "background" CSS property to the BODY element. Currently it is on the DIV element with id="filler". Here is the resulting CSS:
body {
font-family: Helvetica, Arial, sans-serif;
background: #fff url(blue-kitty.jpg) no-repeat fixed center 100px;
}
#filler {
text-align: center;
}
.big-margin {
margin-top: 500px;
}
try to turn off smooth scrolling option.
Internet Options - Advenced Tab - Use Smooth Scrolling
it's like rendering bug.... MS IE team is investigating....
just simply define body container to relative.
<style>
body
{
position: relative;
}
</style>
The fix in my case was to simply remove the z-index property from the element that has position:fixed, IE then stopped the strange flickering.
(disabling smooth scrolling on IE options worked while having he z-index property but that's not a solution since users would most likely have it on by default).
If I remove the clearfix div, above the footer, the text falls into place, as it does on Firefox.
But that breaks other things. I don't understand how that clearfix can be affecting the footer at all though...
My page:
http://www.craftonhills.edu/Current_Students/Counseling/Assessment.aspx
It looks like your footer element as these style rules associated with it:
#footer {
clear: both;
font-size: 1.4em;
height: 150px;
margin-top: -150px;
position: relative;
}
If you remove the margin-top: -150px rule, it looks like that clears up Chrome.
In the #content style, it looks like you have a padding-bottom: 150px; rule that is pushing everything down quite a bit. Might want to reduce that a bit as well.
If your goal is a Sticky footer, for some reason adding the margin-bottom: -150px; rule to the #container element worked in Firefox, Chrome, and IE for me. However, I think it's a bit higher than 150px.
I ended up adding a .push div below my clearfix div, giving it a height of 180px (the correct height, with padding, rather than 150px). Not semantic, but it seems to fix Chrome.
I'm trying to AP a div in the header of my blog containing a bg image and a link. I looks correct in Chrome, but incorrect in Safari and Firefox. I suspect it's not the AP div itself but other elements causing the shift, though I can't figure out what, and I'm using a reset.
Here's a link to screenshots show you what I'm talking about:
http://imgur.com/a/hP8dM
Here's a link to the website:
http://www.artyst-tyrant.com/blog
Here's the css I'm using:
#trex-blog {
margin-left: 435px;
position: absolute;
top: 50px;
z-index: 50000;
}
#trex-blog a, #trex-blog a:visited, #trex-blog a:hover {
background: url(../img/blog-trex.png) no-repeat scroll 0 0 transparent;
display: block;
height: 121px;
width: 356px;
font-size: 0;
line-height: 0;
overflow: hidden;
text-indent: -9999px;
}
Here's the html
<div id="trex-blog">Artyst Tyrant - Victor Beazzo Designer for Hire</div>
Designer by trade who's trying his hand at learning to code, but I'm by no means a pro, so please, go easy.
Thank you in advance for your help, it's really appreciated.
Chrome v18 on Win7 renders the image in the same place as my other browsers - perhaps you were browsing a cached version on chrome only?
The only caveat to absolute positioning elements is if they are wrapped in a relatively positioned element - then the absolute position is relative to the parent - http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I looked at your source code and didn't notice any position relative attributes on the parent elements.
I adjusted the css top attribute value to 20px and it aligned for me in all current browsers.
I have a div with margin-top:-200px. I want the div to move up/behind the div above it.
Works great in all browsers except IE so far. margin-top:200px works, so I know it's not a collapsing margin issue.
Is there a bug I am not aware of here?
IE doesn't like negative margins and doesn't render them properly. Position your elements relatively or absolutely and use top: -200px instead.
Note: positioning them may change the layout significantly and you may have to rework your styles.
Negative margin hide the div…
Here is trick
use zoom:1, position: relative
Problem:
.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
}
in IE red area of toolbar div hide itself. even we are using zoom: 1. to get rid of this problem we need to add position: relative too.
Solution:
so your css class will become
.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
zoom: 1;
position: relative;
}
http://trickyclicks.com
If the above doesn't help: make sure there's a div around your offending div. Now add a width of 100% to the offending div and float it to the left. Like this. Got rid of all my negative margin ie woes...
div.container {}
div.offender /*inside div.container*/ {
width: 100%;
float: left;
margin-bottom: -20px; /* ie fix */
zoom: 1; /* ie fix */
position: relative; /* ie fix */
display: block;
}
give position as relative. inline style is advisable. It may give some problem if you use external css.
In order to support negative margins in IE, I've fixed similar issues with display: table;. Other fixes like zoom: 1; and position: relative; don't always work (at least in my experience). If you only want to add this style to IE, I'd suggest using https://modernizr.com/
// using comment to show that .no-cssreflections belongs to the html tag
/*html*/.no-cssreflections .container { display: table; }
I'm trying to create a dynamic site where I have three floating boxes next to eachother. They are 33.33% in width each. The container div around them is 75% in width.
I've found an article about the problem here: CSS: Jumping columns
I've also found an example of the same problem here: Jumping columns example
Drag the window size to see the jumping in IE7 or earlier.
Anyone knows if it's possible to get around this? (without Javascript)
I use two different solutions depending on the situation. First, try the Nicole Sullivan approach (using overflow: hidden; on the final element in a row instead of float/width):
http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
.container {
width: 75%;
}
.box1 {
width: 33.33%;
float: left;
display: inline; /* fixes another IE bug */
}
.box2 {
overflow: hidden;
}
This works in most cases.
Failing that, I add a negative margin of several pixels to the last element instead.
.box2 {
width: 33.33%;
float: left;
display: inline; /* fixes another IE bug */
margin-right: -3px;
}
If that last element is floated right instead, just add the negative margin to the left. So far that has worked for me in the few cases where overflow didn't fit.
In a situation like this, I would tend to get round the problem using an IE-only stylesheet that fudges the values until they work. In this case, just set the widths to 33%, it won't be perfect but then that's just the nature of the web.
I think that a simple answer might be to not round at all, just create a final "spacer" element with a 1% width that shares the look of the 1/3rd elements. Even IE should be able to deal with a 33 + 33 + 33 + 1 rounding.
I had the same problem. ie7 did not render 33.33% correctly. It would work with 33% but then it was a hairline off. I used the advice from the second block of code in the first response above, plus a little ie hack. It worked for me, I hope it helps.
.all-boxes {
width: 33.33%;
float: left;
display: inline;
*margin-right: -1px; /* Add the asterisk */
}
The margin value might need to change based on your implementation, but 1px worked for me.