I've used the fix in this question to resize images in one single line and it works perfectly, that is until you get into IE then IE just decides to ignore it completely. Does anyone have a fix?
Here's what I used:
How to get multiple images to auto resize and stay centered within a div
Here's the page I'm working on in Chrome:
Chrome Visual
Here's the page I'm working on in IE:
IE Visual
Thanks :)
Related
I'm trying to implement a very simple video as a banner on a website using html5 tags. I just need it to be full width and responsive, which appears to work perfectly in Chrome and Firefox, but not Safari.
Here is a simplified version taken from a more complex wordpress page using exactly the same markup and the same happens.
http://noisilyfestival.com/video-test.html
I've set the video background to red, see in Safari there are huge gaps at the top and bottom whereas in Firefox and Chrome it sits flush.
Can't figure out for the life of me what's going on here! I've set the video to display:block which fixes the few pixel gap at the bottom but cannot resolve this. Thanks in advance!
I removed display:block; from #homepage-video and Safari looked just fine.
It was pointed out to me that on resizing the browser width the issue would correct itself. Therefore the intrinsic ratio technique is the most efficient way to ensure this works cross browser...
http://alistapart.com/article/creating-intrinsic-ratios-for-video
Works as it should now on all browsers I've tested it on.
While printing one of the pages, the content is zoomed in. This happens in IE8 which seems to be a Shrink to fit issue. This works fine if I render in IE 7 but then many UI elements break.
Is there a way to fix Shrink to fit issue in IE 8 using CSS or Javascript?
Thanks.
I have been stuck on this for a long time.
This page has several image icons to the left of the text content. These images get loaded perfectly fine in Chrome, Firefox, and IE9, but in IE8, they don't get loaded. IE8 is perfectly fine loading the actual image link directly, so I know it's not a fault with the image itself.
In fact, this only happens on that one page. The other pages are able to load images just fine.
Can anyone explain this huge mystery? Thanks!
the problem seems to be the css rule
.entry-content IMG
{
max-width:97.5%
}
When I remove it the images get displayed... do not know why this happens =/
edit
IE8 seems to have a problem with img tags where the width attribute and the css "max-width" attribute is set... maybe just remove on of them.
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input
Here is my site:
http://smartpeopletalkfast.co.uk/pp/
The very bottom menu is laid out correctly in every browser ive tested, including IE8 and IE7. However with IE9 its starts further to the right than it should and the twitter icon is pushed down to the next line. How can I fix this?
I tried to install firebug lite to see whats going on but I cant extract the firebug-lite.tar.tgz file.
http://getfirebug.com/firebuglite
Thanks
Turns out one of the relatively positioned divs needed to be given a set width.