I'm trying to figure out why my site appears to be displaying a dropdown panel ok in FF, Chrome etc., but not in Internet Explorer (7+ as I don't support IE6 now):
http://www.thelivingleader.com/
The image on the lefthand side is disappearing, the link with id #offerbtn isn't styled properly and the panel shows by default. I'm also getting an error message from IE saying:
The instruction at "0x3fa07838" referenced memory at "0x000000008". The memory could not be "read".
Could it be to do with my jQuery statements in the footer of the document? Any help figuring out what's going wrong here massively appreciated...
Thanks
Osu
Edit - here's the code: http://www.pastie.org/2541961
An element that does not exist in the HTML specs will be ignored or at least behave very bad in IE. Other browsers might accept it, but for future compliancy I would encourage you to stick to the HTML specs.
The offer element is unknown, so will be rendered depending on the browser's goodness towards your document. IE7 will crunch it.
But how about tablet browsers, Linux browsers and all others?
Related
I'm having a PITA issue with a website.
The Safari mac browser (the desktop one, specifically, mobile safari appears to work) is randomly ignoring some of my CSS -- most notably the background color applied to the HTML element. Refresh and it may -- or may not -- go away. Even more perplexing, the browser clearly knows that style is there! I'm using media queries to create a responsive site, and if you change the width enough to trigger a style sheet switch... it suddenly comes back, and everything works properly.
How the heck can I debug this? There's no error output in the console, the same data is getting sent every time (as far as I can tell...), it's not that one of the files is failing to be found (some of the CSS that is being applied is from the same stylesheet as the background...).
I'm at a total loss as to how to even begin debugging this one.
Edit:
If it's helpful, I just noticed that reader mode doesn't work on the refreshes the exhibit the broken behavior, even after the changing width trick fixes the background.
Edit:
This bug apparently also effects the mobile version, but instead of hitting the site-wide css, it's attacking my media-query based layout css.
You could, assuming you have the developer menu enabled, check Develop -> Disable Caches. This sounds like a caching issue.
If you don't have the developer menu enabled, enable it with settings (cmd+,) -> advanced -> show Develop menu in menu bar.
I'm seeing this in Safari 5.7.1 on Windows 7. It looks to me like Safari is actually ignoring commented out CSS. I removed all the comments, and now Safari seems to be behaving. But this is random for me as well, so I am not sure.
I have this website, http://www.escuelita.info. Now I tried many times to make it work on IE 7 (possibly IE6 too didn't check) but for some reason the middle frame on the right doesn't show content.
If you compare it to Firefox or Chrome (or even IE8) it works ok.
I need to fix this but I'm not sure what's causing the problem..
Note
I checked with IE7 and the pages don't show content
(the main content DIV content_outer)..
The content shows below the sidebar. Either IE7 enters quirks mode or you trigger some sort of bug that causes IE7 to misbehave.
Double check your doctype, tags and most importantly, get rid of those nested tables. Nested tables are EVIL and I'd bet they're your culprit. Use CSS grids (here's one that's really good: http://www.1kbgrid.com/) instead.
Dunno if this solves your problem, hopefully so.
Hopefully now I'm posting the right question :)
In web application I'm using devexpress toolkit, and have the right (correct) result in IE only (using also some java-script), on clicking event for example is working in chrome and safari, but in Firefox and Opera not :(
The grid view are not showed properly in division in any other browser, except IE!
Have you got any idea where I'm missing something ?
You are most likely using non-standard features that are only supported in IE (and perhaps a few more, depending on the feature).
If the page only displays as intended in IE, the code is incorrect and relies on non-standard features or rendering errors in IE. IE has several rendering errors that no other browser has, which makes it less suitable as the first stop for testing. If you build a page for IE, it's almost a guarantee for it not to work in any other browser.
To make the page render correctly in all browsers, you need to first make it work in a browser that follows the standards more closely, like Firefox. Trying to get other browsers to emulate the same rendering errors that IE has would be very time consuming, and doesn't give a robust result.
You might need some extra tweaks to make it render correctly in IE, but this can usually be accomplished in a standards compliant way, for example by setting a specific size on certain elements.
Mine is solved by that...
Devexpress Gridview properly Rendering problem for browsers
I am pulling my hair trying to find a fix for this problem. If you go to this site you will see that (under IE) the slider and the menu on the top is broken. Works fine under all modern browsers.
Any idea how to fix this? Thanks.
Edit: Want to add that the original site design works fine under IE. I did a massive amount of editing under the hood and somewhere along the line this one was broken that I can't seem to find a fix for. Since I did a lot of customization, I think it seems unfair to ask the original author for a fix (and he is not very responsive either).
The document invalid. In particular, there is a <style> element before the Doctype. This triggers Quirks mode and causes browsers to become very inconsistent (e.g. IE emulates a log of bugs from IE 5.5).
Always work in standards mode and perform basic automated QA.
I can't check it for you, since I've not got access to IE right now, but I've often found that adding position:relative to misbehaving elements is something of an IE magic bullet.
No fix but a lead: the issue with the menu bar is one of IE's mysterious float positioning bugs, as can be demonstrated by putting <div style="clear: both">xxx</div> after the navbar ul. (Note that it won't work if the div has no content!)
stuff about box model deleted: as David Dorward mentions this is caused by quirks mode, and moving the style down past the doctype causes the slider to behave sensibly.
I'm trying to learn CSS. I've taken great pains to get everything right. My pages all validate and they look correct on Firefox and mostly correct on Chrome. However IE is all over the place. In relation to Firefox, the following is wrong in IE (in order of importance):
the main body box is pushed below where the left boxes end
the upper-right drop-down stuff (mouse over "Settings") is totally off in the weeds (it's off in Chrome also but in a different way)
"Recipes" tab is supposed to have no visible bottom border
search button is askew in relation to search box
logged out version: the upper-right login elements are askew
Logged in,
Logged out,
CSS,
Links, functionality, etc. are not guaranteed to work on these pages. It's just static snapshots to show layout.
Can anyone point me in the right direction for whatever I'm doing wrong?
You need to Reset your CSS (Dean, above recommends Eric Meyer's Reset CSS). I prefer Yui Reset CSS (I actually like their own Reset / Fonts / Grids CSS). As part of doing this you also need to use Standards Mode.
Finally, you need to be aware that some things will differ in browsers no matter what. So if you run into this situation, it's either work around it, or live with it.
What version of IE are you running? Sounds like most of your issues may be caused by the IE Box Model Bug.
I never start a new website design in css without putting Eric Meyer's Reset CSS in first.
It resets all the differences in all the browsers, so that you've got a even playing field to start from.
From there-out, everything should be the same in all browsers.