[RESOLVED] differense between Ie 7 and Ie 6

rbblue8

Hey all,

Im having a rendering problem between Ie 6 and Ie7 and i hope that you all can help me figure this one out.

html is the same across the board which is as follows.

<?
//        _______
// ----- | CONF. |
//        &#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;
// add new browsers in lower case here, separated
// by spaces -  order is important: from left to
// right browser family becomes more precise
$browsers = "mozilla msie gecko firefox ";
$browsers.= "konqueror safari netscape navigator ";
$browsers.= "opera mosaic lynx amaya omniweb";

//        _______
// ----- |PROCESS|
//        &#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;
$browsers = split(" ", $browsers);

$nua = strToLower( $_SERVER['HTTP_USER_AGENT']);

$l = strlen($nua);
for ($i=0; $i<count($browsers); $i++){
  $browser = $browsers[$i];
  $n = stristr($nua, $browser);
  if(strlen($n)>0){
    $GLOBALS["ver"] = "";
    $GLOBALS["nav"] = $browser;
    $j=strpos($nua, $GLOBALS["nav"])+$n+strlen($GLOBALS["nav"])+1;
    for (; $j<=$l; $j++){
      $s = substr ($nua, $j, 1);
      if(is_numeric($GLOBALS["ver"].$s) )
      $GLOBALS["ver"] .= $s;
      else
      break;
    }
  }
}

//        _______
// ----- |  USE  |
//        &#65533;&#65533;&#65533;&#65533;&#65533;&#65533;&#65533;
//echo($GLOBALS["nav"] . " " . $GLOBALS["ver"] . "</pre>");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>- Host Our Web -</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<?php
//set style sheet

//if firefox
if($GLOBALS["nav"] == 'firefox')
	{
	echo '<link href="css/firefox.css" rel="stylesheet" type="text/css">';
	}

//if IE* 7/
if($GLOBALS["nav"] == 'msie' and $GLOBALS["ver"] == "7")
	{
	echo "displaying IE 7";
	echo '<link href="css/ie7.css" rel="stylesheet" type="text/css">';
	}

//if IE* 6/
if($GLOBALS["nav"] == 'msie' and $GLOBALS["ver"] == "6")
	{
	echo "displaying IE 6";
	echo '<link href="css/ie6.css" rel="stylesheet" type="text/css">';
	}
?>
</head>

<body>

<!--primary contain-->
<div id="contain_all">

<!--logo-->
<div id="logo">
<img src="pics/hostourweb.gif" alt="logo">
</div>
<!--end of logo-->

<!--nav bar-->
<div id="nav_bar">
<img src="pics/home_sel.gif" alt="home" >
<img src="pics/login_not.gif" alt="" >
<img src="pics/services_not.gif" alt="" >
<img src="pics/specials_not.gif" alt="" >
<img src="pics/support_not.gif" alt="" >
</div>
<!--end of nav bar-->
<div id="spacer">
		</div>

<div id="content">

	<div id="top_content">
	<img id="left_content_pic" src="pics/lft_top.gif" alt="">
	<img id="right_content_pic" src="pics/rt_top.gif" alt="">
		<div id="spacer">
		</div>			
	</div>
	<!--end of top_content-->



	<div id="lft_content">

		<div id="content_center">

			<div id="lft_text_contain">
				<div id="lft_text">
				<center>
				Linux Starter
				</center>
				</div>
				<!--end of div.lft_text-->
				<center style="font-size:13px; padding-top:5px; color:red;">More Linux Plans</center>
			</div>
			<!--end of div.lft_text_contain-->

			<div id="rt_text_contain">
				<div id="rt_text">
				<center>
				Domain Registration
				</center>
				</div>
				<!--end of div.rt_text-->
			<center style="font-size:13px; padding-top:5px; color:red;">More Domain prices</center>	
			</div>
			<!--end of div.rt_text_contain-->

			<div id="ctr_text_contain">
				<div id="ctr_text">
				<center>
				Windows Starter
				</center>
				</div>	
				<!--end of div.ctr_text-->
			<center style="font-size:13px; padding-top:5px; color:red;">More Windows Plans</center>		
			</div>
			<!--end of div.ctr_text_contain-->


	 	</div>
		<!--end of content_center-->

		<div id="spacer">
		</div>

	</div>
	<!--end of lft content-->






	<div id="spacer">
		</div>	


	<div id="btm_content">
	<img id="left_content_pic" src="pics/lft_btm.gif" alt="">
	<img id="right_content_pic" src="pics/rt_btm.gif" alt="">
		<div id="spacer">
		</div>
	</div>
	<!--end of btm_content-->


</div>
<!--end of content-->

</div>
<!--end of primary contain-->

</body>



</html>

my css code for Ie 7

/* CSS Document */

body
	{
	background-color:black;
	text-align: center;
	}

#logo
	{
	text-align: left;	
	}

#contain_all
	{
	margin-left:auto;
	margin-right:auto;
	max-width:800px;
	min-width:800px;
	padding-top:20px;
	}
#logo
	{
	margin-left:0px;
	}

#nav_bar
	{
	padding-top:0px;
	padding-right:30px;	
	float:right;
	}

#content
	{
	margin-top:-7px;
	background-image:url(../pics/rt_side.gif);
	background-repeat:repeat-y;
	background-position:right;
	}

#top_content
	{	
	background-repeat:repeat-x;
	background-image:url(../pics/top_vert.gif);
	}

#left_content_pic
	{	
	float:left;
	clear:right;
	}

#right_content_pic
	{	
	float:right;
	}

#spacer
	{ 
	clear: both;
  	}

#spacer1
	{
	height:auto;
	}

#lft_content
	{
	text-align:left;
	color:white;
	background-image:url(../pics/lft_side.gif);
	background-position:left;
	background-repeat:repeat-y;
	}

#content_center
	{
	padding-top:10px;
	max-width:700px;
	min-width:700px;
	margin-left:auto;
	margin-right:auto;
	}

#lft_text_contain
	{
	float:left;
	color:white;
	clear:both;	
	width:200px;
	}

#lft_text
	{
	border:thin white solid;
	width:200px;
	}

#ctr_text_contain
	{
	margin-left:auto;
	margin-right:auto;
	color:white;
	width:200px;
	}

#ctr_text
	{
	border:thin white solid;
	width:200px;
	}

#rt_text_contain
	{
	float:right;
	color:white;
	}

#rt_text
	{
	border:thin white solid;
	width:200px;
	}

#btm_content
	{

background-repeat:repeat-x;
background-image:url(../pics/btm_vert.gif);

screen shot of Ie 7

css code for ie 6

/* CSS Document */

body
	{
	background-color:black;
	text-align: center;
	}

#logo
	{
	text-align: left;	
	}

#contain_all
	{
	margin-left:auto;
	margin-right:auto;
	max-width:800px;
	min-width:800px;
	padding-top:20px;
	}
#logo
	{
	margin-left:0px;
	}

#nav_bar
	{
	padding-top:0px;
	padding-right:30px;	
	float:right;
	}

#content
	{
	overflow:scroll;
	margin-top:-7px;
	background-image:url(../pics/rt_side.gif);
	background-repeat:repeat-y;
	background-position:right;
	}

#top_content
	{
	background-repeat:repeat-x;
	background-image:url(../pics/top_vert.gif);
	background-position:top;
	}

#left_content_pic
	{	
	float:left;
	clear:right;
	}

#right_content_pic
	{	
	float:right;
	}

#spacer
	{ 
	clear: both;
	}

#spacer1
	{
	height:auto;
	}

#lft_content
	{
	text-align:left;
	color:white;
	background-image:url(../pics/lft_side.gif);
	background-position:left;
	background-repeat:repeat-y;
	}

#content_center
	{
	padding-top:10px;
	max-width:700px;
	min-width:700px;
	margin-left:auto;
	margin-right:auto;
	}

#lft_text_contain
	{
	float:left;
	color:white;
	clear:both;	
	width:200px;
	}

#lft_text
	{
	border:thin white solid;
	width:200px;
	}

#ctr_text_contain
	{
	margin-left:auto;
	margin-right:auto;
	color:white;
	width:200px;
	}

#ctr_text
	{
	border:thin white solid;
	width:200px;
	}

#rt_text_contain
	{
	float:right;
	color:white;
	}

#rt_text
	{
	border:thin white solid;
	width:200px;
	}

#btm_content
	{

background-repeat:repeat-x;
background-image:url(../pics/btm_vert.gif);

screen shot of ie6

I would like my ie7 picture to look like ie6.

Any suggestions?

nrg_alpha

My understanding is that min-width and max-width only function in more modern up-to-date browsers (I don't think IE 6 handles these).

rbblue8

what can i use in it's place?

nrg_alpha

Good question.. unfortunately, I don't have the answer (as I don't build fluid / liquid based sites). There may be a few simple solutions:

I suppose you can simply ensure that your site's structure still looks good as the smallest resolution (800 pixels wide). So instead of relying on those min-width and max-width, simple use widths with percentages or text sized (em-based), and position those divs so that even when you use smaller resolutions, they still look ok (going this route, obviously below a certain size, things will collapse, but if it can retain its structure when viewed at the minimum, then who cares if it collapses when viewed even smaller than that?)

The other route is to only develop for modern up-to-date browsers (in other words, no support for IE 6). Not sure if your position allows for this, but if so, then I would personally go this route instead. Time to encourage people to get off of IE 6 (terrible, terrible browser).

Not sure if any of that helps out or not. There are plenty of good CSS books (and online info) regarding this kind of stuff that could really help explain and offer solutions. But one thing is for sure.. the older the browser you need to support, the more problematic things become (especially when supporting older IE browsers...)

Cheers,

NRG

rbblue8

i would really need to include support for Ie6 for this site will be vised by the more computer inclined people in the world and most of those people refuse to move to Vista or even Ie7.

The page works has it should for FF3.x and Ie7. It's just ie 6. and i have no tested it on an older version of FF though...

rbblue8

well i fixed the Ie6 issue by giving Ie a height for that div tag.

so the only thing that i changed in IE6.css is as follows.

from

#top_content
	{
	background-repeat:repeat-x;
	background-image:url(../pics/top_vert.gif);
	background-position:top;
	}

#top_content
	{
	background-repeat:repeat-x;
	background-position:top;
	background-image:url(../pics/top_vert.gif);
	margin-top:-7px;
	height:24px;
	}

nrg_alpha

Be careful when declaring explicit div heights though.. Some people may increase the text size in their browser (you know, hitting Ctrl plus +).. if you have explicit heights set and some users need to increase font sizes, you may get content clipping. But if this is not a concern, then I suppose you have this issue licked 🙂