I seem to have a glitch on in Internet Explorer and wondered if anyone could shed some light
Taking the following page as an example
http://www.flipfilter.com/websites-for-sale
When running in IE not under compatibility mode, all the Cufon (js font replacement) headings disappear. When I click the icon to enable compatibility mode, the pagination seems to go crazy and extends down the page.
Can anyone point me in the right direction, specifically as to what causes either of these problems?
If the problem is a validation issue could you point me to which one specifically causes the two errors?
Just have the pagination issue to
resolve now!
Compatibility mode emulates IE7, so fixing your site to work with it ensures that your site will look acceptable to genuine IE7 users.
You can fix the pagination problem by adding float: left to #pagination-flipfilter li.
You might also want to adjust the margin slightly.
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;
I am just about to wrap up my first ever major web development project after teaching myself to code over the past couple of months. However, I am still struggling with a couple of the basics it would seem.
I have a instance of the page loading completely differently on Firefox than it does in either Safari or Chrome.
You can see an example of the page I am referring to here: http://fmhgifts.com/home-office/ but I have included some screenshots as well to demonstrate what I mean. First off here is it displaying correctly in Chrome:
and then here is the exact same page as it renders in Firefox:
I have spent some time trying to play around with the web development toolbar in order to diagnose the problem but so far have been unable to do so. If someone with more experience would be able to help me with this I would be insanely grateful.
The problem is that you're using -webkit-transform, which is specifically intended for webkit-based browsers (Firefox does not use webkit, and neither does Internet Explorer). There are a number of ways to achieve a grid without -webkit-transform. You seem to be using one such way already: the top and left CSS properties (there are also bottom and right properties). Play around with those.
Just try remove float:left from
#filter-bar {
float: left;
margin-bottom: 35px;
}
rest i think it will take care on its own . Try and let me know . since its a floating elemnt the other divs are getting pushed up rather than being dow . Firefox is actually right in that sense . u will need to re adjust chrome styling making it uniform for all .
We released an application and made sure it works cross browser and cross device and it even falls back to work with IE7. Sadly we only have Windows XP machines here so could only test on IE7 and 8.
After release someone pointed out that in IE9 the home page wasn't displaying correctly. It was shifting the two columns on the right below the first column on the left. Sure enough if you try this in IE9 on your computer (a full version of IE9, not just IE10 with browser mode set to IE9) the columns shift. What's even stranger is that if you click one of the orange buttons on the left (FYI if you click-drag it has the same effect without bouncing you off the page) the layout fixes itself, and the two columns move back in line with the first column. This makes it damn hard to figure out what the problem might be.
I upgraded my home browser to IE10 after testing this and tried it and there are no problems. Even when going into Developer tools and switching the Browser Mode to IE9 and Document mode to IE9 Standards there are no issues.
I'm just wondering if any of you have come across something similar. I am of the inclination that this is some sort of IE9 bug that has nothing to do with standards compliance, since it works in IE10 with render mode set to IE9.
Any help, advice or even a quick 'yes that happens on my version of IE9 as well' would be much appreciated.
I have a workaround for you, so that for the time being you will be able to correct this critical issue.
Make IE Believe that it is IE8.
You can do it by just including this meta tag.
<meta http-equiv="X-UA-Compatible" content="IE=8">
Hope it helps until we found a concrete solution.
I've ran into a snag I've been working on for a couple days and can't seem to come up with an answer online. The site template I'm working on now is located at "http://citylakersbaseball.org/2.0" - I've got a div named "sponsors" that shows up fine in Chrome and the built in Live View of Dreamweaver CS5 - however, in Firefox 3.6 & 4beta it completely vanishes. I can see it in the view source, yet firebug has it grayed out. Maybe it's a DOM issue? (for which I don't know much about). Rendering engine issue?
I ran the source (index,htm) and CSS (style.css/nav.css) through the HTML validator - HTML is fine, and the CSS didn't spit back anything I would think could effect the div's display, especially since Webkit has no issues with it.
Any thoughts would be appreciated. Thanks in advance!
Your ad-blocking Firefox plugin is detecting and removing the div from the DOM. I experienced the same behaviour in Chrome and Firefox (which have ad-blocking plugins/extensions), but not in Safari or IE (which don't); and, indeed, the div appears if I disable Adblock Plus. One of the more basic rules Adblock Plus and the like follow is to look for HTML elements with class="sponsors" or id="sponsors" and remove them.
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.