I'm working on the website: insectstings.co.uk, it's responsive and I've made some changes to the original theme.
For some reason in IE8 (maybe others) the menu is displaying as the responsive menu. I've tried changing the media query size but it doesn't help.
Also the main header image is far away from the body content, I've tried inspecting it but with no luck. I hate IE, everything displays fine in other browsers.
Try adding repsond.js to IE8 and below. It provides some media query functionality for IE: https://github.com/scottjehl/Respond
IE versions below 9 do not support media queries: http://caniuse.com/css-mediaqueries
The normal flow of CSS will take over, so IE8 will show whatever you delcare last in your CSS.
EDIT: You might want to read this article, which coveres targeting older IE versions with different CSS. I have been using this method for a while now and it works really well: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
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;
Im having a few issues with IE and firefox css
go to http://www.chriscaplan.com/KEW/
have a look in chrome that is displaying correctly
then have a look in IE or firefox it doing some weird stuff.
is there something im doing wrong ?
can any one help???
You have 2 style sheets working against each other:
skeleton.css
style.css
Replace the skeleton.css with the latest version and run it in IE and you will see. I switched your version with the latest and it started to work on IE.
Your method for clearing floats is not working.
If I were you, I would take some time to look at multiple examples on live websites of how people have put together their sites' headers. Right now the structure and styles on your header don't seem to follow normal design patterns. And by normal, I mean common, well tested, typical for a reason, etc
I have a navigation bar that works very well in Chrome - however it fails in Internet explorer 8 or less.
the link is www.notebox.ca/AP - you may view the code there.
I know there is bootstrap, but I was wondering if there is any way to add something to the code to make it work in IE.
Thanks
https://github.com/scottjehl/Respond will polyfill the missing functionality you need in older IEs.
i am making a menu for my school assignment and it needs to work in both IE and firefox.
I am done the menu and it works perfectly in firefox, but i am having trouble getting it to display properly in IE
A part can be found over here: http://tutudragon3.info/ie-trying.php
When i click the home image in firefox, a dropdown sort of thing pops-up with 2 images with text "d" and "d". In firefox, there is no space between those dropdown images, but when i try it in IE, I see a small blank space between them.
how could i fix this (delete that space) please. I tried many different things but it didn't work.
Using IE8 by the way.
Before worrying about any specific bugs:
Use a Doctype that triggers standards mode, as quirks mode inconsistencies are a nightmare to deal with. If in doubt, use HTML 4.01 Strict: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Deal with machine detectable errors
If you have done the things David mentions, and still see some differences, you might want to take a look at ie7.js, it is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser.
I don't find any problem in IE7. But if you are having the problem, try giving display:block; to the <A> and <IMG> tags. The problem should vanish.
I have a blog, www.realcanadianenglish.blogspot.com. I use Firefox to write it. Sometimes I check the blog using Internet Explorer. With the later it shows a gap between the picture and the text sometimes. Can I change the HTML code to fix this? Why is there a difference between the two: Explorer and Firefox?
Internet Explorer can have extra padding on some elements. I suggest you try to include a CSS Reset file first and then your own CSS file.
Here's a good Stackoverflow question about CSS Reset files
The blog looks fine on IE8. If you're having a problem with it, I would recommend running IE8 and using the debug tool provided (hit F12). You can dynamically change the HTML and CSS from right inside the browser. It's faster than uploading a new template every time you want to test a change.
You are refering to the IE Model Bug
In most cases the issue will be with IE and, in those cases, it's sometimes best, or at least convenient, to just serve IE a line or two to bring it into line with the other far more modern browsers with "conditional comments". These comments will be recognized only by IE but wind up allowing you to include styling or html that won't affect other browsers. They are easy to use but have a few variations based on which version of IE you are targeting. Here is the link explaining them all: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Here is the best place to learn about IE CSS bugs: http://www.positioniseverything.net/ie-primer.html