Does IE6 Really not Allow Me to set width/height from left/right/top/bottom? - html

Building a site super quick and having it work on all my Mac browsers, I thought I'd take a gander on a friends old dell laptop with Windows XP and IE6.
Nothing looks remotely correct. It's because I used lots of left/right/top/bottom (constraint) declarations to size elements proportionally to their parent's size (I didn't use percent sizes because the percents refer to the parent's size before margins and padding are applied, left/right/top/bottom refer to them after with position:absolute. I'm asking about that here :)).
I've read lots these past few weeks on how horrible IE6 (and IE) is in general, but because of all the reasons people say to support it (large market share and the fear of installing better software), and because half the people in the company we're building a site for use IE6 (getting them to upgrade to Chrome slowly but surely), I thought if I could just get IE6 to render my constraints, that might help.
So I am messing around with simple layouts here, and they work fine in my latest versions of Firefox, Safari, Chrome, and Opera, but IE6 is basically saying:
If you haven't set a width or height on me, I'm assuming it's zero.
But position:absolute; left:0px; right:0px; top:0px; bottom:0px; on a container that's width:1000px; height:1000px; should be the same as setting width:1000px; height:1000px on the child, no?
Taking a quick look at the source for this, why won't IE6 render the constraint based absolutely positioned AND SIZED elements? (note: I will be messing around with that file for a while)
Thanks

In short, yes, it really doesn't allow this (“absolute edge-positioning”); it's a well-known and long-standing bug. Missing width on absolute-positioned elements always triggers shrink-to-fit behaviour even if width should be deducible from left/right. Same vertically.
why won't IE6 render the constraint based absolutely positioned AND SIZED elements?
I don't see that in the example at the moment. In general if you declare both edges and a dimension (eg. left+right+width), an absolutely-positioned elements is ‘over-constrained’ and one of the rules is discarded to make the others fit.
/* tables still need 'cellspacing="0"' in the markup */
Nope. A combination of border-collapse: collapse; border-spacing: 0; plus padding: 0 on the cells renders cellspacing/cellpadding unnecessary (thank goodness).
clear:both; /* ie6 requires for absolutely positioned elements! */
???
no.

IE6 is the “oldest” browser that mainstream web developers still largely support... begrudgingly. Begrudgingly in part because its support standard-compliant rendering of CSS is rather spotty. The standards say to do one thing, and often enough the IE6 engine does another, or some bug leads it astray. Years ago, keep in mind, IE6 was actually quite good, at least compared to Netscape and the other big players of the day. Not any more. Folks haven't upgraded.
IF IE6 (and, for the most part, IE7) are browsers that you need to support, it is generally best to keep that in mind from the moment you start working up the CSS. Seeing as you're a bit past that point already, I'd recommend you look into a number of the ways styles can be targeted at IE and particularly IE6+IE7 selectively. The most common and powerful method, and probably the one you're in need of now, is "conditional comments", which allow you to link in stylesheets that only certain versions of IE will read. Once you've got that under your belt, you'll probably need to get acquainted with some of IE6's quirks, e.g. the concept of "having layout".
I also recommend that you download a virtualization tool and the VPC images provided for backwards-compatible testing by Microsoft. These will allow you to run a Windows instance with IE6 or IE7 on your Mac, assuming it's of the newer Intel-based variety. Googling "VirtualBox VPC images mac" will get you a nice list of configuration tutorials. It isn't complicated, but it does take some hard disk space.

Related

Layout totally messed up in IE 7

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!)

Alignment Issues With display:table and display:table-cell in IE7 and IE9

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.

Position:absolute in HTML5

Is there any problem If i use position:absolue property in HTML 5 ?
position:absolute;left:somepx;top:somepx;
Will it work on all browsers or does the syntax go upside down ? Im using the
<!doctype HTML>
and developing the html using images and with some text, Just placing them in a good looking way using the position:absolute.And im developing using my internet explorer probably its version 7 I think so.But im worried will it work on other browsers like mozilla and google chrome with no error.Will it remain the same way on all browsers? becuase the stackoveflow or google any webpage looks in the same way in all browsers.I just wanted to know what standards they follow that makes them look same on every browser.
Please just let me know is there any harm or pitfall using the position:absolute.Thank you in advance
It seems you make some mistakes when you build your websites.
using absolute positioning where you shouldn't. It is not appropriate to use position: absolute to make a complex layout. Consider looking for some tutorials to learn how to build a layout using especially float, clear, margin and padding CSS properties. Use absolute positioning only where it is explicitly required.
using non standards-compliant browser during website development. IE7 is quite old browser with buggy support for web technologies. This may cause that your website will display fine only in IE7 and messy in every other browser. What you have to do is to develop website in standards-compliant browser (no matter what browser, just make sure you use the latest version available) and then check the website in older browsers (and possibly fix bugs that appear). Don't forget to check the website in all browsers used by your visitors. Compatibility tables like those at QuirksMode are often useful.
Back to original question, browsers don't distinguish between versions of HTML (there is just standards and quirks mode, but you don't need to care about them because you're using doctype that triggers standards mode in all browsers); so there's nothing more to be aware of. Absolute positioning should (and in most cases, will) work well in IE8+ and all widely used versions of Firefox, Chrome, Safari and Opera. Once again, you're supposed to test your website in all widely used browsers; you'll discover possible browser bugs and incompatibilites then.
Another interesting thing to look at is this:
http://ie.microsoft.com/testdrive/HTML5/PositionedFloats/Default.html
It may very well be available soon and will probably be a lot better for what you want. For now, do not JUST use Position:absolute, as people have said, it is a really bad way of positioning things and should only be used under very specific circumstances.
Well it has nothing to do with HTML5, it is basic positioning.
And it is not a straightforward process to get your site to display the same in all browsers, you should take a look at resetting style sheets or just test your site in a lot of browsers.
Especially older browsers have a way of changing your design.
absolute positioning is part of css3. html5 is just a combination of javascript+html+css
with unique features. so.it should work with all the browsers. but how all the browser will display, you need to chek it in chrome,mozila,safari,opera...etc in recent versions.
browser compatibility may be issue some time.so,don't worry ,it's better to chek and fix the variations.

Notes and guidelines to follow to support IE6

Are there any good notes and guidelines that one should think about when developing sites that must support Internet Explorer 6?
I'm not looking for explanations of the abundance of bugs that we have all learned by now. I need some general informations on, e.g., elements that one should prefer for certain tasks, things that simply does not work in IE6, CSS tips, etc.
here are the biggies i can think of right now:
No Alpha Transparent PNG Support
No Hover States except for the <a > tag
CSS floats behaving unexpectedly.
Can't use max/min width/height.
The Box-model conflict (padding is not added to the width of elements).
sometimes doubles margins.
IE6 doesn't support position: fixed.
...and i'm starting to get depressed so i'll stop here.
I'm fortunate in that I don't have to support IE6 any more. However it is a recent memory, so you have my sympathies.
Go to Quirksmode.org. This is an excellent resource for finding out what features various browsers support. (seeing all the red in the IE6 column will depress you though!)
If you plan to do any scripting at all, use jQuery rather than trying to work with plain Javascript: jQuery makes considerable efforts to be cross-browser compatible, even in IE6. It isn't 100%, but it makes a pretty good go at it, and give you features that would otherwise be completely impossible in IE6.
The following tools will make your life easier:
Dean Edwards' ie7.js - a JS library aimed at making IE6 more compatible with standards (he's also written "ie8.js" and "ie9.js" which extend the original ie7.js to add more features missing in various versions of IE)
Modernizr - a JS/CSS library aimed at helping you work around incompatibilities in old browsers.
IEPNGHack - allows you to use PNG graphics with transparency in IE6.
Whatever:Hover - allows you to use the :hover CSS style with any element type (IE6 normally only allows :hover for <a> tags).
CSS3Pie - a library aimed at giving IE6/7/8 some modern CSS3 features, including border radius.
There's probably more, but that should give you a start.
One thing to make clear to your employer though is that as long as they insist on using or supporting IE6, you will be unable to produce a modern feature-rich web site. There are limits to how good you'll be able to make it, even with all those hacks. Plus it'll be slow: IE6 is painfully slow at the best of times, and all those hacks will only make it slower.
Best of luck.
While simply saying "Don't Support IE6!" might sound real nice and easy to those who do not have to deal with reality, it remains a fact that many web developers/designers simply have no control whatsoever over that decision.
With that said, obviously the ideal would be "don't support ie6".
If you must support it, how much you have to support it depends on why you must; Is it because your web app is for a company which has many IE6 installations that it knows it won't be upgrading any time soon at all, or is it just for a client who wants to maintain 'support' for every possible user out there? Or is it something in between?
Generally speaking, I aim for "functional, non-totally-ugly, but certainly not pixel-perfect" appearance on IE6. I use IETester to check all versions of IE (differences abound between IE7 and IE8, for instance), so I include IE6 too, and just worry about making things look mostly functional for them.
For my clients, that has been sufficient. A couple have asked about IE6 support, and I have been able to show them that 1) the set of general users on the Internet who still use it is relatively small and 2) those users probably see so many glitches everywhere on the web anyway, they probably do not notice them anymore. I know that #2 probably sounds extremely dismissive, but I have plenty of anecdotal evidence that backs it up.
The basic idea comes down to; how much time will you really spend tweaking a site to make it perfect for an old, long-since-unsupported browser which use keeps going down more each day, when you could just make it acceptably functional, and then devote the rest of your time to more modern browsers.
But again, the extent to which you can take that route depends on how important IE6 support is to those who employ you, and why it is that important to them.
but anyway, IETester is a definite recommendation for testing it:
http://www.my-debugbar.com/wiki/IETester/HomePage
Poor you having to support IE6, we've all been there I guess...
Unfortunately I cannot point you to some general guidelines, besides the KISS principle (keep it simple stupid). Just stick to CSS 2.1 and don't use any fancy new technologies such as HTML5. Also don't even think of using any kind of special CSS selectors like blabla > blabla.
Let me point you to some sites which might help you in your endeavor:
CSS contents and browser compability (good overview of what to do and not to do with CSS)
ie6fixer (you actually WANT to use opacity, transparent png's? this tool will help you)
universal-ie6-css (good starting point for your custom css)
Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs (fixing the shortcomings the manual way)
For testing I recommend setting up a small virtual machine (I'd suggest using windows xp) with IE6 running. Testing tools like IETester may use the engine of the particular browser, but I have had differences between a full blown IE6 and the IETester tools - oh also there is instant virtualization with Spoon.net browser sandboxes (they had to remove IE, because MS said so...).

Web page looks good in Firefox but every other browser hates it

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.