Well, we’ve had the technological equivalent of a hurricane over at http://theforceteam.com. After Volte–our head coder/design whiz–wrote some cool CSS stuff to allow each post and paragraph to be displayed as a separate boxy-looking thing (I’m not sure how he did it, how it works, or how to describe it, and unfortunately he is away), the site looked great. On my Mac. In Safari and Camino.
Unfortunately, the site seems to be falling apart in IE on both Macs and Windows.
If anyone could
A) Let me know if the page looks screwy to them (and, if so, what browser and platform you are using to view it)
B ) Get some sort of idea as to what is going wrong, and how I might fix it
C ) Have brief mercy on our team if you’re going to Manchvegas and are scoring different sites.
It would be much appreciated.
–Petey
p.s. I’ve attached some screenshots. The first image is how the page appears on my Mac using Safari (correct), and the second is how the page displays on my mac using IE (screwed up).
Why in the world would anyone use IE for Mac, anyways? hugs Safari
Also, I tried looking through it but the code was a tad messy and made my brain hurt after a while For one, you had been using tables throughout the site then switched to div’s for those posts where a table would have actually been easier. There’s also stuff in the CSS (like, margin: -10px) that, I believe, was screwing up the title. You also have all those content div’s inside an <h6> which was a bit confusing since those normally just contain text. Also, IMO, the content text looks much better un-bolded (I think text looks loud and yelling if everything is bolded… it loses the ‘header’ effect)
Ok. I messed around for a few minutes and did a little editing. This looks good in both Safari and IE5.2mac:
<!-- div for each content block -->
<div style="padding: 10px">
<div style="background-color:#696969; border: solid 1px #000; border-bottom: 0px; padding: 5px; font-weight:bold;">Welcome FIRST Newbies!</div>
<div style="background-color:#80808; padding: 5px; border: solid 1px #000; font-weight:bold;">
<p>Welcome to the homepage for Team 1073, or "Team Force". New to FIRST? Then check out our <a href="firstnewbies.php">quick introductory page</a> explaining FIRST and our place in the grand scheme of things. </p>
</div>
</div>
<!--end content block -->
you wouldn’t happen to be using the margin/padding CSS attributes, are you? some browsers seem to implement these strangely, some of them going by the distance from the edge of the page, and some going from the distance from the edge of the parent element.
Well, that isn’t quite what we had in mind, but that’s definitely a starting place. Thanks for the code advice. Did you say that it shows up fine in your IE? Because it doesn’t for me, on my Panther box, running IE 5.2.3
Meh. It looks so nice in Safari…and so uncool in IE…blargh.
Well, I only did the “Welcome FIRST Newbies” one, and it looks good in IE5.2.3 here (but the rest are fubar). It appears that it looks the same as the screenshot (except I made the title font bigger… but I don’t remember doing that Easily fixable, though) Hope it helps
Also, the browsers I find worthy enough to bother checking stuff on are in this order: IE 6.0, IE 5.5, Mozilla (latest build), Opera (latest), Safari, and Netscape 4 (for some reason, people still use this). I almost never bother checking it with IE5.2 Mac. It’s such an out-date, unfinished, and buggy browser, it isn’t worth my time. I don’t know of that many people that use it. Yeah, compatability rocks… but when (if) you conform to web standards and it STILL looks incorrect in a browser (IE5.2 mac cough), enough is enough. I get more hits from google than I do from IE5.2 on my site
Well, since we have been having some compatibility issues, along with other things, Volte and I have kinda redone the site at the last minute. Changed some colors and some widths. It is now more reflective of our “team identity”–that is, our blindingly orange team color.
Would still appreciate in knowing from any Winblows users out there how the site looks on their boxes.
Okay, i just cross referenced my HTML/CSS bible a little and the reason ( i think) for your problem is tag differences. make sure the source code states exactly wqhat everything is written in. IE doesnt always like to read DHTML and XHTML for some reason, not really sure why. I believe it has to do with the tag openings and closings…If worst coms to worst have your web designer write the CSS script on a windows using IE 6 as that is what most users scoring the website will be using. On a positive note the page looks fantastic in the newestversion of safari for 10.3!
Well, I asked the coder this, and he was of the opinion that it wouldn’t work that way.
Whatever. It’s 1:00 AM. I’m going to bed. Thanks for the feedback, all.
Everything is finished except for two things: The Press Page, which I will finish redoing tomorrow, and the Shoutbox, which Robin needs to finish coding before he puts it on every page tomorrow.
I usually solve such a problem by coding 2 style sheets. One for IE in Windows, and the other for everything else. Then just use javascript to display the correct stylesheet. This is probably your best chance at getting your site to work for the 90% of web users (who use IE)…
For one, you had been using tables throughout the site then switched to div’s for those posts where a table would have actually been easier. There’s also stuff in the CSS (like, margin: -10px) that, I believe, was screwing up the title. You also have all those content div’s inside an <h6> which was a bit confusing since those normally just contain text. 
Also, IMO, the content text looks much better un-bolded (I think text looks loud and yelling if everything is bolded… it loses the ‘header’ effect)
Easily fixable, though) Hope it helps 
