Jump to content

fixing design for IE/Win


ilsott
 Share

Recommended Posts

I have been working on getting my css IE compliant for a couple days now and I can't handle it anymore.http://infoshop.nfshost.com/altindex.phpI'm not sure which IE/Win I'm viewing it on, but it's probably not IE6. It's doing fine on IE/Mac, netscape, firefox, and safari. Big surprise that IE/win is the sore thumb.First, the background of the center column is stretching out to it's parent div (wrapper). Second, every time there is something funky in the center column ("Lorem ipsum" works just fine) the column breaks and goes below the two other columns.btw, I'm planning to ship this with a explorer destroyer flash screen for IE users.http://www.explorerdestroyer.com/Thanks a lot.Here's the important CSS. The * html stuff was me trying to solve the problem with the box model hack.

div#wrapper{margin-left: 253px;min-width: 447px;width: auto;background: #FFF;}div#left{float: left;width: 240px;display:inline;}div#right{float: right;width: 160px;margin-top: -10px;display:inline;}div#center{ /* content width for other browsers */min-width: 282px;width: auto;margin-right: 170px;background-color: #FFCC99;background-image: url(alt/img/infopeachbg.jpg);}* html div#center /* this is recognized by IE only */{/* total width, only for IE5.x/Winbackground-color: #FFF;background-image: none;overflow: hidden;width: 353px;clip: 353px; *//* content width for other IE width: auto; */}

Link to comment
Share on other sites

Whatever happened to simple and concise ... and maintainable .... .... anyway...There are cleaner ways to do this (your site), but keeping with what you are doing...use your * html wackiness like this

* HTML DIV#center {	width: 100%;}

You might think of learning the habit of using lower case tags...

Link to comment
Share on other sites

Note that the star hack will not work in IE7 and later. IE7 will however change it's box model (or at least that's what the CSS compatability page said), so if you use the star hack, you should use it ONLY to adjust the box model and not for anything else.

Link to comment
Share on other sites

you can try hacks for FF and opera

html>body .Main {content}

use what class you want but you must add the html>body with a space before the class.And if you have a class/ID like this <body class="mybody"> then the hack must look like.

html> .mybody{content}

if the body is in the hack then somehow it will be read in IE strangely, evento it should not be able to read it.

Link to comment
Share on other sites

Whatever happened to simple and concise ... and maintainable .... .... anyway...There are cleaner ways to do this (your site), but keeping with what you are doing...
Enlighten me.I thought this:http://infoshop.nfshost.com/quickindex.htmlWas a candidate for a pretty slim and workable three column layout.Unfortunately, big things break in the center column and I had to do some very ulgy things to get IE to work.I shipped the page yesterday with IEdestroyer.http://infoshop.org
Link to comment
Share on other sites

My comment was based on my first impression when I read through your style definitions trying to find what might be causing the problemMy point was about the repetition in the style definitions - not about the actual appearanceFor example you have definitions for things like #opiniongif, #picweekgif, #historygif, #downloadgif, #newsbargif ... ... where you define about 9 attributes for each, but the only thing different in all of them is the url of the background image!Those other 8 attributes should be pulled out into a class selector - maybe ".backgroundgif". A less desirable method is instead of adding a class which they all logically belong to, just have a definition that defines the common attributes for all (by listing id), then define the background one by one in separate definitions for each id.It seems you intend for those to look the same anyway, so currently when you decide to make any change, you have to change all of them! That would be +10 lines (depending how you type it in), -24 ---> a total difference of 14 lines? just by this simple change - not changing the actual display at all. And there are more examples of this in infoshop.css!It's not just about size though, it is about grouping things and avoiding creating a complete set of rules for every individual element when possible. Such organization will help you reuse and maintain designs - and more particularly fix problems. I'm not saying don't use the id selector for anything though...You should try to make style definitions by thinking of groups of items (classes) more than thinking about how you want each individual element to work. This makes it easy to change the overall look later - and even take bits from past work and reuse it.I guess the other point I was making was noticing all the "tricks" being used for browser compatibility. There is a common set of css that works the same in most browsers, its just been overrun by tricks. Some layouts might be more complicated than that common set, but sometimes they can been simplified to a compromise. There is a similar problem with Javascript and browser detection. I have seen many scripts checking for browser type either in unreliable ways (ones that exclude browsers other than FF, IE and opera), or checking when they are doing things that could be rewritten to be cross-browser compatible. Anyway... that's me...Either way the end the page looks good- Goodwork!

Link to comment
Share on other sites

You should try to make style definitions by thinking of groups of items (classes) more than thinking about how you want each individual element to work. This makes it easy to change the overall look later - and even take bits from past work and reuse it.Either way the end the page looks good- Goodwork!
Thanks. I'll read up on creating classes. I've heard about them, and after your brief intro, they seem like something I need.best.
Link to comment
Share on other sites

Note that the star hack will not work in IE7 and later. IE7 will however change it's box model (or at least that's what the CSS compatability page said), so if you use the star hack, you should use it ONLY to adjust the box model and not for anything else.

Then I'm sure the _underscore hack will still work... :)
Enlighten me.I thought this:http://infoshop.nfshost.com/quickindex.htmlWas a candidate for a pretty slim and workable three column layout.Unfortunately, big things break in the center column and I had to do some very ulgy things to get IE to work.I shipped the page yesterday with IEdestroyer.http://infoshop.org

Bah, you may have worked hard for it to work in IE, but it looks terrible in Opera... :)No, scratch that, it looks terrible with both IE, FF and Opera, at least with resolution 1024x768. Is it perhaps optimized for 1280x1024? Edited by Jonas
Link to comment
Share on other sites

Wow... somebody needs a nap... lolI did find it strange that if visiting the site using IE you are given this message

We see you're using Internet Explorer, which is not compatible with this site.  We strongly suggest downloading Firefox. We think you'll like it betterWe see you're using Internet Explorer, which is not compatible with this site.  We strongly suggest downloading Firefox. We think you'll like it better
It does give you the choice to continue without FF though...The point is to support all browsers! not just not to support IE!
Link to comment
Share on other sites

The point is to support all browsers! not just not to support IE!
If IE was destroyed, I would be supporting all browsers.I'll be taking that splash screen down this weekend. It'll be replaced with a bannar, and then after a month or so, a big link/image in the side bar. All for IE browsers that aren't compatible with standard code (...cough...all of them).
Link to comment
Share on other sites

IE doesn't have a bad record when it comes to supporting the standard. Some things we use often aren't exactly the standard, and also sometimes the standard itself leaves some room for the browser developers to decide exactly how something must work.The biggest problem with IE has been that Microsoft constantly ADDS support for things that are not the standard and encourages people to develop using those things, which then obviously don't work anywhere else.IE is huge, firefox is new, and it has its own problems.There are a lot of things I prefer about firefox, but in the past IE has been ahead of the game alot of times when it comes to certain standards.Of course, I often wonder why w3c keeps adding new standards before the browsers are able to catch up...Anyway... its a good idea not to make the browsing experience negative for IE users, since they make up a HUGE bit of the market

Link to comment
Share on other sites

Bah, you may have worked hard for it to work in IE, but it looks terrible in Opera... :(No, scratch that, it looks terrible with both IE, FF and Opera, at least with resolution 1024x768. Is it perhaps optimized for 1280x1024?
I'm using a Mac and Windows at 800 and 1024.Unless you're using a different operating system, I tested it on all those browsers at 1024 and they all look fine.Maybe you just don't like the design itself?? :)Anyway, as for the Splash page, I modified it to us a Tan/Star hack Banner. Which will be moved to a BigFat FireFox image in the left column later on. I know it won't work in IE7, but hopefully they will sort out IE's issues it won't be an issue, so I am (and will be) rightfully targeting any browser < IE7. :)best.
Link to comment
Share on other sites

I'm using a Mac and Windows at 800 and 1024.Unless you're using a different operating system, I tested it on all those browsers at 1024 and they all look fine.Maybe you just don't like the design itself?? :)Anyway, as for the Splash page, I modified it to us a Tan/Star hack Banner. Which will be moved to a BigFat FireFox image in the left column later on. I know it won't work in IE7, but hopefully they will sort out IE's issues it won't be an issue, so I am (and will be) rightfully targeting any browser < IE7.  :)best.

Wait, are you talking about this site:http://infoshop.nfshost.com/quickindex.htmlor this:http://infoshop.org/Cause this:http://infoshop.org/looks great.This one:http://infoshop.nfshost.com/quickindex.htmldoesn't.
Link to comment
Share on other sites

I use IE at work (because I have to) and I found it extremely annoying to go to your site and then be shown the message about switching ot FIreFox.Most user would close the browser and say see ya later at that, either out of ignorance or just not wanting to switch or not seeing the link at the bottom to continue without FF.Have fun destroying IE (it still has over 80% browser share) Let me know in 5 years how that went.Let's start a Destroy Windows campaign....sheesh lol :) I just don't think it will happen anytime soon. Especially with the realise of IE7 later this year. It is going to be CSS2 compliant and many bugs have been fixed. It still won't be perfect...then again NEITHER is FireFox...but it will make things easier for developers.they just have to fix the lack of JavaScript compliance.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...