Login

04-14-2009, 06:37 AM

[eluser]Jelmer[/eluser]
I often spend loads of time making my designs compatible and testing them in IE5.5-8, Firefox 2 & 3, Chrome & Safari 3. Though the comment that when something works in a Firefox version and the insanely bad IE6 it will often work in the others too. But I regularly have moments that I want to tear my hair out... and coding for IE6-7-8 will show you quircks that make you wonder wether there's any decent quality management being done at MS.

The sad truth is that about 20% of IE users still use IE6 and IE (all versions) is still used by about 85% in my country (the Netherlands). So I owe it to my customers to support IE6 trough to 8.

If you're on windows IETester is a very handy tool (though buggy), and everywhere browsershots.org is a great resource.

04-14-2009, 07:44 AM

[eluser]TheFuzzy0ne[/eluser]
Yeah, I have IETester installed, but whenever I load any tab, it crashes...

I've also downloaded [url="http://finalbuilds.edskes.net/iecollection.htm"]Internet Explorer Collection[/url], which seems to install each version of IE (from version 1 I think), onto your hard drive. It seems to work nicely, although the down side is that you have extra Windows on your Desktop, and not a nice tabbed interface like IETester.

I tried Browser Shots. It's a nice idea, but I can't be doing with waiting in excess of 10 minutes for my site previews. Tongue

04-14-2009, 08:24 AM

[eluser]SomeFunkyDude[/eluser]
It is a pain dealing with IE, but using a lot of css is necessary if you want a more detailed layout. One of the main problems with IE is it's interpretation of the box model (margin/border/padding). There's a couple tricks for having your page display right. One is to apply your padding to a content div that's wrapped within another that is simply a wrapper, the content div will expand to fill the parent div, but applying padding or margin to it will help you control the way it looks across multiple browsers.

You can also check out resets to override default browser settings, YUI has one and I know there's a a few other out there.

Also, if your having trouble aligning things, consider this, text-align:center is applied to the body which centers everything in IE but not FF or safari, margin auto is applied to a "wrapper" div which centers the div in FF or safari, but not IE. The only problem with this, is applying text-align:center to the body centers all the text, to get around this, you'll need to use text-align:left or whatever alignment you want, for each box that has content.

Code:
&lt;html&gt;

&lt;head&gt;

&lt;style type="text/css"&gt;

body {

background:#000044;

text-align:center;

}

#wrapper {

width:400px;

background:#FF0000;

color:#FFF;

margin-left:auto;

margin-right:auto;

}

#content {

padding:20px;

text-align:left;

}

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;!-- the wrapper div sets the with the box, the content box fills it, which you can then apply margin or padding --&gt;

<div id="wrapper"><div id="content">Sed tempor facilisis tortor. Duis turpis massa, pellentesque eu, lobortis eget, pellentesque non, mi. Aliquam commodo mi non libero. Maecenas eleifend. Nunc rutrum purus in sem. Curabitur tempus faucibus nisi. Integer varius nisl non neque. Maecenas cursus. Etiam accumsan lectus quis justo. Proin egestas lacus non eros. Maecenas a libero. Donec ullamcorper libero vitae odio. </div></div>

&lt;/body&gt;

&lt;/html&gt;

04-14-2009, 08:41 AM

[eluser]jedd[/eluser]
I develop everything using KDE's Konqueror browser. (If it's good enough for Apple to pilfer and claim as their own ...)

If I hit a weird bug that I'm not sure if it's a CSS / presentation issue, or just some bad coding on my behalf, I might crank up Iceweasel (Firefox ™) and then blink a few times at the way even it manages to make things look worse.

Once I'm nearing completion (this rarely happens) I might ask someone to look at it with IE, though I don't have many friends that use IE so this is getting harder to do.

If they say it looks okay, I reason I must have written either very basic code or done something hugely wrong.

If they say it looks bad, I'll modify my footer message based on that assessment (varying from 'Get a real browser, you Microsoft weenie' to 'Best experienced by someone with a clue' - depending how cheery I'm feeling at the time).

Hope this helps.

04-14-2009, 08:44 AM

[eluser]Johan André[/eluser]
I use the 960-framework for layout.
I handles alot of the stuff that otherwise gets me into trouble with IE (floats mostly).

Also when adding padding (it rhymes!) I always add it to a inner div, like this:

Code:
<div id="a_column">

    <div class="gutter">

        <p>Lorem ipsum dolor sit amet.</p>

    </div>

</div>

It helps with the hideous boxmodel-failure in IE6.

04-14-2009, 08:46 AM

[eluser]Choo[/eluser]
Many problems appear with IE 5.5-6, and I hope that users stop to use it soon. 7-8 are also not very good, but there is no choice Smile

.

04-14-2009, 09:17 AM

[eluser]simshaun[/eluser]
I spend quite a bit of time on making a site IE6+ compatible.
About 99% of the time, its easily done by using conditional comments.

Those folks who simply shrug off IE6... I'm not sure how you keep business coming in, seeing as how about 25% of people still use it. Not to say I haven't tried ignoring it at one point, because I have, which resulted in quite a bit of complaints from customers.

04-14-2009, 10:02 AM

[eluser]NogDog[/eluser]
[quote author="SomeFunkyDude" date="1239737081"]...One of the main problems with IE is it's interpretation of the box model (margin/border/padding)....[/quote]
Which is why you want to get it out of "quirks mode" as I described in my earlier reply. When not in quirks mode it interprets element width/height/margin/padding as per the W3C specification instead of as per Microsoft's default, IE-only specification.

04-14-2009, 10:06 AM

[eluser]TheFuzzy0ne[/eluser]
[quote author="SomeFunkyDude" date="1239737081"]It is a pain dealing with IE, but using a lot of css is necessary if you want a more detailed layout. One of the main problems with IE is it's interpretation of the box model (margin/border/padding). There's a couple tricks for having your page display right. One is to apply your padding to a content div that's wrapped within another that is simply a wrapper, the content div will expand to fill the parent div, but applying padding or margin to it will help you control the way it looks across multiple browsers.

You can also check out resets to override default browser settings, YUI has one and I know there's a a few other out there.

Also, if your having trouble aligning things, consider this, text-align:center is applied to the body which centers everything in IE but not FF or safari, margin auto is applied to a "wrapper" div which centers the div in FF or safari, but not IE. The only problem with this, is applying text-align:center to the body centers all the text, to get around this, you'll need to use text-align:left or whatever alignment you want, for each box that has content.[/quote]

Now they're some serious tips! Many, many thanks for sharing. This is the understanding I lack, as I haven't found the information to tell me most of what I need to know, although I was aware of some of that at some level.

04-14-2009, 10:07 AM

[eluser]TheFuzzy0ne[/eluser]
[quote author="NogDog" date="1239742957"]Which is why you want to get it out of "quirks mode" as I described in my earlier reply. When not in quirks mode it interprets element width/height/margin/padding as per the W3C specification instead of as per Microsoft's default, IE-only specification.[/quote]

I'm not sure I agree. As far as I'm aware, my page doesn't display in quirks mode, yet margin-top and margin-bottom are not rendered at all in IE. What am I missing?