To support IE 6 or not to support IE 6

Show off new creations, get help, or just chat about all aspects of web development and design.

To support IE 6 or not to support IE 6

Postby abathor on Wed Apr 22, 2009 9:27 pm

Okay, so my portfolio site is nearly done and looks lovely in Firefox and IE8. It even looks pretty good in IE7, apart from the screwed up menu bar. However in IE6, it looks okay until you try and resize the page, which it totally refuses to do, meaning anyone who can't read the font in the current size is pretty much told to go fuck themselves. Not exactly a bastion of accessibility. So, do I even bother trying to support IE6? Surely 95% of IE users have had the sense to upgrade to IE7, IE8, or even Firefox by now?

Also, if I do choose to support it, how difficult will it likely be?
User avatar
abathor
1337 p0st3r
1337 p0st3r
 
Joined: Mon Dec 18, 2006 6:02 pm
Location: England

Re: To support IE 6 or not to support IE 6

Postby Blink on Wed Apr 22, 2009 9:34 pm

Well, to address your actual problem it sounds like you're using px in your font-sizing which IE6 can't understand when it comes to re-size.

It does however understand the em measurement. If you set the body font size to be 62.5% it will then allow you to replicate px with em. So 1.2em becomes 12px etc etc. Google the 62.5% method for more detailed explanations.

To support IE6 or not has been a hotly debated topic for a long time. Some people are still saying too many users have it to ignore it and others are flatly refusing to bother with 8 year old software.

My stance is personally (I apply this method to my portfolio) that I use enough tweaks and fixes to make my site viewable and usable but if certain things look off then I just ignore it. It's called progressive enhacement and it basically means users can get to your site content no matter what, but proper browsers get the best experience.

I'm pretty good at fixing IE6 so post any problems you get, but 9 times out of 10 Google can provide you with an answer or possibly http://www.positioniseverything.net/explorer.html
User avatar
Blink
Cool 'n that
Cool 'n that
 
Joined: Fri Oct 08, 2004 4:16 pm
Location: UK

Re: To support IE 6 or not to support IE 6

Postby abathor on Wed Apr 22, 2009 11:00 pm

Thanks Blink! As usual, you are the master when it comes to things like this! I'll take a leaf out of your book and support IE6 as much as I can, but they sure as hell aren't going to get the full experience.
User avatar
abathor
1337 p0st3r
1337 p0st3r
 
Joined: Mon Dec 18, 2006 6:02 pm
Location: England

Re: To support IE 6 or not to support IE 6

Postby abathor on Wed Apr 22, 2009 11:37 pm

Okay so one more question, in IE7, my menu bar items bunch up when I resize the browser, it doesn't happen in Firefox or IE6. Also, the links themselves somehow appear in a different place from their relevant text. It seems as though the links move correctly but the text bunches up together. Hope that makes sense. Can post pics if you need. Thanks in advance!
User avatar
abathor
1337 p0st3r
1337 p0st3r
 
Joined: Mon Dec 18, 2006 6:02 pm
Location: England

Re: To support IE 6 or not to support IE 6

Postby Blink on Thu Apr 23, 2009 8:37 am

Pics or even better would be a working link.
User avatar
Blink
Cool 'n that
Cool 'n that
 
Joined: Fri Oct 08, 2004 4:16 pm
Location: UK

Re: To support IE 6 or not to support IE 6

Postby abathor on Sat Apr 25, 2009 11:00 pm

Blink wrote:Pics or even better would be a working link.


Right, I hope these pics illustrate what I am talking about with the bug in IE7. This bug does not occur in IE8 or Firefox. Sorry there's not link yet, as the site isn't hosted and I have no idea how to host it myself.

It looks fine:

Image

Until I change the resolution, bigger or smaller, both mess it up.

Image

As you can see, the menu bar text items become misplaced, and are no longer attached to their tabs.

Here is the CSS in case it helps.

Code: Select all
h1
{
 font-family: Verdana, Tahoma, Helvetica, Arial;
 font-size: 14px;
 font-weight: normal;
 color: #132e5b;
 margin-top: 32px;
 margin-bottom: 16px;
}

h2
{
 font-family: Verdana, Tahoma, Helvetica, Arial;
 font-size: 14px;
 font-weight: bold;
 color: #132e5b;
 margin-top: 32px;
 margin-bottom: 16px;
}

p
{
 font-family: Verdana, Tahoma, Helvetica, Arial;
 font-size: 12px;
 font-weight: normal;
 color: #000000;
}

p.spaced
{
 font-family: Verdana, Tahoma, Helvetica, Arial;
 font-size: 12px;
 font-weight: normal;
 color: #000000;
 padding-top: 4px;
 padding-bottom:4px;
 line-height: 2.0;
}

p.paddedLeftAndRight
{
 font-family: Verdana, Tahoma, Helvetica, Arial;
 font-size: 12px;
 font-weight: normal;
 color: #000000;
 padding-left: 40px;
 padding-right: 40px;
 padding-top: 4px;
 padding-bottom:4px;
 line-height: 2.0;
}

p.paddedRight
{
 font-family: Verdana, Tahoma, Helvetica, Arial;
 font-size: 12px;
 font-weight: normal;
 color: #000000;
 padding-left: 0px;
 padding-right: 40px;
 padding-top: 4px;
 padding-bottom:4px;
 line-height: 2.0;
}

p.paddedLeft
{
 font-family: Verdana, Tahoma, Helvetica, Arial;
 font-size: 12px;
 font-weight: normal;
 color: #000000;
 padding-left: 40px;
 padding-right: 0px;
 padding-top: 4px;
 padding-bottom:4px;
 line-height: 2.0;
}

body
{
 margin: 0px;
 padding: 0px;
 background-color: #cbccce;
}

ul
{
 font-family: Verdana, Tahoma, Helvetica, Arial;
 font-size: 10px;
 font-weight: normal;
 color: #000000;
 margin-top: 10px;
 padding-top: 0;
}

li
{
 margin-top: 10px;
 padding-top: 0;
 padding-left: 40px;
}

ul.navbar
{
 margin-top: 10px;
 padding-top: 0;
 display: inline;
 list-style-type: none;
 padding-right: 0px;
 padding-top: 20px;
 color: black;
}

li.navbar
{
display: inline;
list-style-type: none;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
}

a.menuLink:link {color: #000; background: #bebebe url(images/left-tab-shadow.jpg) left top no-repeat; padding-left: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial; padding-bottom: 0px;}
a.menuLink:visited {color: #000; background: #bebebe url(images/left-tab-shadow.jpg) left top no-repeat; padding-left: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial; padding-bottom: 0px;}
a.menuLink:hover{color: #888; background: #bebebe url(images/left-tab-shadow.jpg) left top no-repeat; padding-left: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial; padding-bottom: 0px;}
a.menuLink:active{color: #000; background: #bebebe url(images/left-tab-shadow.jpg) left top no-repeat; padding-left: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial; padding-bottom: 0px;}

a.menuLink:link span{color: #000; background: #bebebe url(images/right-tab-shadow.jpg) right top no-repeat; padding-right: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial;}
a.menuLink:visited span{color: #000; background: #bebebe url(images/right-tab-shadow.jpg) right top no-repeat; padding-right: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial;}
a.menuLink:hover span{color: #888; background: #bebebe url(images/right-tab-shadow.jpg) right top no-repeat; padding-right: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial;}
a.menuLink:active span{color: #000; background: #bebebe url(images/right-tab-shadow.jpg) right top no-repeat; padding-right: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial;}

a.menuLinkActive:link {color: #000; background: #e7e7e7 url(images/left-tab.jpg) left top no-repeat; padding-left: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial; padding-bottom: 1px;}
a.menuLinkActive:visited {color: #000; background: #e7e7e7 url(images/left-tab.jpg) left top no-repeat; padding-left: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial; padding-bottom: 1px;}
a.menuLinkActive:hover{color: #888; background: #e7e7e7 url(images/left-tab.jpg) left top no-repeat; padding-left: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial; padding-bottom: 1px;}
a.menuLinkActive:active{color: #000; background: #e7e7e7 url(images/left-tab.jpg) left top no-repeat; padding-left: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial; padding-bottom: 1px;}

a.menuLinkActive:link span{color: #000; background: #e7e7e7 url(images/right-tab.jpg) right top no-repeat; padding-right: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial;}
a.menuLinkActive:visited span{color: #000; background: #e7e7e7 url(images/right-tab.jpg) right top no-repeat; padding-right: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial;}
a.menuLinkActive:hover span{color: #888; background: #e7e7e7 url(images/right-tab.jpg) right top no-repeat; padding-right: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial;}
a.menuLinkActive:active span{color: #000; background: #e7e7e7 url(images/right-tab.jpg) right top no-repeat; padding-right: 10px; text-decoration: none; font-weight: normal; font-size: 12px; font-family: Verdana, Tahoma, Helvetica, Arial;}

img.noBorder
{
 border: 0px solid #666666;
}

img
{
 border: 1px solid #666666;
}

/************************* ID's *************************/

div#mainContainer
{
 width: 100%;
 height: 100%;
 margin: 0 auto;
 position: relative;
 border:0px solid #000000;
 padding: 0px;
 background: url("images/fullScreenBGTopLayer.jpg") repeat-x;
 background-position: top;
}

div#subContainer
{
 width: 1024px;
 height: 100%;
 margin: 0 auto;
 position: relative;
 border:0px solid #000000;
 padding: 0px;
 background: url("images/fullScreenBGTopLayer.jpg") repeat-x;
 background-position: top;
}

div#contentContainer
{
  width:800px;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  top: 0;
  bottom: 0;
  background-color: #e7e7e7;
  border:1px solid #000000;
  padding: 0px;
}

div#headerImage
{
  margin: 0 auto;
  width: 100%;
  height: 100%;
  top: 0%;
  bottom: 0%;
  text-align: center;
  position: relative;
  border:0px solid #ecf6fb;
  padding: 0px;
}

div#navbar
{
  margin: 0 auto;
  width: 100%;
  text-align: left;
  font-size: 12px;
  background: url("images/navbar.jpg") 100% 100%;
  height: 100%;
  border-top:1px solid #000000;
  border-bottom:1px solid #000000;
  padding-left: 0px;
  padding-right: 0px;
}

div#mainTextBlock
{
  margin: 0 auto;
  width: 100%;
  height: 100%;
  text-align: left;
  background-color: #e7e7e7;
  padding-top: 2px;
}

div#mainTextBlockText
{
  width: 90%;
}

.topPadded
{
 padding-top: 8px;
}

div#mainTextBlockModelling
{
  margin: 0 auto;
  width: 100%;
  height: 100%;
  text-align: left;
  background-color: #e7e7e7;
  padding-top: 2px;
  padding-bottom: 8px;
  border-left:0px solid #aaabac;
  border-right:0px solid #aaabac;
}

div#mainTextBlockModellingSub
{
  margin: 0 auto;
  width: 100%;
  height: 100%;
  text-align: left;
  background-color: #e7e7e7;
  padding-top: 2px;
  padding-bottom: 8px;
}

.imageContainer
{
 width: 90%;
 text-align: left;
 position:relative;
 padding-left: 40px;
}

.mainTextTitle
{
  margin: 0 auto;
  width: 100%;
  text-align: left;
  padding-left: 40px;
}

div#copyright
{
  margin: 0 auto;
  width: 100%;
  text-align: center;
  font-size: 12px;
  background-color: #eff7fc;
  height: 50px;
  border-top:1px solid #aaabac;
  position:relative;
}

div#copyrightSub
{
  margin: 0 auto;
  width: 100%;
  height: 12px;
  text-align: center;
  font-size: 12px;
  position: relative;
  top:17.5%;
}

div#subHeader
{
  width: 100%;
  text-align: center;
  font-size: 10px;
  background: url("images/navbar.jpg") 100% 100%;
  height: 60px;
  border-top:1px solid #cccdce;
  margin-top:-10px;
  top:-50%;
}

#lightbox{   position: absolute;   left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%   ; }

#imageData{   padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }   
#imageData #caption{ font-weight: bold;   }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;   }         
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}       

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
User avatar
abathor
1337 p0st3r
1337 p0st3r
 
Joined: Mon Dec 18, 2006 6:02 pm
Location: England

Re: To support IE 6 or not to support IE 6

Postby Blink on Sun Apr 26, 2009 12:00 am

Are your nav tabs a set width or something? From here it looks like they are set so that they can't expand and contract with the content itself. This will be a problem if the content is re-sized.

I would recommend you explore the sliding doors method which allows an image to be used on a tab of variable width.

Also from looking at your CSS it looks as though you could do with shortening a lot of your properties.

For example:

Code: Select all
margin: 10px 5px 15px 10px;


Which is more efficent then setting each side on a new line.

Explore this page for more.
User avatar
Blink
Cool 'n that
Cool 'n that
 
Joined: Fri Oct 08, 2004 4:16 pm
Location: UK

Re: To support IE 6 or not to support IE 6

Postby abathor on Sun Apr 26, 2009 12:10 am

Thanks Blink, I'll give them a go!
User avatar
abathor
1337 p0st3r
1337 p0st3r
 
Joined: Mon Dec 18, 2006 6:02 pm
Location: England

Return to Web Design & Development

Who is online

Users browsing this forum: No registered users