Problem with IE6

[nati]

Hello everybody,

 

I have usual problem   with different page look in IE6 than in other browsers. After a lot of googling and many trials, I'm clueless. A big part of layout is moved down in IE6.

 

Any help would be appriciate.

 

This is a link to page: http://www.djordjeweb.nl/compshop/index.php

 

And here is code:

 

style.css

 

* {
margin: 0px;
padding: 0px;
}

body {
height: 100%;
background-color: #ffffff;
color: #85859c;
font-family: tahoma, arial, sans-serif;
font-size: 10px;
text-align: center;
}

a {
color: #85859c;
text-decoration: underline;
}

a:hover {
color: #69699c;
}

span {
display: none;
}

img {
border: none;
}

p {
margin: 10px 0px 5px;
text-align: justify;
line-height: 14px;
}



.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
}

#container {
margin: 0px auto;
width: 780px;
  /*width: 768px;*/
border-color: #9e9ec3;
border-width: 0px 1px 1px;
border-style: solid;
}

input {
padding-left: 2px;
background-color: #fff;
color: #85859c;
font-family: tahoma, arial, sans-serif;
font-size: 11px;
}

table { border-collapse:collapse; }


/* Page Header */

#page_header {
width: 780px;
/*width: 768px;*/
height: 80px;
color: #fff;
background: #9898CF;
border-bottom: 1px #fff solid;
overflow: hidden;
}

#page_header a {
color: #fff;
text-decoration: none;
}

#page_header a:hover {
color: #e1e1e1;
}

#page_heading {
width: 190px;
height: 75px;
float: left;
}

#page_heading h1 {
  width: 190px;
height: 100px;
float: left;
font-size: 28px; 
color: #FFCCFF;
}

#page_headerlogin {
padding-right: 30px;
padding-top: 10px;
float: right;
width: 300px;
text-align: right;
word-spacing: -1px;
overflow : hidden;
}

#page_headerlogin h4 {
  float: right;
  font-weight: normal;
  font-size:12px;
}

#page_headerlogin h3 {
  float: right;
font-weight: bold;
font-size: 12px;
}

#page_headerlogin a.logout {
color: #FF99FF;
}

#page_headerlogin a.cart {
color: #990099;
font-weight: bold;
text-decoration: underline;
}


/* Main Navigation Menu */

#page_menu {
margin-bottom: 1px;
width: 780px;
/*	width: 768px;*/
height: 21px;
}

#page_menu ul {
width: 780px;
/*width: 768px;*/
height: 21px;
list-style-type: none;
overflow: hidden;
}

#page_menu li {
margin-right: 1px;
width: 155px;
height: 21px;
float: left;
background: url('images/menu_background.gif') repeat-x 0px 0px;
overflow: hidden;
text-align: center;
font-size: 11px;
font-weight: bold;
}

#page_menu li.current{
  color: #CCCCFF;
  padding-top: 3px;
}

#page_menu li.logged{
  color: #fff;
  padding-top: 3px;
}

#page_menu li.last {
margin-right: 0px;
width: 156px;
}

#page_menu a {
padding-top: 3px;
display: block;
color: #fff;
text-decoration: none;
}

#page_menu a:hover {
color: #e1e1e1;
}


/* Page Banner */

.banner {
  width:780px;
  /*width: 768px;*/
  height:100px;
  background-color:#e1e1e1;
} 

/* Left Sidebar */

#left_sidebar {
width: 12px;
float: left;
text-align: left;
color: #8989b6;
}

#left_sidebar a {
color: #8989b6;
}

#left_sidebar a:hover {
color: #75759c;
}


/* Left Sidebar : Categories */

#categories {
margin-bottom: 0px;
padding: 0px 1px 1px 0px;

border-width: 0px 0px 0px 0px;
border-style: solid;
text-align: center;
float: left;
background-image:url(images/images/menu_02.jpg);
}

#categories_header {
margin-bottom: 0px;
width: 150px;
height: 29px;
overflow: hidden;
background-image:url(images/images/menu_01.jpg);
background-repeat:no-repeat;
}

#categories_footer {
margin-bottom: 0px;
width: 150px;
height: 29px;
overflow: hidden;
background-image:url(images/images/menu_03.jpg);
background-repeat:no-repeat;
}

#categories_header h2 {
margin-top: 3px;
margin-left: 5px;
color: #FF99FF;
font-size: 12px;
font-weight: bold;
}

#categories ul {
margin: 0px auto;
width: 120px;
list-style-type: none;
}

#categories li {
width: 120px;
height: 21px;
list-style-type: none;
text-align: left;
border-bottom: #b6b6d2 0px solid;
float: left;
}

#categories li.current{
  width: 114px;
height: 18px;
  padding-top: 4px;
padding-left: 6px;
font-weight: bold;
  color: #FF0099;
}

#categories li.last {
border: none;
}

#categories li.currentlast {
  width: 114px;
height: 16px;
  padding-top: 4px;
padding-left: 7px;
font-weight: bold;
  color: #FF0099;
border: none;
}

#categories li a {
margin-top: 4px;
margin-left: 6px;
display: block;
color: #7575a9;
text-decoration: none;
font-weight: bold;
}

#categories li a:hover {
color: #56567c;
}


/* Main Content Area */

#main_content {
margin-left: 140px;
width: 500px;
text-align: center;
float: left;
display: inline;
}

#main_content .h_divider {
margin-bottom: 2px;
height: 1px;
background-color: #c2c2cd;
overflow: hidden;
}

/* Products */

.product {
width: 644px;
color: #660066;
padding-left:50px;
}

#product h1 {
padding: 20px 0px 0px 15px;
margin-bottom: 0px;
width: 500px;
font-family: tahoma;
color: #FF0099;
font-size: 20px;
font-weight: bold;
text-align: left;
float: left;
}

.red{
  margin-top: 0px;
  margin-bottom: 0px;
  width: 530px;
  height: 40px;
  font-family: tahoma;
  font-weight: none;
color: #660066; 
text-align: left;
vertical-align: middle;
float: left;
}

.red p{
  padding-left: 15px;
  font-size: 10pt;
  font-weight: none;
}

.red p.zaglavljelevo{
  font-size: 10pt;
  font-weight: none;
  color: #000000;
}    

.red p.zaglavljedesno{
  font-size: 10pt;
  font-weight: none;
  color: #000000;
  text-align: right;
}  

.red p.zaglavljedesnocena{
  width: 70px;
  font-size: 10pt;
  font-weight: none;
  color: #000000;
  text-align: right;
}  

.red img{
  width: 40px;
  height: 40px;
  padding-left: 10px;
  padding-top:10px;
  float: left;
}

.red p.naziv{
  width: 400px; 
  font-size: 8pt;
}

.red p.cena{
  width: 70px;
  float: right;
  text-align: right;
}

.red p a{
  margin-top: -5px;
  text-align: right;
  float: right;
  color: #ff0099;
  font-size: 13px;
  text-decoration: underline;
}    

/* Detalji proiozvoda */

.detail{
  text-align:left;
}

#detail img{
  float: left;
  padding-top: 0px;
  padding-left: 30px;
  width: 100px;
  height: 100px;
}

.povratak{
  text-align: right;
  padding-top:20px;
  padding-right: 0px;
  width: 150px;
  height: 20px;
  font-size: 13px;
  font-weight: bold;
  text-decoration: underline;
  float: right;
}

#detail a{
  color: #FF0099;
}

#detail a:hover{
  color: #778899;
}


#detail p{
  padding-top: 10px;
  padding-left: 30px;
  text-align: left;
  width: 500px;
  color: #660066;
  font-size: 12px;
  float: left;
}

#detail p.kolicina{
  color: #FF0099;
}  

.formazakorpu{
  width: 100px;
}

#formazakorpu form{
  border-top: 50px;
}

#formazakorpu form.p{
  padding-left: 30px;
  padding-top: 10px;
  width: 70px;
  font-weight: bold;
  color: #FF99FF;
}

#formazakorpu input{
  width: 70px;
border-style: solid;
border-color: #9e9ec3;
border-width: thin;
color: #FF0099;
}

#formazakorpu input.button {
background-color: transparent;
float: left;
border: none;
width: 115px;
height: 37px;
}


/* Login Description */

.login {
width: 644px;
float: left;
margin-bottom: 2px;
margin-top: 5px;
}

#login {
width:644px;
}

#login h1 {
margin-top: 10px;
float: left;
padding: 10px 0px 0px 20px;
width: 644px;
text-align: justify;
font-family: tahoma;
color: #FF0099;
font-size: 20px;
font-weight: bold;
}

#login h1.poseban {
font-size: 12px;
}

#login_image {
  padding-right: 35px;
  margin-top: -24px;
width: 245px;
float: right;
overflow: hidden;
text-align: right;
}

#login form {
padding-left: 20px;
padding-top: 30px;
float: left;
font-family: tahoma;
font-size: 11px;
color: #660066;
font-weight: bold;
}

#login form.p {
  padding-left: 20px;
padding-top: 20px;
text-align: left;
float: left;
}

#login input {
margin-top: 1px;
width: 220px;
height: 14px;
float: left;
border-style: solid;
border-color: #666699;
border-width: thin;
color: #FF0099;
}

#login input.button {
padding-top: 30px;
padding-left: 20px;
margin-top: 0px;
width: 79px;
height: 26px;
float: left;
border: none;
}

#log_linkovi{
  padding-left: 20px;
padding-top: 40px;
text-align: left;
float: left;
}

#log_linkovi a{
color: #3300FF;
}

/* Registration */

.registration {
width: 644px;
float: left;
margin-bottom: 2px;
margin-top: 5px;
}

#registration {
width:644px;
}

#registration h1 {
margin-top: 15px;
float: left;
padding: 5px 0px 0px 20px;
width: 574px;
text-align: justify;
font-family: tahoma;
color: #FF0099;
font-size: 20px;
font-weight: bold;
}

#registration h1.poseban {
font-size: 12px;
}

#registration_image {
  margin-top: -60px;
  padding-right: 35px;
  width: 127px;
float: right;
overflow: hidden;
text-align: right;
}

#registration_image_nalog {
  margin-top: -50px; 
  padding-right: 20px;
  width: 245px;
float: right;
overflow: hidden;
text-align: right;
}

#registration form {
padding-left: 20px;
padding-top: 5px;
float: left;
font-family: tahoma;
font-size: 11px;
color: #660066;
font-weight: bold;
}

#registration form.p {
  padding-left: 20px;
padding-top: 10px;
text-align: left;
float: left;
}

#registration p.check {
color: #FF0099;
}

#registration input {
margin-top: 1px;
width: 220px;
height: 14px;
float: left;
border-style: solid;
border-color: #666699;
border-width: thin;
color: #FF0099;
}

#registration input.button {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 65px;
margin-top: 0px;
width: 79px;
height: 26px;
background-color: transparent;
float: left;
border: none;
}


/* New Item Description */

#new_item {
margin: 0px auto 2px;
padding: 10px 10px;
width: 600px;
text-align: justify;
font-family: tahoma;
}

#new_item_header {
margin-top: 10px;
float: left;
width: 348px;
}

#new_item_header h1 {
color: #FF0099;
font-size: 20px;
font-weight: bold;
}

#new_item_headercontact h1 {
  padding-left: 5px;
color: #FF0099;
font-size: 20px;
font-weight: bold;
padding-top: 10px;
}

#new_item_header h2 {
color: #FF0099;
font-size: 16px;
font-weight: bold;
}

#new_item_image {
  margin-top: 10px;
width: 245px;
float: right;
overflow: hidden;
text-align: right;
}

#new_item_image_kontakt {
  margin-top: -24px;
width: 245px;
float: right;
overflow: hidden;
text-align: right;
}

#new_item_text {
float: left;
clear: left;
width: 348px;
font-size: 13px;
color: #660066;
}

#new_item_contact {
  float: left;
clear: left;
width: 348px;
font-size: 13px;
color: #660066;
  padding-left: 5px;
}

#new_item_contact p a{
color: #660066;
}

#new_item_link {
float: left;
clear: left;
width: 348px;
font-weight: bold;
text-align: right;
}

#new_item_link a {
text-decoration: none;
}

/* Start Cart */

#cart {
width: 600px;
color: #660066;
}

#cart h1 {
padding: 20px 0px 0px 15px;
margin-bottom: 0px;
width: 574px;
font-family: tahoma;
color: #FF0099;
font-size: 20px;
font-weight: bold;
text-align: left;
float: left;
}

.cartred{
  margin-top: 0px;
  margin-bottom: 0px;
  width: 590px;
  margin-left:5px;
  height: 40px;
  font-family: tahoma;
  font-weight: none;
color: #660066; 
text-align: left;
vertical-align: middle;
float: left;
}

.cartred p{
  padding-left: 15px;
  font-size: 8pt;
  font-weight: none;
}

.cartred p.zaglavljelevo{
  font-size: 10pt;
  font-weight: none;
  color: #000000;
}    

.cartred p.zaglavljedesno{
  font-size: 10pt;
  font-weight: none;
  color: #000000;
  text-align: right;
  padding-right: 15px;
}  

.cartred p.zaglavljedesnocena{
  font-size: 10pt;
  font-weight: none;
  color: #000000;
  text-align: right;
}  

.cartred p.zaglavljedesnoizmena{
  margin-left: 15px;
  font-size: 10pt;
  font-weight: none;
  color: #000000;
  text-align: right;
}

.cartred img{
  width: 40px;
  height: 40px;
  padding-left: 0px;
  padding-top:0px;
  float: left;
}

.cartred p.naziv{
  width: 235px;     
  font-size: 7pt;
}

.cartred p.kolicina{
  float: right;
  color: #660066; 
}

.cartred p input{
  margin-left: 15px;
  text-align: right;
  color: #660066; 
}

.cartred p a{
  margin-top: -5px;
  text-align: right;
  float: right;
  padding-right: 15px;
  color: #ff0099;
  font-size: 11px;
  text-decoration: underline;
}    

#poslednji_divider {
margin-bottom: 2px;
height: 1px;
background-color: #c2c2cd;
overflow: hidden;
margin-right: 15px;	
}

.cartred p a img.link_obrisi {
  margin-right: 0px;
  margin-top: 1px;
  margin-bottom: -1px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 3px;
  width: 54px;
  height: 18px;
}

.cartred p.cena{
  width: 80px;
  text-align: right;
  float: right;
}

/* End of Cart */


/* Cart Buttons*/
.cart_buttons{
  width: 600px;
  height: 37px;
  padding-top: 40px;
  padding-bottom: 30px;   
}

.cart_buttons img.confirm{
  float: left;
  width: 161px;
  height: 37px;
  padding-left: 110px;
}

.cart_buttons a img.cancel{
  float: right;
  width: 161px;
  height: 37px;
  padding-right: 110px;
}

.cart_buttons img.da{
  float: left;
  width: 92px;
  height: 30px;
  padding-left: 50px;
}

.cart_buttons a img.ne{
  float: right;
  width: 92px;
  height: 30px;
  padding-right: 300px;
}
/* End of Cart Buttons*/


/* Page Footer */

#page_footer {
width: 768px;
}

#powered_by {
padding-top: 17px;
float: right;
width: 305px;
height: 30px;
color: #9595c2;
text-align: center;
}

#powered_by a {
color: #9595c2;
}

#product_brands {
float: left;
}

#product_brands ul {
width: 768px;
list-style-type: none;
}

#product_brands li {
margin: 5px 6px 3px 3px;
height: 60px;
list-style-type: none;
float: left;
}

#product_brands li.intel {
width: 105px;
background: url('images/intel.jpg') no-repeat 0px 0px;
}

#product_brands li.amd {
width: 135px;
background: url('images/amd.gif') no-repeat 0px 0px;
}

#product_brands li.fujitsu {
width: 130px;
background: url('images/fujitsu.gif') no-repeat 0px 0px;
}

#product_brands li.asus {
width: 135px;
background: url('images/asus1.jpg') no-repeat 0px 0px;
}

#product_brands li.toshiba {
width: 115px;
background: url('images/toshiba.jpg') no-repeat 0px 0px;
}

#product_brands li.hp {
width: 90px;
background: url('images/hp.jpg') no-repeat 0px 0px;
}

 

And index.php is:

 

<?php session_start();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css"><title>Online kompjuterska prodavnica</title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>

<body>
<div id="container">

<!-- Start of Page Header -->
<?php
include 'header.php';
?>
<!-- End of Page Header -->

<!-- Start of Page Menu -->
<?php 
$menu=file_get_contents("menu.php");
$base=basename($_SERVER['PHP_SELF']);
$menu=preg_replace("|<li><a href=\"".$base."\">(.*)</a></li>|U", "<li class=\"current\">$1</li>", $menu);
if ($sesija_loguser != '')
{$regpage = "registracija.php";
$menu=preg_replace("|<li><a href=\"".$regpage."\">(.*)</a></li>|U", "<li class=\"logged\">$1</li>", $menu);}
echo $menu; 
?>
<!-- End of Page Menu -->
<div class="banner"><img src="images/indexpicture.jpg"></div>
<!-- Start of Left Sidebar -->
<?php 
$_SESSION['sesija_tekuca_kat'] = 0;
include 'leftsidebar.php';
/*$menu=file_get_contents("leftsidebar.php");
$base=basename($_SERVER['PHP_SELF']);
$menu=preg_replace("|<li><a href=\"".$base."\">(.*)</a></li>|U", "<li class=\"current\">$1</li>", $menu);
echo $menu; */
?>
<!-- End of Left Sidebar -->

<!-- Start of Main Content Area -->
<div id="main_content"><!-- Start of New Item Description -->
<div id="new_item">
<div id="new_item_header">
<h1>KAKO KUPOVATI</h1>
<h2>u našoj prodavnici</h2>
</div>
<div id="new_item_image"> <img src="images/naslovna.jpg" alt="" height="127" width="117" /> </div>
<div id="new_item_text">
<p>Kupovina u našoj prodavnici je veoma jednostavna.</p>
<p>Izaberite kategoriju proizvoda koji Vas zanima. Prikazaće Vam se trenutno raspoloživi proizvodi. Za svaki proizvod koji 
želite da kupite, unesite željenu količinu i kliknite na link <strong>Dodaj u korpu</strong>.</p>
<p>U bilo kom trenutku možete pogledati trenutno stanje Vaše korpe klikom na link <strong>Korpa</strong>.</p>
<p>Ako do sada niste kupovali u našoj prodavnici, neophodno je da se registrujete klikom na link <strong>Novi korisnik</strong>.</p>
<p>Registrovani korisnici mogu u svakom trenutku ažurirati lične podatke u odeljku <strong>Moj nalog</strong>.</p>
<p>Za sve dodatne informacije i sugestije na raspolaganju su telefoni i e-mail u odeljku <strong>Kontakt</strong>.</p>
</div>
<div class="clearthis"> </div>
</div>
<!-- End of New Item Description -->
</div>
<!-- End of Main Content Area -->

<div class="clearthis"> </div>

<!-- Start of Page Footer -->
<?php include 'footer.html';?>
<!-- End of Page Footer -->

</div>
</body></html>

 

Tnx in advance,

Nati

[Boo-urns]

I'm going to take a stab since I don't have IE6 available at the moment. Try taking out the "new_item_image" div see what that does.

[haku]

I don't have IE6 where I am right now, but HTML comments often create whitespace in IE6. Take out your comments and it may solve your problem.

 

And does HTML really need to be commented? It's usually pretty easy to see what it is without needing comments.

[dbrimlow]

Actually it looks fine in IE6 to me, FF 2 has a problem with category footer not clearing the float elements near it.

 

Try a simple clear:both, first:

 

#categories_footer {

 

        clear:both;

 

margin-bottom: 0px;

 

width: 150px;

 

height: 29px;

 

overflow: hidden;

 

background-image:url(images/images/menu_03.jpg);

 

background-repeat:no-repeat;

[alphanumetrix]

You need to do a CSS bridge. I don't have IE6, so I can't tell you what code to replace it with, but this should work below:

 

Site example:

 

<html>
<head>

<link href="LINK TO YOUR CSS FILE" rel="stylesheet" type="text/css">

<!--[if IE 6]>
<link href="LINK TO YOUR CSS BRIDGE HERE" rel="stylesheet" type="text/css">
<![endif]-->

</head>
<body>
</body>
</html>

 

The CSS bridge is basically a separate document with special instructions for a specific browser (in this case, IE6).

 

All you do is redefine the same CSS ID in it, so it'll work in IE six:

#categories_footer {

SPECIAL INSTRUCTIONS FOR IE BROWSER HERE!!

}

 

Your regular CSS file doesn't need to be changed. Just use what works for other browsers.

 

It's important that you put the link to the bridged CSS BELOW!! the original CSS link. This is because CSS's are Cascading Style Sheets, so it's updated as the file descends.

 

 

BTW, not many people use IE 6 anymore, so you shouldn't stress it too much unless you have a high-traffic site. Also, the <!--[if ie]> code only works with IE. To bridge different browsers - such as FireFox, you need different codes (don't feel like writing them out though).

 

Hope this helps!

[haku]

BTW, not many people use IE 6 anymore, so you shouldn't stress it too much unless you have a high-traffic site. Also, the <!--[if ie]> code only works with IE.

 

Not sure where you are getting this info from, but on the sites I run, we still have a 20-50% IE6 user group.

[dbrimlow]

BTW, not many people use IE 6 anymore, so you shouldn't stress it too much unless you have a high-traffic site.

 

Not true. IE6 is still a large enough marketshare to be taken seriously ... coders only stopped worrying about IE 5x last year. Our office has over 150 desks all with IE6. I still keep it as my IE browser on my home PC and laptop - because it IS broken and I need to develop for it.

 

You need to do a CSS bridge.

 

It's actually called a conditional comment and is indeed a good practice to get into - whenever you actually need to code specifically for IE.

 

But in your case, your CSS is fine, just clear your floats properly..

[alphanumetrix]

My info was from my old site... I used joomla and it showed the IE 6 users. Only about 2% of our traffic used it. We used to get a good 300,000 a month, too. I suppose that's a little biased though; my traffic consisted of mostly computer people.

 

I just figured everyone updates their browser when a new one comes out though, so I didn't think of it as biased.

[haku]

Not at all. A significant number of people don't update their browser. If they did, then IE6 problems would go away. But its here to stay for another 2-5 years.

[alphanumetrix]

good to know.

[SuperBlue]

There rarely is good reason to support IE6, and other older browsers for that matter. It usually comes down to worries about potential loss of visitors, which isn't a problem in reality.

 

Many websites doesn't render correctly in IE6, they are still viewable, but surely not pretty. Viewable should be acceptable for users insisting on using unsupported, broken and outdated browsers.

 

Now i don't recommend sticking "best viewed in x browser" messages on your website, but i do recommend every web designer with a bit of self-recognition, to advise their users to keep their browser updated, just as they would update any other piece of software.

 

We should also consider our position as web designers, i don't consider my position to include fixing browser specific bugs. That is something which should be down to browser developers.

 

The only time it is recommended to apply fixes, is when working with current browser versions. And such fixes should only be applied temporarily, until the bug has been fixed. At that point, the fix should be removed, and users told to update. This would also get rid of any potential worries, in regard to hacks breaking your site, whenever a new browser version is released. We need to have some standard rule-set we can use when designing our pages, there is nothing worse then the guess-work we have had in the past.

 

IE6 was released before windows XP, and is about 8 years old. Users with XP can easily shift their browser or upgrade to IE7. While the few Win9x users left, still have a viable option in Opera. I even use Opera on an older Win98 machine, and it works quite well.

[haku]

There rarely is good reason to support IE6, and other older browsers for that matter. It usually comes down to worries about potential loss of visitors, which isn't a problem in reality.

 

I'll give you one good reason. Clients expect it. Don't listen to your clients wants and expectations, and you don't keep your clients.

 

Now i don't recommend sticking "best viewed in x browser" messages on your website, but i do recommend every web designer with a bit of self-recognition, to advise their users to keep their browser updated, just as they would update any other piece of software.

 

How do you recommend telling your users to upgrade their browser without telling them to upgrade their browser?

 

We should also consider our position as web designers, i don't consider my position to include fixing browser specific bugs. That is something which should be down to browser developers.

 

So you would tell a client to go talk to microsoft of they ask why their site doesn't work in IE6?

[alphanumetrix]

There rarely is good reason to support IE6, and other older browsers for that matter. It usually comes down to worries about potential loss of visitors, which isn't a problem in reality.

 

Many websites doesn't render correctly in IE6, they are still viewable, but surely not pretty. Viewable should be acceptable for users insisting on using unsupported, broken and outdated browsers.

 

Now i don't recommend sticking "best viewed in x browser" messages on your website, but i do recommend every web designer with a bit of self-recognition, to advise their users to keep their browser updated, just as they would update any other piece of software.

 

We should also consider our position as web designers, i don't consider my position to include fixing browser specific bugs. That is something which should be down to browser developers.

 

The only time it is recommended to apply fixes, is when working with current browser versions. And such fixes should only be applied temporarily, until the bug has been fixed. At that point, the fix should be removed, and users told to update. This would also get rid of any potential worries, in regard to hacks breaking your site, whenever a new browser version is released. We need to have some standard rule-set we can use when designing our pages, there is nothing worse then the guess-work we have had in the past.

 

IE6 was released before windows XP, and is about 8 years old. Users with XP can easily shift their browser or upgrade to IE7. While the few Win9x users left, still have a viable option in Opera. I even use Opera on an older Win98 machine, and it works quite well.

 

While I can agree with a lot of what you said, I'm going to have to side with Haku. Although I said not to worry about IE6, I still am sure to fix the problems in it if I have the resources (time, etc.).

 

 

[nati]

Dbrimlow, I've solve the problem I've posted about. The problem was in CSS, of course, I've put width on div around categories and removed margin-left from main content. That's why it looks ok now in IE6. And thanks for solution about bad displaying of categories footer, it also works good in FF2.

 

But now different problem appeared and it is very weird. I have completely the same code of my whole site on my comp and on remote server. When I do test from IE6, locally everything looks normally now. But when I look remote site, some pages are moved to the left edge of the screen and they should be in the middle.

 

One of the problematic pages is: http://www.djordjeweb.nl/compshop/product.php?kategorija=11

 

I really don't understand how it is possible same code, looked from the same browser works differently depending on storage place  ???.

 

Anyone can help, please?

 

And one more thing about IE6: in my environment, a lot of people still use IE6 and that's why I have to solve this.

 

 

Tnx in advance, Nati

[nati]

Bliljerk101, tnx for the explanation of CSS bridge. I made a different css file for IE6 and changed float property on main_content div from left to none and that centered whole layout.

 

Anyway, it is still mystery to me why my site looked differently form local and remote environment  ???.