I'm trying to use the position fixed css on a simple one page website with vertical scrolling but am facing problems with IE9, it's like it's ignoring the fixed property, you can see the website here
http://cairocubicles.com/sandbox/mahaly-iphone/
looks right on chrome, firefox.
Appreciate the help.
Yehia
Try adding a doctype to make sure IE9 isn't going into quirks.
This took me a while to figure out.
I was writing some javascript using which contained code to write to console.log. Never noticed it was a problem as i never use IE and nothing appeared to be broken in FF or chrome. I had the js above my declaration and that was what was causing the error. you shouldnt put anything browser side before that declaration.
Related
I have come across a few issues on a Joomla site that I have built using Joomla 3.5.1. I have written CSS to ensure that the site is responsive and this all works fine.
The problem I have is that the site's header shows up different in the following browsers and versions:
Firefox 48.0.2 (this shows up fine)
Chrome 52.0 (telephone number out of place)
Internet Explorer 10 (telephone number and search bar out of place)
I am not sure how I can target for the site to work correctly in Chrome so therefore not sure how I fix this in my css. I was under the impression the site would show up the same in all browsers like Chrome, Firefox and it would only be Internet Explorer where I can target different styles, but there is something thats not quite right.
The site's URL is: http://www.leicesterbakery.co.uk
I would appreciate it if somebody could give me some advice on how i can fix this, as I have tried the inspect element in Chrome but can't pinpoint how to fix it.
Thanks in advance.
FF and Chrome render fonts in different way, there is always 1-2px different. You can try to use a bit smaller font, or make parent object a bit wider - try to reduce padding for phone icon - you will see this will also help in Chrome.
About IE - think it is issue with floats. i'm not sure how to fix it,
Maybe try not to use so big padding-left for Phone icon. think better solution for icon can be position: absolute;
on a website I am working on I have problems with an rendering issue which I can't figure out.
I've already played with margins, positioning, z-indices and so on to get it away but nothing of that helped.
It only occurs in IE8 (under Windows XP, don`t know if on newer OS also). I know IE8 is a bit deprecated, but because the rest of the page is displaying fine with it I would also like to support it, since some of my visitors may have installed it.
If you take a look at the page you can identify the issue very fast when using IE8:
http://kunden.tommy-computer.at/fsv_noetsch/
Here is what the menu headers look like in modern browsers like FF/Chrome/Opera/IE>8:
And here is what they look like in IE8 (wrong):
How can I get rid of it. Please help, can`t figure it out why this happens. Thank you very much !
You are using the new html doctype and I noticed you are also using at least one html 5 element article. IE 8 won't recognize that element, or anything related to html 5. You need to use javascript to fix IE by using a script called html5shiv.
What this will do is inform IE of the new elements so they can be styled.
I have a problem with some divs on Safari, the margins are completely messed up.
The weird part is that it works perfectly fine on Chrome & Firefox. If I implement a fix made especially for Safari, it gets messed up on the others.
Help ?
Thanks !
The problem is caused by a missing left declaration. Add this to your CSS:
#pull_link {
left: 50%;
}
You may have a small error/errors in your code that is tripping you up (e.g. perhaps you are missing a closing tag that would cause container collapse and then your clear fix is not working). Check safari developer tools against chrome developer. You should be able to locate the problem that way. Sometimes one browser will function with an error another will not. Without more information it is hard to be conclusive here. Have you tried w3c validating the html http://validator.w3.org/ ? You can catch missing syntax that way also.
This page is being rendered incorrectly by IE 9 (and probably older versions too). The right menu is floating to the bottom of the page. Firefox, Chrome and Safari are rendering it correctly. Other pages in the blog are also being rendered fine by all browsers. I already tried to fire IE 9 Developer Tools (F12) and reduce the width of some divs (such as #main and .columns-inner)... no lucky with this approach, even with extra space the right menu is still rendered at the bottom. So I figure that the problem is in the Blogger auto-generated tags / css for the page content (which I am able to modify). Any CSS gurus out there can point what is wrong?
Cheers,
You have this line in your <head>, which is causing IE9 to render the page in IE7 mode:
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
If you remove this, it renders fine in IE8 and IE9. It still renders poorly in IE7, though.
Edit:
In response to your comment, I am able to replicate the issue with the background no longer being opaque. After some investigation, there is a particular script file being loaded:
http://www.blogger.com/static/v1/jsbin/938506610-ieretrofit.js
If you remove the <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> on line 4 of the source, and you remove the ieretrofit.js file from line 1471 of the source, the page should render correctly in IE9.
Since the ieretrofit.js file appears to be generated by Google, you might want to ask them about it. If you would like to disable it JUST for IE9, and allow it to continue for IE8 and below, you should take a closer look at line 1471 of the source. Here is a snippet (it's quite long, this starts around character #2275):
'\74!--[if IE]\76\74script
The !--[if IE] there is part of an IE conditional comment. You can change that snippet like so, and it will still target IE8 and below, without affecting IE9:
'\74!--[if lte IE 8]\76\74script
Let me know if you have any further issues!
The page has 104 validation errors — I’d start by fixing those if I were you.
Almost certainly it is because the page is invalid. Also, I really would think about starting again with this page as it is overly complex markup.
Guys. Figured it out (with great help from andyb and Paul D.)
The validator pointed to some unpaired </div> tags that I removed. Now it is working flawless.
The problem is on my blog - blog.dynback.com.
Right panel goes down in Chrome, and stayed normal in all other browsers including Safari 4. And without Firebug its hard to find where is the problem.
You have errors in your markup, fix those first, at least the missing end-tags.
Validate here: http://validator.w3.org/check?uri=http%3A%2F%2Fblog.dynback.com
I think it has do to with the JavaScript. I've noticed the issue appears after code snippets are highlighted. Chrome uses a different JavaScript engine than Safari. Maybe that's the problem.
Try to shrink the width of #main_content