I've created a jsfiddle:
http://jsfiddle.net/daFalk/dx3xLgLq/2/
its all about the css styles
div.ding-wrap {
position: absolute;
}
As you can see there is an image well positioned if you open it with chrome or any other normal browser.
But if I open it with internet Explorer the image is gone! I need to change the positioning of ding-wrap to relative.
i would do so, but then my animations (not there) does not work very well. So I need the positioning absolute. How can I teach IE to take me serious?
Thanks, Falk
jiangshui gave a push in the right direction. I stopped centering via table and table-cell and used
margin: auto;
height: 100%;
for centering. Sadly, always if I googled vertical centering, everywhere I read only about the first method because the auto-margin shouldnt work. And I never tried. So thanks a lot to jiangshui!
Here the updated jsfiddle:
http://jsfiddle.net/daFalk/dx3xLgLq/5/
Related
I've a problem with css positioning. I would like to display the same web page on my tablet device as on my PC. On PC I'm using Chrome web browser and everything works fine, but when I'm trying to display the same content on Safari web browser on my tablet device, then I obtain the same result as on the attached screen (part of my div content is hidden by the external element). What is the cause of this behaviour? Any ideas? CSS for DIV ELEMENT is:
position: fixed; max-height: 300px; width:200px; overflow:auto; z-index: 100000
Attached situation on:
http://imgur.com/dSueHvV
Changing that from overflow: auto to overflow: visible should solve the problem.
Thank you Josh for answer, but it didn't resolve my problem. It was caused by:
-webkit-overflow-scrolling: touch;
All my divs had this global setting which caused this strange behaviour on mobile devices.
We can read, that is native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms).
I have a self-written lightbox that dymically loads up content from a database, and the result is something like this:
<div class="lightbox">
<div class="lbtop">
</div>
<div class="lbcontent">
lightbox content
</div>
<div class="lbbot">
</div>
</div>
All elements in the lightbox are block-level elements, and are floated (this includes sub elements like p, h1 etc).
The lightbox uses fixed positioning to make sure it is always on the same place like this:
.lightbox {
width: 320px;
height: auto;
z-index: 999;
position: fixed;
top: 0;
left: 0;
display: block;
overflow-y: scroll;
}
So far so good. Adding content to the lightbox is also no problem at all, and the elements all scroll nicely.
But when I then try to add iframes (specifically: soundcloud embeds) inside the lightbox, then the iframe elements scroll differently than the other elements inside of the lightbox like this:
In this example, I've just scrolled down and the iframe element now moved over the text, in stead of staying in place.
I've tried tons of solutions using different combinations of CSS position, overflow and even tried to build my own jQuery powered fix for this (wrapping the iframes in a correctly positioned div), but to no avail. All in all I get the feeling it might be a bug in webkit (i have the problem on Android, the website I'm developing is a mobile site). I did solve the bug in iOs using -webkit-overflow-scrolling : touch;(anyone, is there an android alternative for this?).
Searching the web for a fix also didnt give me any usable results. The closest I got was setting the position of the lightbox to absolute, but this affects the functionality of the lightbox and it does not satisfy me.
I would love any suggestions on this :) thanks in advance :)
After a while I managed to solve this. It was an issue that was only showing up in the android emulator(strangely) from the SDK. Too bad I spent so many hours to fix it but I figured it might be nice to stop other people from wasting time..
If you run into this issue, double check on a physical android device as for me the problem didn't exist there (across different OS / browser versions)
In iPad an iframe doesn't display the shadow properly if its position is fixed.
position: fixed http://jsfiddle.net/akRsC/
position: static http://jsfiddle.net/akRsC/1/
Anyone knows how to fix this aside from removing position:fixed?
EDIT:
For some reason, the shadow is displayed when viewing the example inside jsfiddle but not in jsfiddle '/show' which is why this was my original link. I don't know why and I don't know how to make the css rules that make it work inside jsfiddle.
Did you try:
-webkit-appearance: none;
? Was useful to me for a lot of weird CSS stuff (but nothing to do with box-shadow).
And also, take a look at: http://cubiq.org/webkit-weird-box-shadow-bug-with-fix
I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.
I'm working on this site - [link removed]
It works in everything other than IE7 and IE8 in compatibility mode (don't care about IE6), where the vacancies lists on the right aren't hidden correctly by their parent overflow property.
I have been pulling my hair out trying to get to the bottom of this, its driving me up the wall, anyone got any ideas whatsoever?
Below is an image of the issue, chrome on the left, IE8 compat mode on the right.
Cheers, -Ben
[screenshot removed]
If you use Firebug's inspect element on your list, the div with classes "rssWrapper rss1" have these styles: "overflow: visible; height: auto; width: 248px; padding-right: 0px; position: absolute; top: 0px;"
You probably should also specify a height for this one(even just for IE7/8) since it is the one that overflows.
Your XHTML isn't sent as application/xhtml+xml. Either send it as the correct MIME or get HTML 5.
Couldn't figure it out so I'm just doing a javascript workaround.
Thanks anyway guys