My page works fine in all the browsers except IE 7. In IE7, the divs get go out of their place completely. I suspect its due to the usage of position:fixed . I tried using the proper doctype as many suggested and it still doesn't help. Also IE7 says its rendering in standard mode so I don't know what the issue is.
Here's the jsfiddle link:
http://jsfiddle.net/FgXS4/
IE7 has known serious issues with position:fixed.
If you need to support IE7, your best option would be to just forget about the fixed positioning thing for that browser, and let the element scroll with the rest of the page. Write a custom stylesheet that only kicks in for IE7 which overrides the standard CSS, and let IE7 users have a slightly degraded browsing experience. That's my advice for your best option.
There are hacks around that try to fix the problem, notably IE9.js, which implements a whole load of patches into old IE versions to try to get them to comply with modern standards. It's a great little script. It can't do everything, and it certainly doesn't magically turn IE7 into IE9, but it might help with this issue (I know it has got patches in it that specifically deal with IE7's position:fixed bugs), so it might be worth giving it a go.
Your other option, of course, is to stop supporting IE7. In all honesty, this might be a good answer. The number of people using IE7 is dropping very quickly (faster even than IE6); the usage figures for it a extremely low and getting lower every month. You might find yourself doing a lot of work to fix this, and then having virtually nobody that actually benefits from it. You could save yourself a lot of time if you just drop support for IE7 altogether. If you're lucky, maybe no-one will even notice. (and even if they do notice, maybe it'll give them a nudge that they need to upgrade their browser!)
I'm new to programming in general, especially CSS. I am currently working on a new website for train enthusiasts. I'm doing it from scratch so that I can get some experience in HTML, CSS, PHP, MySQL, etc.
Anyways, I've run into a problem. I've searched Google for a solution, but haven't been able to find one. My CSS seems to be compatible with every web browser on the market EXCEPT Internet Explorer. I don't really know how to explain the problem unless you check it out for yourself. It's as if my header and left menu are the only styled elements, but my content and right menu are pushed to the right and not styled. Check this link in IE and another browser respectively. You'll see the difference.
So my question is this: How do I fix it? I know it must be an IE bug since it works in every other browser, but I don't know what it could be! If I need to post my CSS script, let me know. Thanks in advance for any help you guys can offer!
In your style sheet you have a superfluous width:100% on a div element (block level elements naturally have a width that fills their container). IE is interpreting this 100% as that of #container. You can correct the styling issue in IE7 (theoretically) by removing this width:100% at line 119 of styles.css. I theorize that this is cased by how IE7 interprets display:inline-block
I must warn you, however, that ensuring compatibility with IE 7 and lower is a major pain in the arse and totally not worth it. :)
Which version of IE are you using to test it?? I checked it on Firefox, IE9,8 and 7. looks fine on IE8 and IE9. While there are few issues on 7. You could use conditional commenting to fix issues in 7.
create a new css file specially for IE7 and then
use a code like the following in your header
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" />
<![endif]-->
now play around with ie7.css till things look better. The good thing about this method is you can fix issues in IE without interfering with other browser rendering. You could also use "ietester" and debug bar to determine what exactly is wrong. im not able to find the exact link right now but google should help.
You could read more about conditional commenting here http://www.quirksmode.org/css/condcom.html
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 am trying to make my own website and it was coming along quite nicely. It looked beautiful in Firefox when opened and worked wonderfully. But then I run it in any other browser and it does not work. How can I fix this? Interner Explorer especially hates it =[
You just got to see it to know what I'm talking about so here is the link:
http://opentech.durhamcollege.ca/~intn2201/brittains/chatter/
Please give solutions that don't involve JavaScript.
Rendering differences between Firefox and Internet Explorer are really the daily trade of everyone who designs web pages.
You should start identifying which elements exactly cause the problem(s) and then formulate a question regarding exactly that. (or do a Google search, all those incompatibilities and how to fix them are documented somewhere on the net in some form.)
Also, I'd recommend you download a Tool like IETester and check out which versions of IE the site fails in. It looks pretty OK in IE8, but the inline frame looks bad in 7.
Then, really make sure your page is valid. (It probably shouldn't be XHTML, but have a HTML doctype.) This is not to conform with some rules, but because validation catches an awful lot of errors like unclosed tags that screw up the rendering. This isn't the case in your case right now, but still I'd recommend doing it.
On the long run, these tools are going to be very helpful:
Firebug in Firefox (Right-click any element on your page and choose "Inspect element..." it gives you heaps of useful information
The Web Developer Toolbar in IE8 (press F12 to open it) that is similar to, if not as powerful, as Firebug.
OK, I had a look at the page in IE6.
Some tips.
Try to avoid tables for layout. I admit that putting the fancy border around the "welcome" area, is much easier using a table than any other way, but the other tables are completely unnecessary, and the cause of your much of your problems, because browsers, particularly IE6 and IE7 like to do their own thing when deciding how to lay them out.
As bobince says, table-layout:fixed on the signupTable1 will help a lot
Also, for IE6, giving the td containing "welcome" a height of 100% helps.
The margin widths of the items in the cells in the signupTable1 are percentages of the cell width in FF, but percentages of the screen width in IE6. You should add some IE6 targeted css to compensate for this.
Finally, as far as I can see, your markup is immaculate polyglot HTML/XHTML and serving it as text/html and using an XHTML doctype should not cause any problems.
Your page declares an XHTML doctype, yet it is not valid XHTML:
http://validator.w3.org/check?uri=http%3A%2F%2Fopentech.durhamcollege.ca%2F~intn2201%2Fbrittains%2Fchatter%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Furthermore, it's returned with a content-type header "text/html", which is wrong for something that's supposed to be XHTML. Unfortunately, the correct content type will not work either.
So there are two things you have to do:
Don't use XHTML
Make your HTML validate
Then you can start thinking about actual browser incompatibilities.
It looks the same in Firefox 3.6.2 as in Internet Explorer 8. However the old browsers are the evil ones:
search the web for Internet Explorer + margin, because thats where Internet Explorer fails.
Simple trick: do not use margin.
position:absolute;
top: 80%
left: 100px;
And then... google for specific stuff :)
Ok I fixed 2 errors finally figured them out
changed
#loginForm {
float: right;
}
#loginTable {
margin: 20%;
margin-top: 14%;
}
to
#loginForm {
float: right;
margin-right: 5%;
margin-top: 2.5%;
}
#loginTable {
}
and added
<!--[if lte IE 7]>
<style type = "text/css">
#loginForm{margin-top:-157px}
</style>
<![endif]-->
not a solution I like but one I will have to deal with.
Ok still leaves the issue of I hear there is a 100% height problem and my horizontal borders wont stay the correct width.
First, make both your HTML and CSS to validate:
HTML validator: http://validator.w3.org/
CSS validator: http://jigsaw.w3.org/css-validator/
Then, if your valid code still fails in particular browser, find the problematic HTML element using the browser's debugging / inspection tools:
Safari / Chrome: built-in Inspector
Firefox: separate plugin, among the best is Firebug
IE8: built-in Developer Tools
IE6/7: must be downloaded and installed from Microsoft
Opera: built-in Developer Tools
As long as you use valid CSS 2.1, differences between modern browsers should be minimal or almost non-existent. Yes, modern browsers do very good job in implementing standards, especially if you avoid bleeding-edge not-yet-fully-standardized techniques (CSS3, HTML5). (We are forgiving and count IE8 as "modern" here despite its CSS 2.1-only support, PNG issues, slow JS speed, etc.)
Oh, one thing not related to validness: always remember that many UI elements (fonts, buttons, etc.) are not rendered in exactly equal sizes in different browsers / platforms. Also screen sizes may vary largely due to popularity of mobile browsing. That's why you should prefer elastic / fluid layouts and not rely on pixel-perfect rendering.
Most IE 6/7 bugs are the same old common ones repeating and there are plenty of resources about fixing them. Create separated stylesheet(s) for IE(s) and include them by using conditional comments.
As a final comment, as long as open standards / technologies are used, personally I couldn't care less supporting a decade old browser, except in form of graceful degration, unless I'm paid generously for that. Browsers are free to upgrade, there are no reasons not to do that. No excuses. World is not static, show must go on, you won't see HD with your old tube telly, etc.
I also think it's our responsibility as web developers to force the big masses to adopt new (open) technologies, because they save huge amount of our time, makes possible to create better end-user experience, etc., the list of benefits is endless. Again comparison to other industry: consumer electronics companies keep pushing out new things, although most people would happily use 20 years old tech unless forced to upgrade their (naturally conservative) mindsets.
The messed-up borders around the ‘welcome’ box and the wonky centering is because you're using ‘auto layout’ tables for page layout. This leaves you at the mercy of the auto table layout algorithm, which is complicated, unreliable, and a bit broken in IE.
For places where you must use tables for anything more complicated than simple data, set table-layout: fixed on the <table> and add explicit width styles on either the first row of <td>s, or on <col/> elements just inside the table. Columns you leave without a width style will share the remaining spare width between them. Set an explicit height on the rows containing fixed size images to stop them sharing the table height.
However, for the main page layout here you would be much better off using CSS positioning or floats rather than tables. You can use nested divs (each with a separate background image) to achieve the image border effect without resorting to tables.
If I were you, I would not bust my guts trying to make the site work for ancient browsers like IE 6.
Indeed, one could argue that you would be doing the world a favor if you made your site refuse to work with IE6. Anything that can help to push IE6 into the grave is a good thing.
If Google can say that IE6 is no longer supported ... so can you.
Now if you were building this site as a money-making exercise, and demographic included a significant percentage of IE6 users, maybe the pain of supporting ancient non-standards-compliant browsers would be worth it. But otherwise, I'd say it is not.
The products on the below page are getting displayed correctly in FF, Safari and IE8:
http://www.toomanydesigns.com/thefix/top10_watches/
However, IE6 is having issues. Does anyone know what I need to do to get it to display correctly in IE6?
Thanks
I don't have IE6 installed, but what this looks like is the IE6 Multiple Class Bug for this (and maybe more) div:
<div class="listing-type-list catalog-listing top10full">
It's a bummer, but if you really need IE6 support, that page will show you some techniques to work around it.
fixed it. I needed to add a larger line height to get the numbers to show and adjust the margins so the content fitted.