Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Why do people have to use Internet Explorer? (CSS Problem)

M

mystixman

macrumors regular
Original poster
I'm making a design for my friend's Audioslave fan sight. (Prototype can be seen HERE).

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...
 
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?
 
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?
 
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". 😀 It probably doesn't do much good, but it makes me feel better.
 
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.
 
Originally posted by mystixman
The problem is that over 50% of users use IE.
Click to expand...

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

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. 🙂
 
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.
Click to expand...

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.🙂
 
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
 
😉

fails_with_ie.gif
 
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. 😀

Might be a little less onerous to work with.
 
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.

...
Click to expand...

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...
 
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. 🙂
Click to expand...
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 😀 )
 
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
Click to expand...

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!
 
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...
Click to expand...

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.
 
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.
 
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...
 
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...
Click to expand...

actually, the latest version of nutscrape is CSS1 and 2 compliant. the "weird problems" you're getting are probably your CSS!
 
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.
Click to expand...

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

sorry, three posts in a row - i feel bad
 
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?
Click to expand...

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
Click to expand...

Okay your run has been broken up - go nuts. 😀
 
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.
 
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.
Click to expand...

huge javascript hacks like:

Code: 
<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>
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back