...

View Full Version : 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">
<!-- large top nav bar words -->
<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>
<!-- large top nav bar arrows -->
<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>
<!-- small nav bar words -->
<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>
<!-- small nav bar arrows -->
<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
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.

_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...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum