Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE Compatibility Issues

    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!

    page example:
    Code:
    <!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
    Code:
    @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;
    }

  • #2
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts
    Mate, I can't really help you without knowing a url to link the images to. Otherwise there is nothing to display.

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by Exorcist464 View Post
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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:

    Code:
    /* 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:
    Code:
    #indexContainer {
    margin: 0 auto;
    width:900px;
    }
    Gary

  • Users who have thanked garydarling for this post:

    butlins (10-05-2007)

  • #6
    New Coder
    Join Date
    Sep 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 and what about the image URLs? how can i pre-load all those images when they first enter the site?

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Code:
    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.

  • #8
    New Coder
    Join Date
    Sep 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •