I have an issue with my homepage in IE7-8, it seems that the slider wrapper with the background image, for some reason is not being rendered, forcing the inner div to not be centered and look all messed up.
Take a look here, it all works fine in Chrome, Safari, Firefox. But not IE! How do I resolve this issue?
You are using HTML5 tags, those are not supported in older browsers.
Still HTML5/CSS3 is not supported for IE so please tryout with other tag like div or any block tags
Just for your information, the Html5shiv script allows you to use HTML5 tags on older browsers.
Related
My site is www.elansz.com. It looks good in Google Chrome but in Safari a lot of the elements are positioned to the right too far. How can I fix this issue? Thanks!
you need this on your site
https://necolas.github.io/normalize.css/
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
We have a site here and it displays a white background correctly in all modern browsers, Ie9-11,Chrome,FF,Safari, etc. However, OF COURSE, IE 8 messes it up and seems to make a transparent background and I have no idea why. This is also on the news page only so I'm wondering if it has to do with the horrible tables-based layout SharePoint is using (I'm not a fan). Here's the URL.
Thanks in advance for any help you can provide!
It's not about IE, it's about html. My guess is that IE is in the Quirks Mode (as are all the browsers) because you have a leftover closing comment close to your doctype. Correct it.
P.s. All the new browsers have to arrange the code by themselves too. If you inspect the site and look into the DOM you'll see that instead of the <head> all your links and metas are in the <body>.
I have a HTML page where i have div to show help as shown in image above at bottom.
I also have combo box (select input) which is comming on top of this help div in IE 6.
For other browser and and IE6+ versions, it is working fine.
Is there any CSS hack for this issue for IE 6?
This is a very famous and old bug with IE6. What you need to do is to have an iframe before the div. This bug is quite well documented. It happens because in IE6 select boxes were ActiveX controls and were meant to be above all the elements of the page. iframe is also an ActiveX control and can be set above the select box. You can read up about the hack on this website http://www.javascriptjunkie.com/?p=5.
I am pretty sure a similar question has been asked around on SO as well but I couldn't find it.
There are well-documented CSS hacks for all the versions of IE.
For IE6, use the underscore hack -- put an underscore character at the front of the selector to target just IE6.
This page has full details: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
As i know, by default IE6 will put above the other elements.
You could hide them (display: none) when this div.help is shown
I have an HTML5 canvas image where I've drawn some points and I want to align some div tags and text input tags next to the points.
Unfortunately, browsers do not agree with the space between each div and input tags.
I've found a hack for the input tag, by specifying height with CSS. Now input tags have the same space between them for every browsers. It seems the default height of input tags was not the same depending on the browser, very very weird.
I've tried the same thing for my div tags, but I can't get the right alignment for every browsers.
text input tags alignment working with every browsers with CSS hack:
http://jsfiddle.net/baptx/XcKZj/
div tags alignment is not the same depending on the browser (configured for Firefox):
http://jsfiddle.net/baptx/92gPY/
I'm using Firefox on Linux and I've noticed that Windows version does not render the same margins.
Chrome does also not agree with Linux Firefox, when running on Linux or Windows.
Opera is great, it always agree with Linux Firefox, running on Linux or Windows.
I first thought, it was due to web browser engine, Gecko rendering differently compared to Webkit, but if Windows and Linux version of Firefox do not agree, it should be something else.
Has anyone and idea where it comes from and how to fix this with div tags?
Why: because the prescribed stylesheet does not prescribe spacings like margins.
The solution: use a CSS reset stylesheet, and explicitly declare your own defaults in your site-wide stylesheet.
Here's a website with some resets: http://www.cssreset.com/
It sounds like you need to include a reset css into your styles. This will help unify (but not completely eliminate) the differences between browsers.
Here are two popular resets:
Eric Meyer's reset
YUI Reset
Has anybody else encountered this. Whenever the images are intially loaded by the browser it only shows the last-half of the image. Then when I mouse over anywhere in the green section it immediately displays the rest of the image.
What you're seeing here is a <div> with a background-image and a <img> located within said <div>.
I'm encountering this issue using Safari 3.2.3 for Windows and my colleagues have seen this using the Mac version. None of the other browsers I have tested this in seem to show the same bug. I've tested in IE8, IE7, IE6, FF3, Chrome, and Opera.
Let me know if you've heard of any fixes. Thanks.
Safari Image Bug http://www.pixelwhiskey.com/images/safari_image_bug.jpg
Try using PNGs instead if GIFS
I've seen issues similar to this with IE rendering solved by setting height: 1% to the affected div or to an element nested within it. I've never seen it in Safari though.
Inspect all of the elements near the image in Firebug (yes, I know the problem is in Safari) and make sure none of them has the wrong size for any reason, and none of them has excessive padding that encroaches the image you're not seeing correctly. Also, try setting overflow: visible; on the style for various elements in the vicinity; I've seen mouseover flickers in the past, but nothing that couldn't be overcome with CSS.