I am having a real hard time developing for Internet Explorer.
Below is a snapshot of a project as it appears in IE9 and below that in Google Chrome it looks the same in Firefox as well.
Some of the things not working correctly in IE9 on this page...
The navigation bar, the links are stuck at the top in IE instead of vertically centered
The navigation bar does not have the box shadow applied in IE
The sidebar and content boxes do not have either the shadow or beveled corners in IE
The Tag boxes do not have the round edges in IE
In the content section, notice the 2 tags "CSS" and "FONTS" on the right side of page are pushed down, in the Chrome version they are aligned.
The project is not online so I can't show it but I have put the header section into a JSSFiddle page here http://jsfiddle.net/kenLs/3/embedded/result/ you can see that this JSFiddle of the header DOES work correctly in IE9.
That really has me confused, it works on JSFiddle but not on my site. I have looked at everything I can think of to make it work correctly. I even added <meta http-equiv="X-UA-Compatible" content="IE=9" /> to my header. I had some HTLM5 elements on my page but I replaced all them with regular div's just to test with IE, nothing I do seems to change any of these problems.
IE9 snapshot
Chrome snapshot
I know this is hard to debug since the project is not online but if you have any ideas why this may be happening I would really love to know.
UPDATE
I just realized that on that JSFiddle, if I turn off Compatibility view then even the header will look like the one in my image
I also added another simple JSFiddle test that just has the code for my tags, even this little code does not work correctly in IE, I have to hit the compatibility mode for it to work otherwise the corners are square http://jsfiddle.net/j9Qe3/1/
If it works in jsfiddle but not on your site, I wonder if you are using a doctype or if there is anything placed before the doctype which would put IE into quirks mode.
Related
I am working with Foundation 4 plus WP and came across a very interesting issue and this is not a UTF-8 issue.
Page rendering in Chrome:
http://www.nmjgraphics.com/imaging/chrome_ren.jpg
Page rendering in Firefox (IE 10 loads the same way):
http://www.nmjgraphics.com/imaging/ff_ren.jpg
In both FF and IE the top navigation renders perfect out of the box, but in chrome it is bumped down by 30px. Now I can apply a margin of -1.9% 0% 0% 24.5% and that gets the menu back to where is "should" be on the browser, but IE and FF shift the menu by -1.9% and that cuts the navigation in half. In addition to that I also tried using the top element setting at 100% initially and then using "inspect element" in chrome move the number down to 0 with no effect at all.
This has not been tested on Opera or Safari, but my assumption is they will render just like FF and IE.
I do apologize for the links instead of images, but I need 10 rep just to add images to the question and I can only post two links, but I did have a total of 3 images showing the rendering on the three browsers. If you want to see the ie rendering, just change the browser name to ie_ren.jpg.
solved it. I was pulling my hair out for nothing. Page renders fine if I am not logged in. I completely forgot about the bar. I figured that if I wasn't placing it in the theme it wouldn't show up at all. Learned something new there. I will either add the bar (which I should) or disable it all together.
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
I designed this basic web page which appears perfectly fine in IE and Firefox but not in Chrome.
URL to the demo web page
You should not see the yellow color on top of the navigation. If you check the web page in different browsers, you will see what I am referring to.
Thank you,
Your problems lies with a#NavigationMenu_SkipLink, which contains a 1x1 image.
floating the anchor solves the problem for me and has no side-effects on your layout in Firefox.
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.
I'm in the process of creating a website.
This website works great in Chrome (10), FF (3.6.13), however only half of it works in IE (8). Now, I'm aware of some of the issues between browsers, but this one has me stumped. Because half of the script is working (displaying properly) -- the other half does not.
A live version of the website may be found here
Additional information:
I am using the html5 doctype, <!DOCTYPE html>
I have validated my site with HTML5 as well as HTML4.01 STRICT
EDIT
At the request of Zabba, here is what SHOULD be happening:
I am externally loading content from other sources into my website.
My menu(s) and the text. In Chrome, and FF the menus, and the content are loaded and displayed. In IE, the menus are NOT loaded bu the content is. Funny enough, the logo also stops loading in IE.
EDIT
The problem has been narrowed down to a CSS issue, thank you!
The issue is in your CSS, not your JavaScript. Try these suggestions:
Remove your filter:alpha(opacity=80) from the #body block in your CSS.
Set z-index values of >5 on the missing items, since you have z-index:5 on #body. Or remove the z-index from #body.