Page 1 of 1

CSS behaves weird with IE-6

Posted: Thu Jun 04, 2009 4:09 pm
by anand
Hello, I am a first time CSS coder. I tried making a simple page using CSS + Table but it starts behaving awkwardly with IE. it works fine with Chrome and Firefox.

I am attaching the views with both IE and Chrome.

And here is the code

Code: Select all

 
<style>
.header_image {
background-image: url('header.jpg');
margin-top: 1px;
height: 95px;
width: 1000px;
}
 
table.navbar {
width:1000px;
padding-left: 30px;
padding-top: 65px;
}
 
td.navigation {
height: 30px;
text-align: center;
}
 
.nav_font {
font-weight: bold;
color: #15317E;
font-face: tahoma;
font-size: 15px;
}
 
.nav_font_selected {
font-weight: bold;
color: white;
font-face: tahoma;
font-size: 15px;
}
 
td.selected {
background-color: #41627E; 
height: 30px;
font-weight: bold;
text-align: center;
font-color: #FFFFF;
}
 
body.index {
background-color:#41627E;
}
 
.central_box {
background-color: #659EC7;
border-left: 4px solid white;
border-right: 4px solid white;
width: 950px;
height: 250px;
align: center;
}
 
.offers_box {
margin-left: 10px;
float: left;
background-image: url('boxnew.png');
repeat: no-repeat;
width: 272px;
height: 230px;
padding-left: 2px;
padding-right: 2px;
text-align:center;
}
 
.offers1_box {
margin-right: 10px;
float: right;
background-image: url('boxnew.png');
repeat: no-repeat;
width: 272px;
height: 230px;
padding-left: 2px;
padding-right: 2px;
text-align:center;
}
.style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
</style>
 
 
<title>Test page</title>
 
<body class="index">
<div class="header_image">
 
<table class="navbar">
<tr>
<td class="selected"><div class="nav_font_selected">Home</div></td>
<td class="navigation"><div class="nav_font">Search Ads</div></td>
<td class="navigation"><div class="nav_font">Feedback Point</div></td>
<td class="navigation"><div class="nav_font">Reward Point</div></td>
<td class="navigation"><div class="nav_font">Coupons</div></td>
<td class="navigation"><div class="nav_font">Book An Ad</div></td>
<td class="navigation"><div class="nav_font">Review</div></td>
<td class="navigation"><div class="nav_font">SignUp</div></td>
<td class="navigation"><div class="nav_font">Find A Friend</div></td>
 
</tr>
</div>
 
 
<table style="margin-top:10px;" align="center"><tr><td><img src="box1.png">
 
<div class="central_box">
<div class="offers_box">
  <h3><span class="style1">Write Reviews on products</span><br>
  </h3>
</div>
<div class="offers1_box">
  <h3><span class="style1">Write Reviews on products</span><br>
  </h3>
</div>
</div>
<img src="boxlow.png">
 
</td>
</tr></table>
 
</body>
 

Re: CSS behaves weird with IE-6

Posted: Thu Jun 04, 2009 4:24 pm
by kaszu
PNG images with Alpha-24 transparency are not rendered correctly if you use <img src or background property. For that you need to use png alphaimageloader (it doesn't affect PNG-8, but from your screenshot I couldn't tell what type of images you are using, but I suspect PNG-24).
Most likely your problems are with hasLayout IE property, but I can't tell exactly just looking at screenshot.
Please provide url where I can see live page (pasting your html/css in files doesn't match screenshots of course).

Re: CSS behaves weird with IE-6

Posted: Thu Jun 04, 2009 11:03 pm
by anand
kaszu wrote:PNG images with Alpha-24 transparency are not rendered correctly if you use <img src or background property. For that you need to use png alphaimageloader (it doesn't affect PNG-8, but from your screenshot I couldn't tell what type of images you are using, but I suspect PNG-24).
Most likely your problems are with hasLayout IE property, but I can't tell exactly just looking at screenshot.
Please provide url where I can see live page (pasting your html/css in files doesn't match screenshots of course).
Okay. here is the link.

http://bux-service.com/arc/new_project/abc.html

Re: CSS behaves weird with IE-6

Posted: Fri Jun 05, 2009 11:27 am
by kaszu
Replace:

Code: Select all

.header_image {
background-image: url('header.jpg');
margin-top: 1px;
height: 95px;
width: 1000px;
}
 
table.navbar {
width:1000px;
padding-left: 30px;
padding-top: 65px;
}
with:

Code: Select all

.header_image {
background-image: url('header.jpg');
margin-top: 1px;
/* Height here was not needed, because you already set height to TD */
width: 970px;  /* size is width + padding, 970 + 30 = 1000 */
padding-left: 30px;  /* padding should be set to DIV not table to avoid problems */
padding-top: 65px;
}
 
table.navbar {
width: 100%; /* == 970px */
}
<table class="navbar"> is missing closing </table> which is why background is white. You will need to set margins for those tables for them to be in correct place.
Put <style> which you have before DTD definition inside <head> section. Also go and validate your page http://validator.w3.org/ and fix all issues, that should help also.

Re: CSS behaves weird with IE-6

Posted: Fri Jun 05, 2009 1:29 pm
by anand
kaszu wrote: <table class="navbar"> is missing closing </table> which is why background is white. You will need to set margins for those tables for them to be in correct place.
Put <style> which you have before DTD definition inside <head> section. Also go and validate your page http://validator.w3.org/ and fix all issues, that should help also.
Thanks for the help buddy.