PDA

View Full Version : Why do people have to use Internet Explorer? (CSS Problem)


mystixman
Feb 21, 2004, 10:58 PM
I'm making a design for my friend's Audioslave fan sight. (Prototype can be seen HERE (http://isophonic.net/clients/chriscornell)).

Here is the CSS code that is broken in IE.

#content {
font: 8pt verdana;
position: absolute;
top: 115px;
bottom: 145px;
left: 0px;
right: 0px;
overflow: auto;
border: 1px solid #333333;
background-color: #040404;
padding: 8px;
}

It works just great in every other browser. The bottom and right selectors seem to be ignored, even though i included the position: selector...

FattyMembrane
Feb 21, 2004, 11:22 PM
Why? they don't know any better. IE is the the thorn in the side of every web designer who codes for standards but has the responsibility of providing a site that can be viewed in the most browsers possible. the worst part is, IE doesn't follow standards on many layout issues, so how are you supposed to know how to solve the problem if there's no documented answer?

mystixman
Feb 21, 2004, 11:28 PM
I went to the super sexy, super wonder microsoft.com and found that the bottom and right selectors should work if I include position: absolute; . Well, it doesn't. Did I mention I really dislike IE?

Westside guy
Feb 22, 2004, 01:09 AM
If you look around for IE CSS hacks you may find something that'll let you do this.

I started coding my Web pages that way - but then I decided I wasn't gonna use any IE hacks. So personally I just make sure the site is useable in IE, even if it doesn't look quite as cool; and I put a page in my FAQ called "Important notes for visitors using older browsers or Internet Explorer". :D It probably doesn't do much good, but it makes me feel better.

Powerbook G5
Feb 22, 2004, 02:00 AM
It's about time that people stopped making exceptions to accomadate Internet Explorer and just code according to standards. If every other browser can display it fine then screw IE, either Microsoft finally gets things right or people will have to wise up and use a browser that works correctly. Maybe once Microsoft sees more people dropping their gem for Firebird, Opera, Safari, etc, they will do something to make Internet Explorer support standards and more sites in general will be compliant to the standards.

mystixman
Feb 22, 2004, 01:24 PM
The problem is that over 50% of users use IE.

Westside guy
Feb 22, 2004, 02:29 PM
Originally posted by mystixman
The problem is that over 50% of users use IE.

Heh - depending on who you believe, it's more like 85%-95% of Web users. :D

There is hope though - I recall back when people were saying "why is Microsoft bothering? Netscape already has this market sewn up." So it can happen; we just have to do our best to help it along. :)

kettle
Feb 22, 2004, 02:41 PM
Originally posted by Powerbook G5
It's about time that people stopped making exceptions to accomadate Internet Explorer and just code according to standards. If every other browser can display it fine then screw IE, either Microsoft finally gets things right or people will have to wise up and use a browser that works correctly. Maybe once Microsoft sees more people dropping their gem for Firebird, Opera, Safari, etc, they will do something to make Internet Explorer support standards and more sites in general will be compliant to the standards.

I agree, plus using hacks in CSS to make things better is just making more potential incompatability in the future. If you are going to use standards then stick to them.

I think that there should be a "Fails with Microsoft IE" standard logo that people can put into the their code. This would link to a page explaining in basic terms why Microsoft are such a pain in the rear end.:)

raytube
Feb 22, 2004, 03:28 PM
Hi,
Mmmm, this is a real bugbear to me too. It makes me SO MAD when I'm trying to make a layout work and it's IE that makes it fall over. I'm in the position where I need things to work in every browser but I am all in favour of going for pure standards compliance rather than any particular browser, especially if it's IE's quirks.
Anybody heard of any likelyhood of Microsoft bringing out a 'service pack' that will fix their flaws such as padding etc??? Not holding my breath but it would be great. Maybe someone should petition Microsoft to get it sorted out ;)

Rick

raytube
Feb 22, 2004, 03:51 PM
;)

http://www.suburbia.org.uk/fails_with_ie.gif

mystixman
Feb 22, 2004, 05:31 PM
Well, I had to resort to frames ( Ecchhh!). Anyway, it works.

http://isophonic.net/clients/chriscornell

Westside guy
Feb 22, 2004, 06:12 PM
You know, when I looked at your page the first time I thought "what about using an iframe?" It is part of the standard, and since it started in IE they should support it. :D

Might be a little less onerous to work with.

Rower_CPU
Feb 23, 2004, 02:54 AM
Originally posted by kettle
I agree, plus using hacks in CSS to make things better is just making more potential incompatability in the future. If you are going to use standards then stick to them.

...

Small note: CSS hacks validate, therefore are part of the standard.

I agree, however, on avoiding them when possible. ;)

In terms of the original problem, here are a couple of ideas why IE was ignoring the bottom and right position values.

For starters, the left and right values are redundant, since divs default to 100% width anyway.

Since you want the #content area to be fluid with the browser width/height, you might try min and max-height declarations instead of declaring the bottom value...or, set a bottom margin of 145px on #content and absolutely position the footer to bottom 0px.

Worth a shot...

FattyMembrane
Feb 23, 2004, 12:04 PM
Originally posted by Westside guy
There is hope though - I recall back when people were saying "why is Microsoft bothering? Netscape already has this market sewn up." So it can happen; we just have to do our best to help it along. :)
unfortunately, there were two problems back then
1. MS had a strangle-hold on 95% of the pc market
2. most people using windows have no idea how computers work, so if there is a button on the desktop that says "internet", they'll click it regardless of what it is.

unfortunatley, these problems persist today. web coders care about standards, but a good 90% of web surfers can't differentiate between moz and IE and don't care, as long as the sites they visit look ok.

i think about the only thing that would work would be a "boycott IE day", were high traffic websites use browser sniffing to turn away ie for a day. that would shake things up (and flush sales down the toilet :D )

Thirteenva
Feb 23, 2004, 01:48 PM
Originally posted by raytube
Hi,
Mmmm, this is a real bugbear to me too. It makes me SO MAD when I'm trying to make a layout work and it's IE that makes it fall over. I'm in the position where I need things to work in every browser but I am all in favour of going for pure standards compliance rather than any particular browser, especially if it's IE's quirks.
Anybody heard of any likelyhood of Microsoft bringing out a 'service pack' that will fix their flaws such as padding etc??? Not holding my breath but it would be great. Maybe someone should petition Microsoft to get it sorted out ;)

Rick

Unlikely, a service pack would not fix these types of issues. For one, the incorrect rendering of a box model has existed since IE 5. Two, why should MS fix it if they're leading the market share. The latest numbers have IE at up over 85% (if you combine IE 5 and 6 users).

Just be greatful that NS 4 users have dropped off the face of the planet with the latest stats on the web indicating they're below 1% of the browsing public. phewwww!

Thirteenva
Feb 23, 2004, 01:53 PM
Originally posted by Rower_CPU


Small note:Since you want the #content area to be fluid with the browser width/height, you might try min and max-height declarations instead of declaring the bottom value...or, set a bottom margin of 145px on #content and absolutely position the footer to bottom 0px.

Worth a shot...

min-height and max-height are not well supported in the IE camp. IE 5 will ignore it. IE 6 i believe will support only the min-height selector but will only apply it to TH TR and TD tags with table layout selector set to fixed.

Westside guy
Feb 23, 2004, 01:53 PM
Microsoft has already said they're not doing independent browser development anymore - IE will get updated only as it functions within Windows, for the most part.

Of course if another browser starts taking market share away, they can still afford to reverse course.

benpatient
Feb 23, 2004, 02:17 PM
hmn....it's funny, i've found Netscape to be the biggest CSS-screwer-upper...

the latest version is better, but i still get weird probs...

and don't even get me started about the pages that are "unreachable" in safari and load fine in everything else...

mrjamin
Feb 25, 2004, 11:25 AM
http://www.google.com/press/zeitgeist/jan04_browsers.gif

frightening!

http://www.google.com/press/zeitgeist/jan04_pie.gif

even more so

mrjamin
Feb 25, 2004, 11:28 AM
Originally posted by benpatient
hmn....it's funny, i've found Netscape to be the biggest CSS-screwer-upper...

the latest version is better, but i still get weird probs...

and don't even get me started about the pages that are "unreachable" in safari and load fine in everything else...

actually, the latest version of nutscrape is CSS1 and 2 compliant. the "weird problems" you're getting are probably your CSS!

mrjamin
Feb 25, 2004, 11:31 AM
Originally posted by Westside guy
Microsoft has already said they're not doing independent browser development anymore - IE will get updated only as it functions within Windows, for the most part.

they've supposedly reneged on that and said to be working on a newer version of IE6 in XP SP2. IE6.5 maybe?

IE went from 5 to 5.5 in one jump and that version introduced a load of improvements so here's hoping that 6.5 does the same

still, i doubt it'll ever be a scratch on firefox (http://www.mozilla.org/products/firefox)

sorry, three posts in a row - i feel bad

Westside guy
Feb 25, 2004, 02:04 PM
Originally posted by mrjamin
they've supposedly reneged on that and said to be working on a newer version of IE6 in XP SP2. IE6.5 maybe?

It'd sure be nice if they'd get caught up on CSS, and fix things like PNG handling (on Windows anyway). I'm a bit skeptical that they'll do anything about standards compliance though, because I think they see IE as just another way to push the Windows "standard". So unfortunately it'll be more likely that more Windows-centric enhancements would be introduced, IMNSHO.

sorry, three posts in a row - i feel bad

Okay your run has been broken up - go nuts. :D

Rower_CPU
Feb 25, 2004, 04:55 PM
Yeah, those UA charts by large sites like Google can be disheartening.

IE's PNG support really gets me. Full PNG alpha transparency support has such great potential for beautiful designs. If you don't want to resort to huge javascript hacks to get it to work, you have to design around IE users seeing a crappy layout.

mrjamin
Feb 25, 2004, 05:14 PM
Originally posted by Rower_CPU
...IE's PNG support really gets me. Full PNG alpha transparency support has such great potential for beautiful designs. If you don't want to resort to huge javascript hacks to get it to work, you have to design around IE users seeing a crappy layout.

huge javascript hacks like:

<script language="javascript" type="text/javascript">
<!--
// === SLEIGHT.JS CODE (Copyrightę YoungPup) WITH MODIFIED CSS-INLINE IMAGE SUPPORT ========================
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
document.writeln('<style type="text/css">img { visibility:hidden; } </style>');
window.attachEvent("onload", fnLoadPngs);
}

function fnLoadPngs() {
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);

for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--) {
if (itsAllGood && img.src.match(/\.png$/i) != null) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
img.src = "images/spacer.gif";
}
img.style.visibility = "visible";
}
}

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", alphaBackgrounds);
}

function alphaBackgrounds(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (i=0; i<document.all.length; i++){
var bg = document.all[i].currentStyle.backgroundImage;
if (itsAllGood && bg){
if (bg.match(/\.png/i) != null){
var mypng = bg.substring(5,bg.length-2);
document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
document.all[i].style.backgroundImage = "url('images/spacer.gif')";
}
}
}
}
-->
</script>

Rower_CPU
Feb 25, 2004, 09:35 PM
Exactly.

To me, that's a huge hack for two reasons:
- javascript has to be enabled on the client side
- adds to page weight just to make sure a web standard that has been in place since 1996 gets displayed properly by the dominant browser

It just rubs me the wrong way.

FattyMembrane
Feb 25, 2004, 11:24 PM
honestly, dillo has support for transparent png's and internet explorer still can't handle them - wtf? if i had a dime for every web-design i've had to butcher because IE can't display a damn png right, i could buy lunch... at arbys. anyway...

the problem really is awareness. 95% of computer users have no clue what they're doing and they really have no incentive to switch when IE is right on the desktop.