CSS Monkeys HELP!

[Stimpy]

I decided to start learning XHTML/CSS last weekend and so far it's going pretty well, I've run into a slight problem though, I have the following code

#outline {
position:relative;
width:auto;
top:-1px;
min-width:120px;
min-height:800px;
margin:0px 210px 1px 170px;
border-left:1px solid black;
border-right:1px solid black;
background-color:green;
padding:10px;
z-index:3;
}

My problem is IE6 is completely ignoring the min-height:800px I have in there, it's absolutley fine in Firefox (damn you Explorer) I was hoping someone could shed some light on this or may know of a hack to make IE behave, I would post the site but I've just put a load of php in it and I haven't got my php webspace yet I'm just testing locally.

Thanks in advance if anyone can help

 

[Stimpy]

You can put your thinking caps away I managed to hack the bastard into working, I should have known IE wouldn't support the code

 

[fatbusinessman]

My problem is IE6 is completely ignoring the min-height:800px I have in there

He has discovered the first and foremost problem with using CSS - Internet Explorer is a complete fucking pile of shit.

 

[wyrd_fish]

indeed

in order for mine to work in IE, it won't work in others, eg Firefox makes a right mess, it streches the page to about 10 its height and doesn't display alot of it

and as a result, my site needs another over-haul

 

[fatbusinessman]

I find that, in general, the best way to develop is to keep to the standards as much as possible. If your site looks fine in most browsers (Firefox, Opera, etc) but doesn't quite look right in IE, then bugger the IE users. It's not worth wrecking your site for the sake of a browser which screws with any standard you throw at it.

If, however, it looks completely and utterly wrong in IE, then it's probably the case that a certain amount of tweakage is necessary.

 

[Shovel]

indeed

in order for mine to work in IE, it won't work in others, eg Firefox makes a right mess, it streches the page to about 10 its height and doesn't display alot of it

and as a result, my site needs another over-haul

First up - as Fatty says, IE doesn't have any support for the min-width or max-width CSS properties. It's a bit of a pain, though you could code some javascript to enforce it... ugly though. very ugly.

As for IE vs. real browser considerations, one idea would be to have a standard stylesheet and then tack on a piece of browser detecting javascript on your page.

Something like:

if(isIE()) {
  document.write("<style type=\"text/css\">"
  +"@import(\"/style/ieisafuckingbitch.css\")"
  +"</style>");
}

That's rather rough and you'll need to look up the appropriate actual code

Anyway, in "ieisafuckingbitch.css" you can put duplicate styles for those declared in your main stylesheet and these should override them automatically. The importance order is (user) -> <style> -> <link> iirc, so your @import()ed stylesheet should override.

This would allow you to make some consessional tweaks for IE (maybe using some of the propriety mso-* CSS to tweak with), without affecting other browsers.

You might want to try looking at MSDN for Microsoft's CSS documentation to see if that helps you hack it into shape. Don't waste too much time on it ...And don't forget the "Get Firefox" link

 

[Shovel]

I find that, in general, the best way to develop is to keep to the standards as much as possible. If your site looks fine in most browsers (Firefox, Opera, etc) but doesn't quite look right in IE, then bugger the IE users. It's not worth wrecking your site for the sake of a browser which screws with any standard you throw at it.

There is however, one fundamental flaw with philosophy. As irritating as Explorer may be, 90% of people use it. If you're happy telling 90% of your visitors to 'piss off' then do this. If not then I'm afraid you'll have to put more effort in. "wrecking your site" maybe, but if it's already wrecked 90% of the time when you are standards comp, it's all rather pointless. In exactly the same way as new games will run on a 1.5Ghz processor when 64 bit 3400 processors with exist, you have to make concessions for the aging web browser that most people have. The nice thing about web dev is that it's not too painless to do this, and through use of conditional javascript or whatever, you can still have Firefox burn rubber while degrading competently into IE.

My way is, in fairness, similar to Fattys. Work in standards and the tweak as needed. Although IE is the worst (as much through age as anything), Mozilla and Opera are not without their quirks (there are just less of them. Lots less).

I tend to approach each bug on an individual basis. I've used mid-width a few times on Students' Social, but I decided that it wasn't a significant enough part of the page to warrant writing a hack for IE to run it. Just work through the page like that

There are some bits of CSS like position:relative that just wont work in practice until IE gets an update, since you can't really tweak position as dramatically as that. You should find that most of the time you can get by though. Be prepared to let IE suffer a little, just so long as your page comes out looking ok, it's fine.

Remember - when someone visits your website they don't give a damn why the page doesn't work. The especially don't care to change their browser just because your page isn't right. None of us are that important to make people change. If they email you to say "this doesn't work" and you respond "your browser is shit, get this new one" they'll think "what a twat/geek/nerd/arsehole" and go browse somewhere else. My feeling on converting people is to sell the better idea, not just slag off the old guard.

Remember when we all went from Netscape 4 to IE5? Remember the slagging the NS got back then? Remember all those highly pompous and irritating "Best viewed in IE" messages? It's starting to happen again, but this time in favour of Firefox. I don't know if that's a good thing really. Somewhat ironic that to promote standards you have to promote a product...

Anyway, babble over. Good luck with the site

 

[Gef]

This is pretty easily solvable, in IE when you set the height of something it uses the parent container as a reference point. You just need to make sure that all parent containers also specify a height, i.e if you wanted a div thats 100% height of the page you need to also set the height of the <body> to 100%.

Seems a bit odd but then so is IE's standards