I was creating a website http://tapasya.co.in and i found that this site has some layout problem in IE 6 but working fine in Mozilla.
I want this site to look same as it is looking in Mozilla right now.
What i need to do in CSS do make it work perfect.
In mozilla also their is little space between two rows. I dont want that space. Each row should not have any margin
Please suggest what changes i need to do in CSS.
IE doesn't behave the way designer want. So what you have to is use a separate stylesheets for IE (not complete CSS but the ones that are creating problems in IE) and finally put this code in ur head tag
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_style.css" />
<![endif]-->
and point the IE style sheet in href
A simple google search would have got you here:
http://www.quirksmode.org/css/condcom.html
Which shows you have to use this conditional css. GL!
i'd use conditional CSS for each version of IE. You can use "lt" (lesser than) and "gt" (greater than) to target each version as shown below
<!--[if lt IE7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<!--[if IE7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if gt IE7]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
Once you have seperate CSS files for each version of IE, you'll then need to re-specifiy the CSS properties that are causing problems. These will be margin and padding properties in most cases.
If you've used float then the margin in the direction of the float will get doubled in IE6. See this link for more info on this
this is a good set of tools for browser testing here
IE6 expands empty divs to the font-size just in case you ever decide to put text in them.
Add line-height:0 and font-size:0 to div.content1_dvider_div
#content1_bg div.content1_dvider_div {
background:url("../Images/content1_div.gi") repeat-y scroll center center #EFEFEF;
height:5px;
margin:15px 0 0;
line-height:0;
font-size:0;
}