creating a IE compatible website...

[Sean7512]

I am getting very frustrated right now. I am working on updating our hockey team's website, but I am having trouble with IE (Windows version, of course) rendering it correctly. Firefox and Safari handle it just fine. I am coding everything by hand in HTML.

www.svchockey.com

That is the site in question, can anyone please help me out just a little bit? I know that I'm using tables and an iframe, but I am not advanced enough to move to all CSS (I am using CSS for fonts, etc). Before someone says how bad it is, just look at what the old version was, which someone else was doing

http://svchockey.com/old index.html

Thanks in advance!

 

[dreamchrisdream]

Haha, you're right, the new version is wayyy better than the old version. I say screw IE. Put a tab somewhere on the site saying, "Works best in Firefox or Safari" Maybe get some switchers.

 

[Rodimus Prime]

sadly until you get the new site working in IE the old site is a better more useful site even as crappy as it is.

It sucks but it is a numbers game and IE is a very large part of the the market share and the people who will visit the site.

Also couldn't you just change the text to black and the back ground to white. It would look better on Firefox because right now it looks off with that huge white strip down on the right side of the window.

You need to have the top bar with the picture going clear across the window.

Also I would recommend optimizing the for a screen size of 1280x1024 since that is I believe the most common screen resolution.

 

[Sean7512]

Also couldn't you just change the text to black and the back ground to white. It would look better on Firefox because right now it looks off with that huge white strip down on the right side of the window.

Huge white strip? What are you talking about?

And, I love the idea of forcing people to use FireFox or Safari Only in a dream.....

 

[Rodimus Prime]

I did some more checking on the site and if you hit any of the links at the top (like stats ect) you can read them in IE but you can not read any of the information in Firefox or Safari.
I hate to say it but Windows IE is the best browser right now. The site near useless for the other browsers.

Just go to black text on a whit background and you should be fine.

 

[Sean7512]

I did some more checking on the site and if you hit any of the links at the top (like stats ect) you can read them in IE but you can not read any of the information in Firefox or Safari.
I hate to say it but Windows IE is the best browser right now. The site near useless for the other browsers.

Just go to black text on a whit background and you should be fine.

I am aware of that, haha. I have not linked the CSS for the other pages yet, as I'd rather fix the rendering problem before I start linking my CSS to all the pages.

 

[Rodimus Prime]

Huge white strip? What are you talking about?

And, I love the idea of forcing people to use FireFox or Safari Only in a dream.....

Here I posted a shot of the window in windows. It looks the same in Safari. It is also covering an example of the problem on any page but the home page.

 

[Rodimus Prime]

I am aware of that, haha. I have not linked the CSS for the other pages yet, as I'd rather fix the rendering problem before I start linking my CSS to all the pages.

Like I said change the text. It may not look as pretty off the bat but it would give you a working site that is a huge improvement over the old.

Then make a test site to work on it until you get it fixed then upload the new one when it is up and working.♠

 

[Sean7512]

Like I said change the text. It may not look as pretty off the bat but it would give you a working site that is a huge improvement over the old.

Then make a test site to work on it until you get it fixed then upload the new one when it is up and working.♠

Hmm...you think I should go white background with black text for all the pages? The reason I am going with the black background, is because for all the latest news on the homepage, I was going to put the titles in yellow font. And yellow does not show up on white, obviously. If I go white background, I can make titles green? What do you guys think?

I am also adding RSS feeds once its all set up and done, not that RSS feeds are relevant to this conversation.

 

[Sean7512]

I have changed the site around, can anyone using Windows get a screenshot and please post it for me?

Thanks a lot!

 

[Rodimus Prime]

I have changed the site around, can anyone using Windows get a screenshot and please post it for me?

Thanks a lot!

Ask and you shall receive. Both screen shots I have posted are off XP SP2. One is Firefox and the one in this post is on IE7.

 

[Sean7512]

Ask and you shall receive. Both screen shots I have posted are off XP SP2. One is Firefox and the one in this post is on IE7.

Can you clear your cache and reload that site? It has been updated, and that is definitely the old version...

I'm sorry for being a pain, I really appreciate all of your input!

 

[dcv]

Here's a screenshot from IE7 on my Windows pc at work

The whole site is huge; I've got a 19" screen here and still scrolling - even the iframe is too big and needs to be scrolled in both directions.

 

[PowerFullMac]

I consider it a feature it dosent work with IE!

 

[jng]

Only inexperienced people can't design for IE.

This thread also belongs in the web forum...

 

[Sean7512]

Here's a screenshot from IE7 on my Windows pc at work

The whole site is huge; I've got a 19" screen here and still scrolling - even the iframe is too big and needs to be scrolled in both directions.

Thanks for the screenshot! I can't believe how big it is in IE!! In Safari on a 17" monitor, there isn't much to scroll at all. Heck, even on my MacBook there is not much scrolling. There is definitely no scrolling in the iFrame on either.

Yeah, I am very inexperienced with web development. I am a computer programmer major, but I have MUCH better skills doing other computer languages (C++, C, Assembler, Java, C#, etc...) That is why I am asking for a little help

Thanks though for everyone who has helped thus far!

 

[dcv]

Umm... okay I'm now looking at it in Firefox on my MBP... and it still looks huge and scrolling every which way.

Why is there some other kind of banner (see attachment) on the right hand side? It's causing the entire page to scroll horizontally and there is a vast expanse of white space beneath it.




I think the site is just too big overall. It's for a college team, right? So I'm guessing a large proportion of your audience will be [small] portable laptop users. That site's not gonna look good on a small screen. On my 15" widescreen MBP I'm having to make my browser window a fair bit wider than normal to view your site properly. The banner is also taking up around 40% of the viewport height (excluding all the browser chrome).

Also - and I guess it's probably just work in progress but - the Stats, Recruitment & History pages seem to be displaying another banner (possibly the one from the old site?)


Make the banner smaller (width and height), maybe take the font size down a point or two and your site will look heaps better.

 

[Eraserhead]

General comment, the links at the top don't highlight which page is active, take a look at my homepage which does this, and is better in that regard.

 

[Sean7512]

Umm... okay I'm now looking at it in Firefox on my MBP... and it still looks huge and scrolling every which way.

Why is there some other kind of banner (see attachment) on the right hand side? It's causing the entire page to scroll horizontally and there is a vast expanse of white space beneath it.




I think the site is just too big overall. It's for a college team, right? So I'm guessing a large proportion of your audience will be [small] portable laptop users. That site's not gonna look good on a small screen. On my 15" widescreen MBP I'm having to make my browser window a fair bit wider than normal to view your site properly. The banner is also taking up around 40% of the viewport height (excluding all the browser chrome).

Also - and I guess it's probably just work in progress but - the Stats, Recruitment & History pages seem to be displaying another banner (possibly the one from the old site?)


Make the banner smaller (width and height), maybe take the font size down a point or two and your site will look heaps better.

Yeah. in my quest to fix the IE problem, I have temporarily screwed up the FireFox rendering.

I like your suggestion, and I will take it into consideration. I think I have come to a solution...I just don't know if I have the time to do it today or not

 

[Eraserhead]

Yeah. in my quest to fix the IE problem, I have temporarily screwed up the FireFox rendering.

You should use if/else blocks to seperate between your IE code and other code. (so you don't change your "other" code)

 

[Sean7512]

You should use if/else blocks to seperate between your IE code and other code. (so you don't change your "other" code)

Ok, I feel really stupid asking this especially since I am a computer science major (but, I never really did web development), but there is if/else in HTML??? I never knew that! Ok, but whats the condition, obviously IE or other...but how do I determine that?

This can help me immensely!! thanks soo much!!

Edit...if I put this into my code, will it work correctly?

<script language="JavaScript">
if(navigator.appName=="Microsoft Internet Explorer")
put IE code here
else
put other code here
</script>

 

[Eraserhead]

Well its more like:

<script type="text/javascript">
var ua=navigator.userAgent;
if(ua.indexOf('WebKit')==-1 && ua.indexOf('Gecko')==-1  && ua.indexOf('Opera')==-1){
//IE Code here
}else{
//Non-IE Code here
}
</script>

And you can use document.write('<<the html>>'); to write HTML

 

[Sean7512]

WOOOOHOOOOO, after an hour or two at my sister's house (she was a windows comp), I am pleased to say that it correctly renders in IE7 I just needed a way to quickly check it all the time, which I had no way of doing before as we only have Macs in the house.

The only problem now is soo small that I don't care. Between the top header and the nav bar, there is a thin white strip on IE...but oh well.

I am working on a new header picture to make is not as big height wise, which will lead to less scrolling.

Thanks to everyone who has helped!

Can someone confirm that it works in IE6 as well? You may have to refresh the site/clear your cache a few times first.