Recommend
34 
 Thumb up
 Hide
33 Posts
1 , 2  Next »   | 

BoardGameGeek» Forums » BoardGameGeek Related » BGG General

Subject: 80 GG for anyone who can tell me why IE sucks** rss

Your Tags: Add tags
Popular Tags: [View All]
A. S.L.
United States
DeKalb
Illinois
flag msg tools
designer
publisher
mbmbmbmbmb


**terms and conditions apply (skip to the bottom for exact conditions to be met to get the GG)


Sorry, it's not THAT easy!


Obviously IE sucks in plenty of ways and I don't have enough GG to give to everyone who can name an IE flaw (though interesting factoids and/or little tidbits of info that might, in the future, help a webpage designer might POSSIBLY get tipped).


The query in general


What I want to know SPECIFICALLY is why IE no longer correctly displays 2 of the pages I made for a website two years ago.

(If you can't tell me why the current code displays improperly, but CAN explain a different method of structuring my page that DOES display properly across all major browsers, you will still be able to get GG. See terms and conditions below.)

Even more specifically, I want to know why IE seems to be reading tables differently than other browsers AND EVEN reading tables differently WITHIN ITSELF.

NOTE TO NON-CODERS
If you don't think you can help yourself, please thumb the list so that it stays active and visible longer, thereby making it more likely that people who can help see this thread. (Also, small amounts of may be awarded to random thumbers.)


Specific Problems to be solved


Here's what I mean:

Open firefox or safari or opera or something that's not IE and look at the following page:

http://www.techhouse.org/~amanda/vol1vol2/o/o.htm

NOW look at the same page in IE.

The most glaring inconsistency here is the huge gap between the "n" and the "t" in "unicoherent" but if you look carefully, you'll see that pretty much EVERTHING is a bit off. So IE reads tables differently than other browsers.

Ok. I want to know how to fix that.

But how's this for a total "beginner" coder's nightmare? Imagine two tables written the EXACT SAME WAY* (same number of rows and columns, same cells merged, same cell padding, same table margin, etc. etc.). The only noticeable difference is the pixel size is different for each. Now imagine both of these tables are put on a single page. You open the page in IE and one table shows up correctly while the other is horrendously off. In other browsers, both tables are fine. That is exactly the case with my page at

http://www.techhouse.org/~amanda/vol1vol2/r/r.htm

*I tried fixing the page numerous times myself, so I may have tried changing stuff with the first table (the back button) and not the second table (the text box) in the default code, so they may not be "exactly the same" now, but they were at one point. I put up some other similar versions of the code where I tried tweaking this or that, but which all still have the exact same problem, at:
http://www.techhouse.org/~amanda/vol1vol2/r/r1.htm
and
http://www.techhouse.org/~amanda/vol1vol2/r/r2.htm

I REALLY want to know what's up with that!!!

So, on to the conditions for the prize:


So here's the deal: Terms & Conditions


To get the FULL 80 GG, you'll have to tell me what is wrong with my current code (as far as IE is concerned) AND you'll have to not only explain how to fix the problems with a quick patch that will break at the next release, but actually show me a robust way of implementing my layouts, and when I say "show" me, I mean actually write up the code, with commentary where I may not understand something (which may be a lot - I know basic html, basic css, enough Javascript that I can steal someone else's code and adapt it to my needs, and I did at one point learn stuff and about Perl and Ruby and the like but I figured I'd never use it so it went in one ear and out the other.)

for 80 :
1) a written explanation of why my current code (for both pages) is not working in IE anymore.
2) re-written htm files for both r.htm and o.htm that display and function correctly (i.e. the way they do currently in firefox etc.) in all browsers, including various releases of I.E.
3) Agreement to answer questions I may have about the new code.

for 40 :
- being unable to say why my code doesn't work, but being able to offer me new code that DOES work (new files for both r.htm and o.htm that display and function correctly in all major browsers, including various releases of I.E.)
--OR--
-being able to tell me what is wrong with my code on one of the two pages (and writing a working version of that page), but not the other.


Geekmail me first
I'm sure multiple people here could meet the requirements for the gold, and I can't pay all of them. To avoid the situation where redundant work is done, first take a look at what is visually wrong on the internet explorer pages as compared with other browsers. Take a look at the source code. If you think you can do this, or part of this, geek-mail me with what you think you can do and a timeframe of how long you think it would take before devoting serious effort to it.

This next part is completely optional, you will not be disqualified for not writing anything else, but if you want to win favor for your cause, write at least a few lines about how different browsers implement tables. Or show off your skills by making some comments about really anything web-design related at all. I want to see not just what you know, but perhaps more importantly, how well you can explain difficult concepts to the lay geek (is that an oxymoron?)

Hopefully I'll get several emails so I'll have several volunteers to choose from. I'll figure out a way to pick who to work with. If for some reason, things don't work out, I'll email another person who had volunteered and so on.


Note:
For the real code-savvy, see the thread I'll be posting later today (or soon) offering GG for updating an out-of-date firefox extension.




5 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
steven slater
England
County of Essex
flag msg tools
mbmbmbmbmb
One of the 999 monkeys that program microsoft software was of sick.
8 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Rich Shipley
United States
Baltimore
Maryland
flag msg tools
the liberal unsavory type
mbmbmbmbmb
Looks good in IE 8. I assume you are having problems in IE 9?

I tried 9 briefly and downgraded back to 8. I'll wait until it is a little more baked.
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Robert Cannon
United States
ATLANTA
GA
flag msg tools
mbmbmbmbmb
I am looking at it in IE and don't see any problems. Maybe there is something wrong with your IE installation (like a plugin).

I noticed that you don't have a DOCTYPE specified. That is am important way to tell IE (and other browsers) what rendering behavior you expect.

http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determ...

http://blogs.msdn.com/b/ie/archive/2010/10/19/testing-sites-...

3 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Tom Usher
Wales
Conwy
Conwy
flag msg tools
mbmbmbmb
You don't specify what version of IE you're using, but I tried it in IE6 and it seems fine to me.

A few things you should be considering though:

If you want a more robust way of implementing layouts, stop using tables. You could implement the layout of everything you've done in CSS (albeit with liberal use of the CSS 'transform' property and some polyfills/'filter' so it works in IE). Here's a quick example of how that would be structured: http://jsfiddle.net/yvgd5/

Don't expect things to look exactly the same in all browsers - this isn't print design, things will look different.

As for your implementation; you're not specifying a doctype (see http://www.alistapart.com/articles/doctype/ - a bit outdated but still helpful). You're going to find it hard to predict the behaviour of IE without one.
  • [+] Dice rolls
Andy Andersen
United States
Ada
Michigan
flag msg tools
mbmbmbmbmb
It just does. Thanks for the
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
A. S.L.
United States
DeKalb
Illinois
flag msg tools
designer
publisher
mbmbmbmbmb
Pictures of problems

To show you what I mean by things not displaying correctly, I took screenshots and posted them to here and here

I am using I.E. 9, but I've checked out the website on other computers that and it these two pages showed up incorrectly on the other computers too.

While it is nice to know that the page is displaying correctly for most people, I would like it to show up correctly for _everybody_, but have no idea why it's not doing that.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Tom Usher
Wales
Conwy
Conwy
flag msg tools
mbmbmbmb
IE9 generally behaves itself compared to the older versions of IE; so I'd hazard a guess that your issue is doctype related.

On the very first line of your html files, before , try adding this line.

This is quite an old 'loose' doctype but as it looks like your page was built in FrontPage 6.0, it's probably suitable.
 
 Thumb up
2.00
 tip
 Hide
  • [+] Dice rolls
Steve Duff
Canada
Ottawa
Ontario
flag msg tools
mbmbmbmbmb
It looks fine for me in IE9, nothing like your screen shot. I think the main problem is in your personal browser.

However, there are still massive problems in your code. You should always validate your markup at http://validator.w3.org/
Direct link to your code: http://tinyurl.com/847wcbz

Doing that shows 41 errors, including the lack of doctype noted above. Only once it validates can you truly attack a problem.

I suspect that you're encountering the famous IE Box model bug due to the lack of doctype. http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
6 
 Thumb up
5.00
 tip
 Hide
  • [+] Dice rolls
A. S.L.
United States
DeKalb
Illinois
flag msg tools
designer
publisher
mbmbmbmbmb
tomusher wrote:

On the very first line of your html files, before , try adding this line.


I tried adding that line at the beginning and still had the same problems.

Can you tell me more about doctypes? Would a doctype "issue" cause the back-button table to display differently from the textbox table??


(As to using front page, I didn't have any other (newer) web development software around, b/c mostly if I make a page I code it just by typing, not using a graphical interface, but the tables were getting complex with merged cells and stuff, so I did use FrontPage. Like I said, I tried various edits that I thought might help later on, so the code as it stands is not exactly what frontpage created.)
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
A. S.L.
United States
DeKalb
Illinois
flag msg tools
designer
publisher
mbmbmbmbmb
BoardGameGeek » Forums » BoardGameGeek Related » BGG General
Re: 80 GG for anyone who can tell me why IE sucks**
UnknownParkerBrother wrote:
It looks fine for me in IE9, nothing like your screen shot. I think the main problem is in your personal browser.


A) what about my personal browser would be different from anyone else's in a way that would cause errors like this?

B) the pages show up incorrectly on my mother's computer and at least one other friend's computer too.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Sky Zero
United States
Illinois
flag msg tools
mbmbmbmbmb
Because it's NOT Google Chrome.

There's your answer, simple as that.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Ed Federmeyer
United States
Illinois
flag msg tools
C, C++, C#, Objective-C
badge
Awesome!
mbmbmbmbmb
I can't explain why you are seeing a problem with these pages, but I can tell you they show up fine for me on IE9 9.0.8112.16421 (both the 32-bit and 64-bit versions) on Windows 7 SP1 (64-bit).

Maybe your specific versions of IE9 or Windows are different? Are you up-to-date on all your software updates?

Good luck, and keep us posted, it'll be interesting to see what it turns out to be.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
that Matt
United States
Toledo
Ohio
flag msg tools
I'm a quitter. I come from a long line of quitters. It's amazing I'm here at all.
badge
I can feel bits of my brain falling away like wet cake.
mbmb
tomusher wrote:
If you want a more robust way of implementing layouts, stop using tables. You could implement the layout of everything you've done in CSS (albeit with liberal use of the CSS 'transform' property and some polyfills/'filter' so it works in IE). Here's a quick example of how that would be structured: http://jsfiddle.net/yvgd5/

Yes.

Eliminate the ginormous table that you're using to try to format your page properly.

It's terrifying.
3 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
A. S.L.
United States
DeKalb
Illinois
flag msg tools
designer
publisher
mbmbmbmbmb
tumorous wrote:

Yes.

Eliminate the ginormous table that you're using to try to format your page properly.

It's terrifying.


It is terrifying, but I learned to write webpages in the 90's before css really existed, so I know how to create "styles" with css but not much else. I'll check out the link when I have more time later and probably award some more single-digit amounts of geekgold as I have been doing for some of the other tips I've found useful.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Robert Wesley
Nepal
Aberdeen
Washington
flag msg tools
designer
mb
slatersteven wrote:
One of the 999 monkeys that program microsoft software was of sick.
Aren't these A-L-L 'sick monkeys' to begin with for having wrought IE in the first 'place'? That ONE may have been 'twisted' by the 'tail' as well... whistle
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
A. S.L.
United States
DeKalb
Illinois
flag msg tools
designer
publisher
mbmbmbmbmb
DeltaAlphaBravo wrote:
I bought a car 10 years ago. I don't change its oil and I may have put the tires on backwards.. Now all the sudden it shakes when I drive on the new express way. Works great on the gravel roads.
New express ways suck. Can anyone tell me why?


hahaha. Yes, I know my code is like a 10 year old car that hasn't been kept up at all. I created the code most using knowledge learned over 10 years ago and I know my code is FAR from being the best way to implement the effect I desired. I entirely agree. In my post I ask how fix or build a new car (code) because I know that the code needs to be updated. I picked on I.E. in the subject heading b/c I thought it might make the thread sound more interesting and also because not all "new expressways" suck - the newest versions of every other browser I've tests my pages on work fine with my code - it is I.E. alone that is problematic.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
A. S.L.
United States
DeKalb
Illinois
flag msg tools
designer
publisher
mbmbmbmbmb
tomusher wrote:
Here's a quick example of how that would be structured: http://jsfiddle.net/yvgd5/


Ok, so I didn't get around to checking your links out earlier 'cause I had other stuff going on, and I just assumed that they were links to generic tutorials. But it's not! You yourself created an example showing me how to structure the page without tables! I don't fully understand it, but I can look stuff up on my own to hopefully see what exactly is happening in your code. As to how to extend this structure to handle the whole shebang, I fear I may get a bit lost. I'm sorry I didn't tip you earlier, but I shall now. And if you are willing to continue to help me troubleshoot as I attempt to rewrite this page and explain things like this polyfills/'filter' of which you speak, maybe your "tip" can be the first installment of payment in full.

BUT
the only question I have is - what if 2 browsers have 2 different default serif fonts - wouldn't that have an impact on spacing???
The fact that different browsers use different fonts was what led me to make the link jumble out of images of words rather than actual text in the first place.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
フィル
Australia
Ashfield
NSW
flag msg tools
designer
Pushing a lesbian old growth union-approved agenda since '94.
mbmbmbmbmb
unicoherent wrote:
BUT the only question I have is - what if 2 browsers have 2 different default serif fonts - wouldn't that have an impact on spacing???

Yes, since your table has a lot of   entities which may be larger than the cell width in some typefaces.

Edit: You can test this theory by turning table borders on temporarily.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Paul Clegg
United States
San Carlos
California
flag msg tools
mbmbmbmbmb
FWIW, they look about the same to me, on Chrome (my usual browser) and IE9 64-bit. I noticed the background grid was a little off, but then realized it's because my two windows weren't the same width, and if I resized one, I could get them to align the same.

I didn't see any unusual kerning issues in "unicoherent" on either one.

This lack of difference, though, may be because IE9 is now using Webkit to render content. Up until IE9, IE had their own homegrown rendering engine, which is one of the primary reasons why IE sucked monkeyballs...

...Paul (not looking for reward, just helping out a fellow webdev)
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Tom Usher
Wales
Conwy
Conwy
flag msg tools
mbmbmbmb
Seeing as there's so many great resources out there for learning this sort of thing, here's just a quick primer on how that example I put together works so you can associate it with any tutorials you find - forgive me if I'm being too basic for you:

We usually have two files, an HTML file, and a CSS file (jsfiddle.net is just a nice way to quickly share and show code like this).

The HTML file defines the structure of the page, nothing to do with how the page will 'look' is in this file. However, if all you gave to the user was this file, then they should still be able to navigate, find all the information they need and so on (even if it would be a bit ugly). Not only will this make it easier for you to maintain, but it's a good goal for accessibility reasons.

The CSS file is where we specify how things are 'styled', how they look, and to some degree, where they go on the page. We use the CSS language for this which essentially consists of a bunch of 'properties' which can be applied to any element in your HTML file.

Going back to the HTML file; you'll notice we have a bunch of HTML div tags - these 'divisions' are a basic way of wrapping up individual elements on your page so that we can refer to them later on.

Each tag has attributes (the bits after the 'div' and before the > ) - the attributes I'm using here are 'id' and 'class'. These are attributes we can use to refer to this element in our CSS file. The 'id' usually refers to a single element on a page, whereas a 'class' is often used to indicate that a style can be reused on many elements of a page.

In our CSS file, we have a syntax which can be basically outlined as:

selector {
property: value;
}

Where 'selector' is a simple bit of code that refers to an element on the page, 'property' is something about the style of that element we want to change, and the 'value' is what we want to change it to.

For your selector, I'm using 3 basic types;
'body' - you'll notice this selector has no dots or # before it - this means, 'select all HTML body tags' - so anything within these brackets will apply to that 'body' tag that wraps everything in our HTML, and everything inside it.
'#unicoherent' - this one's a bit different, it starts with a # which means 'select the element with the ID attribute of unicoherent'. Notice that one of our 'divs' in the HTML has id='unicoherent' - so this CSS is going to apply to that element.
'.vertical' - I bet you can guess this one. The preceding '.' means 'select every element with the class attribute of vertical'.

So what do these properties I've assigned to these elements do?
Well to start with, the most important thing to know about how this particular layout works is the difference between 'absolute' and 'relative' positioning.

If an element is positioned statically (the default setting) or relatively (been given the position: relative; property in its CSS), then it 'flows' with the rest of the page - it'll sit comfortably after the previous element.
If an element is positioned absolutely, it'll sit wherever you tell it with the top, left, right and bottom properties in relation to whatever relatively positioned element it sits inside. Now that's a pretty complicated concept which is probably explained much more eloquently elsewhere, so I'd suggest you go and read up on that.

For this layout however; we have a #word-map div, which is positioned relatively. This means that all those other word divs inside it are now 'anchored' to this div. We can then tell those words that they're positioned absolutely in relation to our word-map. So 'unicoherent' is 130 pixels away from the top of word-map, and 30 pixels away from the left.

The last thing is our 'vertical' class. We could just add the properties here in to the #providence-city definition if we wanted to, but seeing as we're likely to have a lot of elements on the page that could be 'vertical', then it makes sense to reuse the same bit of CSS.

There's only really one property in this vertical class - 'transform' - this does weird things like skewing or rotating elements. We're choosing to rotate everything with the vertical class 90 degrees here.
The strange looking properties starting with -webkit-, -moz-, -o- and -ms- are 'vendor prefixes'. These are used when a property (transform in this case) hasn't quite been standardised yet - so we have different browsers implementing them a little bit differently.

Unfortunately only IE9 and later (with the -ms- prefix) supports the 'transform' property. So we usually have to work around this in some way. In this case, IE provides a somewhat ugly proprietary way of getting rotation done which comes in the form of the 'filter' property. Take a look at this page for an example of that. Another thing we can do is use a 'polyfill' (something that fills in a gap in a browsers' functionality) - something like this one for 'transform'. This would just add the 'filter' stuff anyway, but it's a bit more convenient.

Regarding your suggestion that things might look different if font sizes differ across browsers. Yes, this is potentially an issue - some browser/OS combinations will indeed render fonts a bit differently. If you set a font like 'Times New Roman', 'Georgia', or use something from TypeKit/Google Web Fonts, you're unlikely to see any major problems, and if you do, now your site is a lot more flexible, you can tweak your design to work in these browsers without much extra work. You'll also come to accept that designs will differ a little across browsers, so as long as your site is no longer usable, a few pixels off here and there aren't usually a big deal.

Have fun!
4 
 Thumb up
1.00
 tip
 Hide
  • [+] Dice rolls
Mike Fox
United States
Fort Worth
Texas
flag msg tools
mbmbmbmbmb
IE sucks because hackers and such have learned to feast on its users. Put otherwise, IE sucks because of its vulnerability. 'Nuff said.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Dustin Fertilla
United States
Pennsylvania
flag msg tools
mbmbmbmbmb
IE sucks because it was invented by Al Gore.
5 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
that Matt
United States
Toledo
Ohio
flag msg tools
I'm a quitter. I come from a long line of quitters. It's amazing I'm here at all.
badge
I can feel bits of my brain falling away like wet cake.
mbmb
Hey, I got the alignment problem to pop up!

Using IE8, I can get the problem (particularly that n and t gap) to show up by zooming in or out. Most of the zoom levels that aren't 100% cause the misalignment.

That also explains why you might have found more than one person with the problem. Your mother/friend might have adjusted their browsers to a different default font size, or a different default zoom level (these might be affected by Windows accessibility options... I don't really know).

You might have a similar setting, or you might have inadvertently changed the zoom level on your IE. It will remember that zoom level every time you restart.
6 
 Thumb up
3.14
 tip
 Hide
  • [+] Dice rolls
Chuckhazard
United States
Fayetteville
Arkansas
flag msg tools
I'm FREEeeee..ee..e..e...
mbmbmbmb
How interesting. I'm sorry I don't have any more time to devote to this at the moment, but I have a quick fix for you. I discovered that this problem goes away when the table has borders.

Add this CSS:

#table1 td {
border: 1px solid transparent;
}


3 
 Thumb up
2.71
 tip
 Hide
  • [+] Dice rolls
1 , 2  Next »   | 
Front Page | Welcome | Contact | Privacy Policy | Terms of Service | Advertise | Support BGG | Feeds RSS
Geekdo, BoardGameGeek, the Geekdo logo, and the BoardGameGeek logo are trademarks of BoardGameGeek, LLC.