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?
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)
So I've been working on a website, where I have the following CSS for the navigation bar:
.boxshadow div#top_nav li+li::before, .no-boxshadow div#top_nav li+li::before{
content:url('media/images/link.gif');
}
It's supposed to create link separators for the list items in the nav bar, by inserting a certain image before all links except the first one. The .boxshadow and .no-boxshadow classes are due to Modernizr.
The problem is, it's being overridden in IE. It appears to be crossed out when I open the Developer Tools, so I know it's being overridden, but I don't know why. In Chrome and Firefox, the property works, but only in IE I'm having this problem.
Any ideas as to why this is happening? I'd be happy to post more CSS if necessary. All help is appreciated.
Here's a link to the jsFiddle: http://jsfiddle.net/KJYe2/
Edit 2: Sorry guys, but it seems to work in IE through jsFiddle. However, it doesn't show locally on my computer, and I'm not sure why...I tried posting more relevant CSS that's used before the navigation bar, to see if any of those rules were causing the override, but that doesn't seem to be the case either.
I'm such an idiot. It turns out it works fine live, but locally it just doesn't render. I'm not sure why it does that as opposed to Chrome and Firefox (it renders fine locally on those browsers), but for IE, it only works live. Strangely enough though, it's still crossed out in the IE9 dev tools both offline and online. I apologize for the inconvenience I may have caused, and appreciate all who helped in the matter. Thanks!
I am working on a site that has a couple columns in it and I've fought with it for a while and finally thought I had everything lined up correctly. I cross checked it in Adobe BrowserLab and everything seemed good (except IE6 and IE7 but I just accepted that).
I tried it on a different computer though and IE9 on the computer I tried it on displayed it like IE7 was displaying it in BrowserLab. Essentially what's happening is the "Daily Tech Blogs" column slips way down to the bottom of the page out of line.
Can't for the life of me figure out why. As you'll note in the CSS, I'm using display:table and display:table-cell because that was the only thing I could get to line things up on all browsers (or so I thought). I initially just used DIV's but they were being treated different by different browsers. I then tried to recreate it with just <table>s but that put everything out of whack. Here's the link to my JSFiddle:
http://jsfiddle.net/uBahh/1/
Any thoughts?
I've found for my purposes that the best way to go about it is <!--[if IE 7]><body class="ie7"><![endif]--> at the top of code. I can then just adjust things where I want them with position:absolute. While I generally tend to avoid hacks like this (and most people would second that), it was really only a major problem in IE7 and it was the most efficient way for me to go about it rather than mess with code that's proven on every other browser.
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!
I have run into a really odd bug with FF3.5.9 (and potentially lower) where it is moving the input:text below the input:submit. The strangest thing with this is that it is working on IE6/7/8, Chrome, Safari and Firefox 3.6. Here is a test page so you can see how it is marked up: http://paste-it.net/public/s6479e6/
I can fix the issue for FF3.5.9 by adding padding-bottom (15px) but this then puts the other browsers out of action.
Has anyone else had a similar issue and found a fix? Seems like such a minor issue but I just can't find a fix for it and I am not really into having to absolute position the inputs as that seems too hacky!
Thanks for your time,
Ad
FF 3.5.9 had some strange bugs in it. In particular a javascript bug that threw a legitimate sounding error, and FF being my main Javascript debugger I spent 2 hours down a terrible time-suck.
Checking deep in the documentation I found out that FF is conforming to some specification that no one else is. Right now FF is not in a great state for consistency, so you may have to break the habit of believing that FF is always right and the other browsers are wrong. You may want to keep your finger on the Mozilla blogs and see what they are saying so you have fewer surprises.
So basically what Alex said, but be more wary of FF for a while.
So it looks like there isn't a clean option ... if anyone else ends up having this option I ended up just floating the input:submit. Not nice but it works.
Thanks all for your help!
EDIT: vertical-align:middle did the job!
It seems that firefox 3.5 has a browser defined "line-height: normal !important" that makes it impossible for you to center the text via setting the height/line-height the same.
line-height is the same height as the input?
if not, try and set it.
for example:
input[type="text"] {
height: 50px;
line-height: 50px;
}