Problem viewing page in IE6

**wizkid** · 01-16-2009 07:10 AM

i am making this website
www.phoenix-dce.com

tha page displays correctly on firefox/chrome but goes haywire on IE6

Please help me debug this thing(its really urgent)

HTML Code:

<?php
session_start();
?>
<!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=iso-8859-1" />
<title>Sponsors - Phoenix '09</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="stylesheet" type="text/css" href="menu.css" />
<link rel="stylesheet" type="text/css" href="home.css" />
<link rel="stylesheet" type="text/css" href="event_menu.css" />
<link rel="stylesheet" type="text/css" href="head.css" />
<link rel="stylesheet" type="text/css" href="left.css" />



</head>

<body>
<div id="container">
<div id="main_content">
    <div id="head"></div>
    <div id="main_menu"></div>

   <div id="event_menu">
      <div id="event_menu_container">
         <script language="JavaScript" src="event_menu.js">/script>
       </div>
   </div>
<div id="left">
  <script language="JavaScript" src="login.js"></script>
                <div id="msg"></div>
                <div id="login_form"></div>
                <div id= "user_details"></div>
                <div id="register"> </div>
                
  </div>
  <div id="right">
    <div id="update">
    </div>
  </div>
  <div id="content">
   For enquireis and suggestions contact:
</div>


   <div id="clearfooter"></div>
</div>

<div id="footer">
   <?php include_once('footer.php');?>
</div>

</div>

</body>
</html>

Code:

//layout.css
html 
{
width:100%; 
height:100%;
}
*html {text-align:center}
*html #container {text-align:left}
body
{
width:100%; 
height:100%;
background:  #000000 url(bg2.jpg) center repeat-y;
color: #FFFFFF;

}

#container
{
position:relative;

width: 920px;
margin-left:auto;
margin-right:auto;
/*background:   #CCCCCC  ;*/


}
#main_content
{
position:relative;

margin:0 25%;
margin-bottom:-100px;
/*border: #CCCCFF  thin solid;*/
}
#head
{
position:relative;
top:0;
margin: 0 -230px;
height:200px;
background:    url(logoFinal.jpg) no-repeat center;
z-index:6;
}
#main_menu
{

position:relative;
/*
margin-left: -50%;
margin-right: -50%;
*/
margin-left: -230px;
margin-right: -230px;

height:70px;
/*background: #CCFFCC;*/
z-index:6;
}
#event_menu
{

position:relative;
/*margin:0 -50% 0 -50%;*/
margin-left: -230px;
margin-right: -230px;

height:60px;
border-bottom:#666666 5px ridge;
/*background: url(line2.jpg) center bottom no-repeat;*/
z-index:6;
}
#left
{
position: relative;
margin-left: -230px;
float:left;
min-width:200px;
width:230px;
/*background: #FFFFCC;*/
z-index:6;

}
#content
{

padding-top:30px;

/*background: url(contentbg.jpg) repeat-y center;*/
z-index:7;
overflow:visible;
}
#right
{
position:relative;
margin-right: -230px;
float:right;
min-width:200px;
width:50%;
/*background: #99CCFF;*/
z-index:5;
}
#clearfooter
{clear:both;height:100px;}
#footer
{
position: relative;
clear:both;
width:915px;
height: 90px;
margin-left:auto;
margin-right:auto;

border-top: #666666 5px ridge;
z-index:7;
font-weight:bold;
}

i am posting the basic layout(html ans css) for all pages (except for home page)

**VPmase** · 01-16-2009 08:53 AM

You should make sure you CSS is valid along with your HTML.

http://validator.w3.org/check?uri=ht...Inline&group=0
http://jigsaw.w3.org/css-validator/v...ning=1&lang=en

**Anna** · 01-16-2009 09:00 AM

IE handles div and their borders/margin/padding a bit diffrently then firefox/chrome does.

My guess is you need to include special stylesheets for that (you only need to put in the values you need to change) The include must come after the main stylesheets in the code


that would make all IE browsers include the ie_styles.css in addition to the others listed, if you have div {width:500px;color:blue;} in the layout.css, you might need to do it as div{width:550px;} in the ie_styles.css. then the color value would be picked (inherited) from the layout.css, but the width would be overridden by the value in ie_styles.css

Now this is just an example, as I don't have IE6 on this computer I can't see where the issue is, but commonly problems are due to the fact they calculate the actual width of divs for instance different (one includes the border width in the value specified and that make the actual width smaller, the for other browser that adds border width to the value you enter)

**wizkid** · 01-16-2009 09:23 AM

Originally Posted by VPmase

You should make sure you CSS is valid along with your HTML.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.phoenix-dce.com%2F&charset=(detect+automatically)&doctype= Inline&group=0
http://jigsaw.w3.org/css-validator/v...ning=1&lang=en

the css validates now and as far as the html is concerned the errors correspond to lack of type attribute in javascript(sumthing which cannot b responsible for d improper display)

**VPmase** · 01-16-2009 09:23 AM

Originally Posted by LadyAnna

IE handles div and their borders/margin/padding a bit diffrently then firefox/chrome does.

My guess is you need to include special stylesheets for that (you only need to put in the values you need to change) The include must come after the main stylesheets in the code


that would make all IE browsers include the ie_styles.css in addition to the others listed, if you have div {width:500px;color:blue;} in the layout.css, you might need to do it as div{width:550px;} in the ie_styles.css. then the color value would be picked (inherited) from the layout.css, but the width would be overridden by the value in ie_styles.css

Now this is just an example, as I don't have IE6 on this computer I can't see where the issue is, but commonly problems are due to the fact they calculate the actual width of divs for instance different (one includes the border width in the value specified and that make the actual width smaller, the for other browser that adds border width to the value you enter)

There are browser compatabilty checkers throughout the internet. Searched google and checked the first few I saw.
Best one (IMO): http://browsershots.org/http://www.phoenix-dce.com/
Still loading IE though...

**wizkid** · 01-16-2009 09:35 AM

Originally Posted by LadyAnna

IE handles div and their borders/margin/padding a bit diffrently then firefox/chrome does.

My guess is you need to include special stylesheets for that (you only need to put in the values you need to change) The include must come after the main stylesheets in the code


that would make all IE browsers include the ie_styles.css in addition to the others listed, if you have div {width:500px;color:blue;} in the layout.css, you might need to do it as div{width:550px;} in the ie_styles.css. then the color value would be picked (inherited) from the layout.css, but the width would be overridden by the value in ie_styles.css

Now this is just an example, as I don't have IE6 on this computer I can't see where the issue is, but commonly problems are due to the fact they calculate the actual width of divs for instance different (one includes the border width in the value specified and that make the actual width smaller, the for other browser that adds border width to the value you enter)

is this conditional css supported by all browsers??

**Anna** · 01-16-2009 10:04 AM

that condition is IE specific, all others ignores it  are notations for comment in html, so for other browsers it looks like a comment they shouldn't care about

**vol7ron** · 01-16-2009 08:10 PM

you should realize that IE does not follow W3C standards for centering.

The proper way to use CSS for W3C Standard Compliant browsers is:
margin-left:auto;
margin-right:auto; (margin:0 auto; can replace the left/right commands)
width:<some width>;

however in IE, the parent element must be:
text-align:center;

that means you set it to whatever the DIV is inside (the parent).

So why does IE not follow W3C Standards? The truth is everyone gives MS a hard time about it, but W3C is not the only standards group out there. Although they have recently become the biggest, they are still not the only. For this matter, it is unfair to hold IE responsible for not obeying W3C just because some other browsers do.

Personally, I wish that IE/FF/Opera/Google would all form their own standards organization, whether they bring W3C in or not, so that everyone is all on the same page, especially with alpha filtering and what not (the wave of the next generation web browsers).

**ghotel** · 01-16-2009 09:35 PM

Use dreamweaver, Its spots browser compatibilitys,

**wizkid** · 01-17-2009 04:05 AM

i somehow finally managed to reduce my problem.

Now the home page doesn't work in IE6
actually i have paced a background image in the content div and absolutely positioned a links below the text in the image. on hover the background image for a links chanes to give a glow effect.
there is no problem if i use any other browser

Code:

//home.css
/* CSS Document */
#home
{
position:relative;
margin-left:-50%;
margin-right:-50%;
z-index: 6;
}


 #jugaad
{
position:relative;
top:0;
height:400px ;
width:900px;
background:url(home_text.png);
z-index:10;
font-weight:bold; text-transform:uppercase; text-align:center;
}

#jugaad a
{
border:none;

}
#jugaad a:link,#jugaad a:visited, #jugaad a:hover,#jugaad a:active
{border:none}

/*
#gmap {display:block; width:900px; height:400px; background:url(jugaad.png); position:relative; margin:0 auto 2em auto;}
#gmap a {color:#000; font-family:arial, sans-serif; font-size:1.2em; font-weight:bold; text-transform:uppercase; text-align:center;}

a#title2, a#title2:visited {display:block; width:900px; height:0; padding-top:400px; position:absolute; left:0; top:0; cursor:default; text-decoration:none;}
* html a#title2 {height:260px; he\ight:0;}
#gmap a#title2:hover {background:transparent url(../img/group_col.gif) no-repeat 0 0; overflow:visible; color:#c00;}
*/

a#index {display:block; width:190px; height:65px;  overflow:hidden; position:absolute; left:160px; top:30px; }
* html a#index {height:72px; he\ight:0;}
a#index:hover {background:transparent  url(home_text_hover.gif) no-repeat ;
background-position:-160px -30px; overflow:visible;}

a#events {display:block;width:190px; height:65px;  overflow:hidden; position:absolute; left:550px; top:30px;}
* html a#events {height:72px; he\ight:0;}
a#events:hover {background:transparent  url(home_text_hover.gif) no-repeat ;
background-position:-550px -30px; overflow:visible;}

a#hospitality {display:block; width:135px; height:65px;  overflow:hidden; position:absolute; left:70px; top:125px;}
* html a#hospitality {height:65px; he\ight:0;}
a#hospitality:hover {background:transparent  url(home_text_hover.gif) no-repeat ;
background-position:-70px -125px; overflow:visible;}

a#contactus {display:block; width:135px; height:65px;  overflow:hidden; position:absolute; left:695px; top:125px;}
* html a#contactus {height:65px; he\ight:0;}
a#contactus:hover {background:transparent  url(home_text_hover.gif) no-repeat ;
background-position:-695px -125px; overflow:visible;}


a#gallery {display:block; width:115px; height:65px;  overflow:hidden; position:absolute; left:25px; top:235px;}
* html a#gallery {height:60px; he\ight:0;}
a#gallery:hover {background:transparent  url(home_text_hover.gif) no-repeat ;
background-position:-25px -235px; overflow:visible;}

a#sponsors {display:block; width:115px; height:65px;  overflow:hidden; position:absolute; left:760px; top:235px;}
* html a#sponsors {height:60px; he\ight:0;}
a#sponsors:hover {background:transparent  url(home_text_hover.gif) no-repeat ;
background-position:-760px -235px; overflow:visible;}


a#phoenix08{display:block; width:210px; height:65px;  overflow:hidden; position:absolute; left:655px; top:335px;}
* html a#phoenix08{height:65px; he\ight:0;}
a#phoenix08:hover {background:transparent  url(home_text_hover.gif) no-repeat ;
background-position:-655px -335px; overflow:visible;}

a#reachdce {display:block; width:210px; height:65px;  overflow:hidden; position:absolute; left:35px; top:335px;}
* html a#reachdce {height:65px; he\ight:0;}
a#reachdce:hover {background:transparent  url(home_text_hover.gif) no-repeat ;
background-position:-35px -335px; overflow:visible;}

Thread: Problem viewing page in IE6

LinkBack

Thread Tools

Display

Problem viewing page in IE6

Re: Problem viewing page in IE6

Re: Problem viewing page in IE6

Re: Problem viewing page in IE6

Re: Problem viewing page in IE6

Re: Problem viewing page in IE6

Re: Problem viewing page in IE6

Re: Problem viewing page in IE6

Re: Problem viewing page in IE6

Re: Problem viewing page in IE6

Similar Threads

Blank page problem

Main Page Problem

'Problem loading page' Error

blank page problem?

Do frames cause a problem?

Posting Permissions