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

Discussion in 'Web Design and Development (archive)' started by mystixman, Feb 21, 2004.

  1. macrumors regular

    Joined:
    Aug 11, 2002
    Location:
    USA
    #1
    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...
     
  2. macrumors 6502a

    FattyMembrane

    Joined:
    Apr 14, 2002
    Location:
    bat country
    #2
    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?
     
  3. thread starter macrumors regular

    Joined:
    Aug 11, 2002
    Location:
    USA
    #3
    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?
     
  4. macrumors 601

    Westside guy

    Joined:
    Oct 15, 2003
    Location:
    The soggy part of the Pacific NW
    #4
    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.
     
  5. macrumors 68040

    Powerbook G5

    Joined:
    Jun 23, 2003
    Location:
    St Augustine, FL
    #5
    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.
     
  6. thread starter macrumors regular

    Joined:
    Aug 11, 2002
    Location:
    USA
    #6
    The problem is that over 50% of users use IE.
     
  7. macrumors 601

    Westside guy

    Joined:
    Oct 15, 2003
    Location:
    The soggy part of the Pacific NW
    #7
    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. :)
     
  8. macrumors 65816

    kettle

    Joined:
    May 12, 2002
    Location:
    England, Great Britain (Airstrip One)
    #8
    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.:)
     
  9. macrumors member

    Joined:
    Nov 13, 2003
    Location:
    Scotland
    #9
    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
     
  10. macrumors member

    Joined:
    Nov 13, 2003
    Location:
    Scotland
  11. thread starter macrumors regular

    Joined:
    Aug 11, 2002
    Location:
    USA
  12. macrumors 601

    Westside guy

    Joined:
    Oct 15, 2003
    Location:
    The soggy part of the Pacific NW
    #12
    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.
     
  13. Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #13
    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...
     
  14. macrumors 6502a

    FattyMembrane

    Joined:
    Apr 14, 2002
    Location:
    bat country
    #14
    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 )
     
  15. macrumors 6502a

    Joined:
    Jul 18, 2002
    #15
    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!
     
  16. macrumors 6502a

    Joined:
    Jul 18, 2002
    #16
    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.
     
  17. macrumors 601

    Westside guy

    Joined:
    Oct 15, 2003
    Location:
    The soggy part of the Pacific NW
    #17
    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.
     
  18. macrumors 68000

    Joined:
    Nov 4, 2003
    #18
    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...
     
  19. macrumors 65816

    mrjamin

    Joined:
    Feb 6, 2003
    Location:
    Strongbadia
  20. macrumors 65816

    mrjamin

    Joined:
    Feb 6, 2003
    Location:
    Strongbadia
    #20
    actually, the latest version of nutscrape is CSS1 and 2 compliant. the "weird problems" you're getting are probably your CSS!
     
  21. macrumors 65816

    mrjamin

    Joined:
    Feb 6, 2003
    Location:
    Strongbadia
    #21
    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
     
  22. macrumors 601

    Westside guy

    Joined:
    Oct 15, 2003
    Location:
    The soggy part of the Pacific NW
    #22
    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.

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

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #23
    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.
     
  24. macrumors 65816

    mrjamin

    Joined:
    Feb 6, 2003
    Location:
    Strongbadia
    #24
    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>
    
     
  25. Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #25
    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.
     

Share This Page