Problem viewing page in IE6

wizkid · Jan 16, 2009

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:

<?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 · Jan 16, 2009

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

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0
http://jigsaw.w3.org/css-validator/...rofile=css21&usermedium=all&warning=1&lang=en

Anna · Jan 16, 2009

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 · Jan 16, 2009

VPmase said:
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/...rofile=css21&usermedium=all&warning=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 · Jan 16, 2009

LadyAnna said:
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 · Jan 16, 2009

LadyAnna said:
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 · Jan 16, 2009

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 · Jan 16, 2009

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 · Jan 16, 2009

Use dreamweaver, Its spots browser compatibilitys,

wizkid · Jan 17, 2009

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;}

woiwky · Jan 17, 2009

Using the html/css files as they were before you updated them, I managed to fix the problem in IE by removing these parts:

margin:0 25%; - in #main_content

margin: 0 -50%; - in #head

margin-left: -50%;
margin-right: -50%; - in #main_menu

margin-left: -230px;
margin-right: -230px; - in #event_menu

margin-left:-50%;
margin-right:-50%; - in #home

Problem viewing page in IE6

wizkid

New Member

VPmase

New Member

Anna

I am just me

wizkid

New Member

VPmase

New Member

wizkid

New Member

Anna

I am just me

vol7ron

New Member

ghotel

Guest

wizkid

New Member

woiwky

New Member

Free Web Hosting

Our Community

Legal