Thread

Hi
This site http://209.85.32.22/~ifaction/index.php/test/News appears differently in Internet Explorer than in firefox, where it appears how it should. This happens on my computer but not a couple others.

Here’s my css code: http://209.85.32.22/~ifaction/index.php?test/CSSS/

It seems to me that the max-width and height commands for the content div aren’t working in IE. How can I resolve this?
Thanks!

I’m getting ready to sign off for the day, so don’t have time to look at your specific code; but I’ve gone through the nightmare that is coding CSS for MSIE.

Depending on which version of MSIE is being used, the max-width and -height commands might not be parsed by MSIE’s CSS rendering engine.

You might want to check out this site: Position Is Everything
http://www.positioniseverything.net/

It’s a great browser-behavior resource.

Here’s a few other links I found:
min-max in MSIE: http://www.gunlaug.no/contents/wd_additions_14.html
max-width property (in MSIE): http://www.thescripts.com/forum/thread98439.html

you don’t really have to code for any browser. if you adhere to the guidelines of W3C your site will look fine in both browsers. There are subtle differences, like horizontal rules, and using font sizes such as x-small etc. Those render differently in firefox than IE. So it’s probably best to use percentages.

You have 11 errors in your HTML code and 2 errors (one is width) in your css. Visit this page to validate your HTML:
W3C HTML Validator

and visit this page to validate your CSS
W3C CSS Validator

If you resolve those which isn’t bad, it’ll look right.

Your CSS has the following problems:

width = auto; isn’t a valid statement (in ‘blogtitle’)
float:bottom isn’t valid (in ‘footer’)

Welcome to the world of coding for IE!

While that was helpful in just being neater, it really dosn’t seem to fix,  my problem. I duno why, but min-height dosn’t work in IE. In addition my right column somehow pushes down the center content area in IE and I don’t get why.

edit: also those first sites, while interesting, were confusing to a beginner at CSS.

Benjad,

It sounds like you are experiencing what everyone in front of you has.  Getting browsers to render consistently is the most difficult and frustrating issue related to web development.  I know, you would think, with the success of the internet, that it wouldn’t be so hard… but it is.  Finding a good book on CSS might be a good place to start.

There is a little trick in order to get IE6 to play nice with min-height… sort of.  It’s taking advantage of an IE6 deficiency.  Here it is:

#selector {
    min-height: 300px;
    height: auto !important;
    height: 300px;
}

While that was helpful in just being neater, it really dosn’t seem to fix,  my problem. I duno why, but min-height dosn’t work in IE. In addition my right column somehow pushes down the center content area in IE and I don’t get why.

edit: also those first sites, while interesting, were confusing to a beginner at CSS.

They don’t have anything to do with neatness, they have to do with compliant, accurate code. Which would most likely resolve your issue.

Well, it might, JT, but there is certainly no guarantee.

I think we have to agree that CSS and especially with (but not only with) IE is a minefield.

Look at Stephen’s donated hack just above.  And I spent quite a few hours resolving a ‘simple’ menu issue for that nephew of mine this weekend.  It turns out that neither IE nor Opera support such a simple thing as a pictorial icon for a menu.  I had to work around it using a precisely placed background image instead.  And you do not want to know what folderol that turned up in how the browser people cheat on what they are supposed to do even for a simple thing like that.

Anyway, for Benjad, I do support the use of the standards tools.  They are surprisingly good, as good as the browser are bad, and will tell you right where many problems are.

You can get an excellent plugin for Firefox from here, which will automatically connect to them for you, and give a lot of other nice features too.

The rest:  when you find a problem, use Google.  Chances are you will find a lot of people commenting on it, and even some solutions.

A hint about solutions:  some are truly tricks, as Stephen showed, and those you find in books or in good websites, where people share what they’ve worked out.  In many not so covered cases, like the menu icons, a very good approach is usually to use something simpler in CSS than the good-looking ones seemingly available.

As others say, welcome to the web, as thoughtlessly approached in many ways as the big dot-boom was at all levels, if one had met it there.

Kind regards, and you will do it - we all have—
Clive

Yup, there is no doubt that you will spend countless hours uncovering ridiculous work-a-rounds.  I wish it was as easy as making a standards compliant site and letting the browsers handle it from there… wow, I no longer can imagine a workflow like that!

From a workflow perspective, it is very helpful to develop everything 100% for Firefox, Safari and the rest of the standards compliant browsers and then place your IE 6 and IE 7 specific fixes in their own style sheet.  Something like this…

  <!—[if IE 7]> 
  <link rel=“stylesheet” href=”.../css_ie7” type=“text/css” media=“screen” title=“Default Style” charset=“utf-8” />
  <![endif]—>

 
  <!—[if IE 6]>
  <link rel=“stylesheet” href=”.../css_ie6” type=“text/css” media=“screen” title=“Default Style” charset=“utf-8” />     
  <![endif]—>

Be careful though.  It is better to spend as much time trying to get it working in IE as opposed to always relying on hacks and work-a-rounds.  Usually, you can get most things working in IE, once you understand the culprit.  If you always rely on a hack or work-a-round for IE, your IE 6 and 7 stylesheets can become too much to manage.  In other words, use hacks and work-a-rounds sparingly!