IE Compatibility Issues

Exorcist464

10-04-2007, 11:24 PM

So i made a website that we tested an viewed mainly with Mozilla. It looks great when viewed in firefox but when you load it on IE it goes to crap. I don't know any compatibility funcs to save my life, so any help would be great! :thumbsup:

page example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Barbara Shannon Consulting</title>

<script language="JavaScript">

Hmove=200;
function imageJump(objID)
{
var obj=document.getElementById(objID);
Hmove-=2;
obj.style.left=Hmove + 'px';

if(Hmove>100)
window.setTimeout("imageJump('" +obj.id+ "');", 0);
}

</script>

</head>

<link href="style/style.css" rel="stylesheet" type="text/css"/>

<body>
<div id="indexContainer">
<div id="navBar">

<a id="consultingSolutions" href="pages/ConsultingSolutions_ProgramManagement.html" title="Consulting Solutions"><span></span></a>
<a id="pastResults" href="pages/PastResults.html" title="Results"><span></span></a>
<a id="insight" href="pages/Insight.html" title="Insight"><span></span></a>
<a id="clientsSay" href="pages/WhatClientsSay.html" title="What Clients Say"><span></span></a>

<a id="consultingSolutionsA" href="#" title="Consulting Solutions Arrow"><span></span></a>
<a id="pastResultsA" href="#" title="Results Arrow"><span></span></a>
<a id="insightA" href="#" title="Insight Arrow"><span></span></a>
<a id="clientsSayA" href="#" title="What Clients Say Arrow"><span></span></a>

<a id="home" href= "index.html" name="home" title="Home" id="home"><span></span></a>
<a id="contact" href="" title="Contact"><span></span></a>
<a id="about" href="pages/about.html" title="About"><span></span></a>

<a id="homeA" href="#." title="Home Arrow"><span></span></a>
<a id="contactA" href="#" title="Contact Arrow"><span></span></a>
<a id="aboutA" href="#" title="About Arrow"><span></span></a> </div>
</div>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */

html, body, form, fieldset {
margin: 0;
padding: 0;
background: #666666;
font: 95% Helvetica, Verdana, Arial, sans-serif; /* font: 100%/120% Helvetica, Verdana, Arial, sans-serif; */
text-align: center;
margin: auto;
background-image: url();
}
/*
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
margin: auto;
background-image: url();
}
*/
/*
#wrapper {
height: 1500px;
width: 1024px;
margin: auto;
}
*/
div#container { width:900px; }

html>body div#container {
position: relative;
width: 1024px;
background-image: url(../images/background_st_l.jpg);
height: 1600px;
margin: auto;
}

html>body div#indexContainer {
position: relative;
width: 1022px;
background-image: url(../images/index_background.jpg);
height: 770px;
margin: auto;
}
/*
#container {
width: 1024px;
text-align: left;
background-image: url(../images/background.jpg);
height: 1500px;
margin: auto;
}
*/
#navBar {
position: relative;
background-image: url(../images/barbara_shannon_header.png);
height: 130px;
width: 1015px;
margin: auto;
margin-top: 5px;
margin-left: -4.5px;
}

#bottomNavBar {
position: relative;
background-image: url(../images/bottom_nav_bar.png);
height: 64px;
width: 784px;
margin: auto;
margin-top: 20px;
margin-left: 215px;
}

#consultingSolutions {
position: absolute;
background-image: url(../images/consulting_solutions.png);
height: 17px;
width: 167px;
margin-top: 16px;
margin-left: -69px;
}

#pastResults {
position: absolute;
background-image: url(../images/past-results.png);
height: 17px;
width: 61px;
margin-top: 16px;
margin-left: 240px;
}

#insight {
position: absolute;
background-image: url(../images/insight.png);
height: 17px;
width: 54px;
margin-top: 26px;
margin-left: 142px;
}

#clientsSay {
position: absolute;
background-image: url(../images/what_clients_say.png);
height: 17px;
width: 132px;
margin-top: 26px;
margin-left: 347px;
}

#consultingSolutionsA {
position: absolute;
background-image: url(../images/large_arrow_up.png);
height: 17px;
width: 27px;
margin-top: 12px;
margin-left: -103px;
}

#pastResultsA {
position: absolute;
background-image: url(../images/large_arrow_up.png);
height: 17px;
width: 27px;
margin-top: 12px;
margin-left: 208px;
}

#insightA {
position: absolute;
background-image: url(../images/large_arrow_down.png);
height: 17px;
width: 27px;
margin-top: 28px;
margin-left: 110px;
}

#clientsSayA {
position: absolute;
background-image: url(../images/large_arrow_down.png);
height: 17px;
width: 27px;
margin-top: 28px;
margin-left: 313px;
}

#clientsSayA {
position: absolute;
background-image: url(../images/large_arrow_down.png);
height: 17px;
width: 27px;
margin-top: 28px;
margin-left: 313px;
}

#home {
position: absolute;
background-image: url(../images/home.png);
height: 18px;
width: 37px;
margin-top: 69px;
margin-left: -97px;
}

#contact {
position: absolute;
background-image: url(../images/contact.png);
height: 17px;
width: 49px;
margin-top: 69px;
margin-left: 48px;
}

#about {
position: absolute;
background-image: url(../images/about.png);
height: 18px;
width: 37px;
margin-top: 77px;
margin-left: -23px;
}

#homeA {
position: absolute;
background-image: url(../images/small_arrow_up.png);
height: 13px;
width: 21px;
margin-top: 70px;
margin-left: -122px;
}

#contactA {
position: absolute;
background-image: url(../images/small_arrow_up.png);
height: 13px;
width: 21px;
margin-top: 69px;
margin-left: 23px;
}

#aboutA {
position: absolute;
background-image: url(../images/small_arrow_down.png);
height: 13px;
width: 21px;
margin-top: 82px;
margin-left: -50px;
}

#csProjManageTab {
position: relative;
background-image: url(../images/consulting_solutions_program_management.png);
height: 1281px;
width: 792px;
margin-top: 70px;
margin-left: 210px;
}

#csChangeLeadershipTab {
position: relative;
background-image: url(../images/consulting_solutions_change_leadership.png);
height: 1281px;
width: 792px;
margin-top: 70px;
margin-left: 210px;
}

#csCommunicationTab {
position: relative;
background-image: url(../images/consulting_solutions_communication.png);
height: 1281px;
width: 792px;
margin-top: 70px;
margin-left: 210px;
}

#csExecutiveCoachingTab {
position: relative;
background-image: url(../images/consulting_solutions_executive_coaching.png);
height: 1281px;
width: 792px;
margin-top: 70px;
margin-left: 210px;
}

#consultingSolutionsTabImage {
position: absolute;
background-image: url(../images/consulting_solutions.png);
height: 17px;
width: 167px;
margin-top: 16px;
margin-left: 213px;
}

#textBox {
position: absolute;
height: 1130px;
width: 730px;
margin-top: 120px;
margin-left: 35px;
left: 0px;
}

#audioProjManage {
position: absolute;
background-image: url(../images/more.png);
height: 22px;
width: 53px;
left: 13px;
top: 323px;
}

#moreProjManage {
position: absolute;
background-image: url(../images/audio.png);
height: 54px;
width: 87px;
left: 622px;
top: 305px;
}

#audioCommunication {
position: absolute;
background-image: url(../images/more.png);
height: 22px;
width: 53px;
left: 13px;
top: 418px;
}

#moreCommunication {
position: absolute;
background-image: url(../images/audio.png);
height: 54px;
width: 87px;
left: 612px;
top: 397px;
}

#programManagementTabLink {
position: absolute;
height: 35px;
width: 111px;
margin-top: 12px;
margin-left: -350px;
left: 381px;
top: 48px;

}

#changeLeadershipTabLink {
position: absolute;
height: 30px;
width: 122px;
margin-top: 0px;
margin-left: 0px;
left: 184px;
top: 58px;
}

#communicationTabLink {
position: absolute;
height: 32px;
width: 135px;
margin-top: 0px;
margin-left: 0px;
left: 348px;
top: 58px;
}

#executiveCoachingTabLink {
position: absolute;
height: 34px;
width: 141px;
margin-top: 0px;
margin-left: 0px;
left: 512px;
top: 58px;
}

#emptyFolderTab {
position: relative;
background-image: url(../images/back_folder_tab.png);
height: 1281px;
width: 791px;
margin-top: 70px;
margin-left: 210px;
}

Blue_Jeans

10-05-2007, 06:16 AM

Mate, I can't really help you without knowing a url to link the images to. Otherwise there is nothing to display.

Exorcist464

10-05-2007, 06:36 AM

_Aerospace_Eng_

10-05-2007, 06:39 AM

do you know CSS? cuz im calling upon ID's that have a background-image component. Thats where the images are being called upon. Look at the # functions in my CSS file. Thats where they are being called from.

He understands that but having the url to the images will help in showing how the layout should look, so with that said post a link to your site. If you don't have a link yet then some how get the site online. Help us help you.

garydarling

10-05-2007, 07:04 AM

You could start by cleaning up your CSS file. Get rid of the repetitive garbage in there so it is easier to read and comprehend:

/* CSS Document */

html, body, form, fieldset {
margin: 0;
padding: 0;
background: #666666;
font: 95% Helvetica, Verdana, Arial, sans-serif; /* font: 100%/120% Helvetica, Verdana, Arial, sans-serif; */
text-align: center;
margin: auto;
background-image: url();
}
/*
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
margin: auto;
background-image: url();
}
*/
/*
#wrapper {
height: 1500px;
width: 1024px;
margin: auto;
}
*/
div#container { width:900px; } /*You have no div called #container (unless it's on another page), so this is useless */

html>body div#container { /*So is this*/
position: relative;
width: 1024px;
background-image: url(../images/background_st_l.jpg);
height: 1600px;
margin: auto;
}

html>body div#indexContainer { /*Divs are unique and can be styled directly, so the html>body div is pointless*/
position: relative; /*and it is a bandwidth hog. Avoid it, use classes & ID's*/
width: 1022px;
background-image: url(../images/index_background.jpg);
height: 770px;
margin: auto;
}
/*
#container {
width: 1024px;
text-align: left;
background-image: url(../images/background.jpg);
height: 1500px;
margin: auto;
}
*/
#navBar {
position: relative;
background-image: url(../images/barbara_shannon_header.png);
height: 130px;
width: 1015px;
margin: auto;
margin-top: 5px;
margin-left: -4.5px;
}

#bottomNavBar {
position: relative;
background-image: url(../images/bottom_nav_bar.png);
height: 64px;
width: 784px;
margin: auto;
margin-top: 20px;
margin-left: 215px;
}

#consultingSolutions {
position: absolute;
background-image: url(../images/consulting_solutions.png);
height: 17px;
width: 167px;
margin-top: 16px;
margin-left: -69px;
}

#pastResults {
position: absolute;
background-image: url(../images/past-results.png);
height: 17px;
width: 61px;
margin-top: 16px;
margin-left: 240px;
}

#insight {
position: absolute;
background-image: url(../images/insight.png);
height: 17px;
width: 54px;
margin-top: 26px;
margin-left: 142px;
}

#clientsSay {
position: absolute;
background-image: url(../images/what_clients_say.png);
height: 17px;
width: 132px;
margin-top: 26px;
margin-left: 347px;
}

#consultingSolutionsA {
position: absolute;
background-image: url(../images/large_arrow_up.png);
height: 17px;
width: 27px;
margin-top: 12px;
margin-left: -103px;
}

#pastResultsA {
position: absolute;
background-image: url(../images/large_arrow_up.png);
height: 17px;
width: 27px;
margin-top: 12px;
margin-left: 208px;
}

#insightA {
position: absolute;
background-image: url(../images/large_arrow_down.png);
height: 17px;
width: 27px;
margin-top: 28px;
margin-left: 110px;
}

#clientsSayA {
position: absolute;
background-image: url(../images/large_arrow_down.png);
height: 17px;
width: 27px;
margin-top: 28px;
margin-left: 313px;
}

#clientsSayA {
position: absolute;
background-image: url(../images/large_arrow_down.png);
height: 17px;
width: 27px;
margin-top: 28px;
margin-left: 313px;
}

#home {
position: absolute;
background-image: url(../images/home.png);
height: 18px;
width: 37px;
margin-top: 69px;
margin-left: -97px;
}

#contact {
position: absolute;
background-image: url(../images/contact.png);
height: 17px;
width: 49px;
margin-top: 69px;
margin-left: 48px;
}

#about {
position: absolute;
background-image: url(../images/about.png);
height: 18px;
width: 37px;
margin-top: 77px;
margin-left: -23px;
}

#homeA {
position: absolute;
background-image: url(../images/small_arrow_up.png);
height: 13px;
width: 21px;
margin-top: 70px;
margin-left: -122px;
}

#contactA {
position: absolute;
background-image: url(../images/small_arrow_up.png);
height: 13px;
width: 21px;
margin-top: 69px;
margin-left: 23px;
}

#aboutA {
position: absolute;
background-image: url(../images/small_arrow_down.png);
height: 13px;
width: 21px;
margin-top: 82px;
margin-left: -50px;
}

#csProjManageTab {
position: relative;
background-image: url(../images/consulting_solutions_program_management.png);
height: 1281px;
width: 792px;
margin-top: 70px;
margin-left: 210px;
}

#csChangeLeadershipTab {
position: relative;
background-image: url(../images/consulting_solutions_change_leadership.png);
height: 1281px;
width: 792px;
margin-top: 70px;
margin-left: 210px;
}

#csCommunicationTab {
position: relative;
background-image: url(../images/consulting_solutions_communication.png);
height: 1281px;
width: 792px;
margin-top: 70px;
margin-left: 210px;
}

#csExecutiveCoachingTab {
position: relative;
background-image: url(../images/consulting_solutions_executive_coaching.png);
height: 1281px;
width: 792px;
margin-top: 70px;
margin-left: 210px;
}

#consultingSolutionsTabImage {
position: absolute;
background-image: url(../images/consulting_solutions.png);
height: 17px;
width: 167px;
margin-top: 16px;
margin-left: 213px;
}

#textBox {
position: absolute;
height: 1130px;
width: 730px;
margin-top: 120px;
margin-left: 35px;
left: 0px;
}

#audioProjManage {
position: absolute;
background-image: url(../images/more.png);
height: 22px;
width: 53px;
left: 13px;
top: 323px;
}

#moreProjManage {
position: absolute;
background-image: url(../images/audio.png);
height: 54px;
width: 87px;
left: 622px;
top: 305px;
}

#audioCommunication {
position: absolute;
background-image: url(../images/more.png);
height: 22px;
width: 53px;
left: 13px;
top: 418px;
}

#moreCommunication {
position: absolute;
background-image: url(../images/audio.png);
height: 54px;
width: 87px;
left: 612px;
top: 397px;
}

#programManagementTabLink {
position: absolute;
height: 35px;
width: 111px;
margin-top: 12px;
margin-left: -350px;
left: 381px;
top: 48px;

}

#changeLeadershipTabLink {
position: absolute;
height: 30px;
width: 122px;
margin-top: 0px;
margin-left: 0px;
left: 184px;
top: 58px;
}

#communicationTabLink {
position: absolute;
height: 32px;
width: 135px;
margin-top: 0px;
margin-left: 0px;
left: 348px;
top: 58px;
}

#executiveCoachingTabLink {
position: absolute;
height: 34px;
width: 141px;
margin-top: 0px;
margin-left: 0px;
left: 512px;
top: 58px;
}

#emptyFolderTab {
position: relative;
background-image: url(../images/back_folder_tab.png);
height: 1281px;
width: 791px;
margin-top: 70px;
margin-left: 210px;
}

It looks as though you are attempting to center your page, but your css doesn't do that properly. If you are, try this:
#indexContainer {
margin: 0 auto;
width:900px;
}

Gary

Exorcist464

10-05-2007, 08:11 PM

my website is up on http://www.geocities.com/justinbgood07/ i havnt uploaded the entire site yet, so only the first top link on the nav bar works. But you can get the general idea. I am very thankful that you guys are helping me out, I am going to clean that stuff up in my style file but I dont know if that will help make the website viewable on IE. Try looking at it on both viewers, you will see my problem then :p and what about the image URLs? how can i pre-load all those images when they first enter the site?

rmedek

10-06-2007, 02:36 AM

html>body div#indexContainer { /*Divs are unique and can be styled directly, so the html>body div is pointless*/
position: relative; /*and it is a bandwidth hog. Avoid it, use classes & ID's*/
width: 1022px;
background-image: url(../images/index_background.jpg);
height: 770px;
margin: auto;
}

…not to mention html>body isn't recognized in IE. That's why it's used as a method to send styles to non-IE browsers only. Try simplifying those rules (i.e., #indexContainer { position…})to see if things improve.

Exorcist464

10-06-2007, 09:23 PM

Ok. So i deleted those random containers, i dunno why i had em. and I fixed up my indexContainer. Everything lines up right but now I have a problem with the pictures. I am using PNG files, but the image loads on IE it no longer has the transparent see through qualities. Do PNG's rly not work for IE? or do i need to apply some transparency modification somewhere to make it IE friendly.

jlhaslip

10-06-2007, 11:18 PM

IE6 and earlier need a png javascript routine to perform properly.

I have a copy around here someplace... can't place it right now... PM me if you need a copy... pretty sure I can find it if push comes to shove...