tags:

views:

163

answers:

4

Here I have used some .css style for my asp.net webpage. It is displaying nice in firefox and chrome and not in Internet Explorer.

css code:

body
{
  margin: 0;
  padding: 0;
}
#main
{
    width:auto;
}
#left
{
    margin:0;
    padding: 0;
    float:left;
}
#right
{
    margin:0;
    padding: 0;
}
#video
{
    margin:0;
    padding: 0;

}
#righta
{
    margin:0;
    padding: 0;
    float:left;
}
#rightb
{
    margin:0;
    padding: 0;
}
#rightthird
{
    margin:0;
    padding: 0;
}
#bottom
{
    margin:0;
    padding: 0;
}

ASP.NET code :

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<script runat="server">

protected void Page_Load(object sender, EventArgs e)
{

}
</script>

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title>News</title>
    <link href="news.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form id="form1" runat="server">
<div id="main">
<div id="left">

    <asp:Image ID="imgleft" runat="server" ImageUrl="~/news/left.jpg" 
        Height="600px" Width="400px" />

</div>
<div id="right">
<div id="video">

    <asp:Image ID="imgvideo" runat="server" ImageUrl="~/news/vid.jpg" />

</div>
<div id="righta">

    <asp:Image ID="imgrighta" runat="server" Height="150px" 
        ImageUrl="~/news/ra.jpg" Width="300px" />

</div>
<div id="rightb">

    <asp:Image ID="imgrightb" runat="server" Height="150px" 
        ImageUrl="~/news/rb.jpg" Width="300px" />

</div>
<div id="rightthird">

    <asp:Image ID="imgrightthird" runat="server" Height="100px" 
        ImageUrl="~/news/rt.jpg" Width="600px" />

</div>

</div>
<div id="bottom">

    <asp:Image ID="imgbottom" runat="server" Height="50px" 
        ImageUrl="~/news/bottom.jpg" Width="1000px" />

</div>

</div>
</form>

A: 

IE6 always makes developers sick, try to upgrade to ie8.

e-turhan
Designers need to design for their target audience. If a visitor comes to the site in IE6, him upgrading his browser to IE8 is not going to help.
Martin
+1  A: 

My first suggestion is to use a CSS reset.

http://meyerweb.com/eric/tools/css/reset/

Martin
+1  A: 

There have always been differences between browsers, and that will likely continue to be the case. (Especially when we throw mobile devices into the mix.) Unfortunately, IE6 exhibits more differences than one might expect from a major browser. (Or perhaps it's just what we'd expect, given the producer? ;-)

First thing to consider: Is IE6 support a requirement? e.g. Is that your target audience? If it is then you'll need to make browser-specific adjustmens to compensate for its quirks.

Like O.K.W. said, you can use a conditional comment. Here's one that could be used to add a CSS file with ie-specific fixes.

    <head runat="server">
    <title>News</title>
    <link href="news.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 6]>
      <link href="ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->
   ]]>
</head>
Mark Maslar
Agree, let's hope rahul can get the ie.css done right.
o.k.w
+1  A: 

Cross browser compatibility should be part of the developement process, usually on projects its a good idea to constantly check any new UI design against as many browsers as possible whilst your still doing your UI design, rather than afterwards or even worse as a seperate developement phase.

If you google you will find many different work around for specific CSS cases, but generally this is no 'Magic' way that will resolve all cross browser problems, hence working on them early helps ease problems later down the road.

Darknight