Hi everyone.

I put together a mock-up for a potential client. I'm relatively new to the design world, but I'm making an effort to write valid, standards-based code. Unfortunately, IE doesn't render the pages the way it is supposed to. Other browsers (Firefox, Safari, Opera) render it perfectly.

http://www.flagshiplabs.com/westside

I just don't even know where to start - do I completely rewrite the site with tables? Any hints?

Maximum compatibility is a must.

Thanks!
Jameson

Here is what it looks like in IE7:


Other than the footer copy not being centered what is bothering you?

Maximum compatibility isn't the same as full compatibility.

A lot of people use conditional comments [if lt 7] to call out style sheets that are just for Internet Explorer.

Thanks for the screenshot, colbyt. That's the way it's supposed to look.

My main concern is with IE5 and IE6, as some of the target audience are still using those browsers.

Learning Newbie: I could use a different stylesheet for IE, but I'm not sure how I'd format it so it would look identical to the ideal rendering. The only thing I can think of is to completely rework my layout.

Well, the first issue (header PNG) has two solutions. One involves no code (convert the image to a JPG) and one involves a hack for IE specifically.

IE PNG transparency hack

As far as your H2 tag goes, specify a font size. It can be in percentages or EMs, but specify one. You should also specify margin and padding explicitly (usually 0.5em 0 for padding and 0 for margin, but that really depends on what you're going for.)

For your paragraph, define this:

p {
margin: 0 0 1em 0;
padding: 0;
}
This will work the same across the board.

As far as the big white gap, it looks like IE is using the 30px bottom margin property of your wrapper div and Firefox isn't. Try changing the margin to 0.

By the way...while it's good to say "Firefox looks like how I want it" as a starting point, you may want to specify the issues. Otherwise, people that are dumb like me have a tendency to guess at issues and solutions. (Help us stupid people out and tell us where to look, please. ) No harm, no foul, though...that's how we learn stuff.

Adam - thank you for your input. I sometimes forget to explicitly specify things. It certainly helps with consistency.

Here's how it is supposed to render:


Here's how IE 5.2 (Mac) renders the page:


I'll go through and try some of the things you suggested. Thanks again!

-Jameson

Ahhhh...we're MAC talking?

Dude, I'm going to save you a buttload of time and energy with one simple word:

DON'T.

IE 5.2 for the MAC is an old-school browser that very few people (if any) even have. The only person I know that still has it understands that her computer stinks and therefore knows what to expect when sites don't render properly in it.

Even Microsoft tells people not to use it anymore, and to download something like Safari:

Microsoft's Internet Explorer for MAC Page

So unless your client has it and you really have to worry about the issue, dude, don't. You'll kill yourself trying and for a market share that, in relative terms of size, compares accurately to an ice cream sprinkle around Rosie O'Donnell.

I guess I was under the impression that IE5 for mac and IE5 for windows rendered similarly.

I'll just cross my fingers and hope that it works just fine across most other browsers.

Thanks again for your tips in the above post.

You can always check out BrowserCam. It screen caps your site in different browsers and operating systems and shows you the results.

Takes a few minutes for the screen caps and the AOL ones often come up with a weird dialogue box, but the idea is there.

I completely argree with Adam, don't waste your time on IE for Mac, and NO, IE Mac did NOTHING much like IE for PC.

I checked your site with IE 6 and FF, looks pretty much the same. If you must hack your CSS, then use Conditional Comments to target the various versions of IE. However, the ONLY thing that needs to be in these 'alternate' stylesheets is the fixes necessary to make IE behave. You don't have to completely duplicate the original CSS at all. That should make it much easier to work with. I typically now have 3 css files - 1 for Firefox, Safari, Opera (and other compliant browsers), 1 for IE 6 and below, and 1 for IE 7, though the IE 7 file is empty - for now. A couple of bugs have been discovered in 7.

don't mac people use firefox (not safari). is this a myth?

also, i know most web designers like hacking css, but i don't believe you need to unless you did something wrong to begin with. we use to have 3 css files (safari, firefox, and ie). we fixed our css, and now have one.

Originally Posted by MysteryLeo

don't mac people use firefox (not safari). is this a myth?

Safari is the default browser (since it's the Apple browser) but users can download FF if they wish (and often do).

i know most web designers like hacking css

I don't believe that's true at all. True 'hacking' is done by a lot of people who don't know enough to code around the various problems (read that as IE). However, there are still problems with IE 6 and below that make some 'hacks' almost unavoidable. Since you don't have to duplicate the ENTIRE CSS file using conditional comments, the 3 files that I use amount to next to nothing since I don't need to use a lot of arcane hacks.

Originally Posted by LadynRed

I don't believe that's true at all.

I'll echo that. I'm a fan of standards-compliant browsers. It seems the only one that causes me to bend to its will is IE.

Thanks all for your help on this. I made some updates - hopefully it's coming up a lot better now.

http://www.flagshiplabs.com/westside

-Jameson