I have a Top nav bar working in major browsers, including ie8 and above. HOWEVER. When I put IE8 into compatibility mode ( which I thought would test for ie7 browsers) it no longer works. i can find any logical reason why it doesn't. here's the site: http://redemptionconnect.com/pages/articles#
Can anyone help with this situation?
The logical reason is that older browsers have various problems (not just IE, but often times older IE can be a huge problem).
IE7 doesn't support inline-block. You're going to have to figure out a different solution.
Start here, it may help you.
http://www.brunildo.org/test/InlineBlockLayout.html
So I figured it out! All I had to do was apply float: left; to the li element. That worked in ie7!
Related
I've got this project that I'm working on, and it's displaying differently in different browsers (imagine that). The CSS works fine in every browser I've tried (chrome, safari, firefox) except for IE11 (again, imagine that). Here's a picture of the IE version:
Here's what it's supposed to look like:
Now, I've looked through the dev tools on both Chrome and IE, and here's the results.
IE:
Chrome:
So, as you can see in the picture, in IE, the bwizard-steps button::before and bwizard-steps button::after are marked out, yet they are working as intended in Chrome.
Any ideas why this would be? I've looked it up, and IE11 is supposed to support the ::before and ::after tags. Yet it is clearly ignoring them. I've even tried going into compatibility mode for IE, and that just looks even worse.
I have had similar problem.
Solution that worked for me was giving the button overflow: visible;
Working example (IE9+): http://jsfiddle.net/aBfF8/1/
The problem is likely that you have button tags as direct descendants of ul tags. In valid HTML markup, the only direct children of a ul should be li.
You should wrap you buttons in li tags - but then you're going to have to make some CSS changes so that your list items aren't vertical. float: left; on them among other changes to make them appear the way you want.
Edit: I can provide a better-detailed solution of exact improvements you can make if you provide me with the appropriate HTML and CSS (ideally in a jsfiddle)
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.
On this site, the footer displays incorrectly in IE, and older version of FF, however displays perfectly in FF 3.6.13, any ideas what i'm doing wrong?
http://therhythmhut.com.au/
IE7 doesn't support display: table, so your design is completely broken in IE7:
I think you are better off just rewriting the footer so it doesn't use display: table, and your problem might fix itself.
I really like the design in Firefox and Chrome though!
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.
In firefox, safari, ie8, the menu system on my site works great.
However, in IE7, the link items simply disappear! I've tried many things to see where they may have escaped to, but they have seemed to simply vanish!
This site seemed like it might be onto something, except there are no floats in my header section whatsoever!
Now, I'm usually pretty good with CSS and can get my way out of most IE bugs, but this one is driving me slightly insane.
I've tried using IE8's developer tools too but have not managed to fix it.
Any ideas?
Note I realise this site breaks a few usability conventions (the checkbox for one) but I did not design it and don't have much of a say :(
The problem is
#header ul li {text-indent: -9999px}
I can't tell you why other browsers handle it but I tested it and I know it's the problem.
What happens in IE7 if you try position: fixed instead of position: absolute?