CODEWITHSUNDEEP
cssasp.netasp.net-mvchtml
avimatta
avimatta

Reputation: 119

asp design display and rendered browser display are not same?

enter image description here

enter image description here

MY PROBLEM is why it is showing different output[Hyperlink Named HOME] in browser( going above the div part ) when compared to design page in visual studio!!! please Help me, i Don't know much about HTML, LEARNING.....

***<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="project.login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
    .back {
        background-color:chocolate;
        width:inherit;
        height:65px
    }
    .images{width:426px;
            height:65px;
    }
    .hyperlinks {position:relative;
                 float:right;
                 margin-top:-20px;
                 margin-left:10px;
    }
</style>
</head>
<body>
<form id="form1" runat="server">
    <div class="back">
        <asp:Image ID="Image1" runat="server" CssClass="images" ImageUrl="~/images/images.jpg" />
        <asp:HyperLink ID="HyperLink1" runat="server" CssClass="hyperlinks">Home</asp:HyperLink >
    </div>
</form>
</body>
</html>***

Upvotes: 1

Views: 590

Answers (1)

Mr Lister
Mr Lister

Reputation: 46559

The problem occurs only in Internet Explorer, and then only in compatibility mode. So apparently, the designer in Visual Studio emulates IE's compatibility mode.

If you boil the issue down to the minimum required to show it, you get this

.back {
  background-color: chocolate;
  height: 65px;
}

.images {
  height: 100%;
}

.hyperlinks {
  float: right;
  margin-left: 10px;
}
<div class="back">
  <img id="Image1" class="images" src="http://lorempixel.com/195/65" />
  <a id="HyperLink1" class="hyperlinks">Home</a>
</div>

This puts the floating link in the top right corner of its parent in all standards compliant browsers. But switching IE to compatibility mode will put the link below the orange bar.
(If you then give the link a negative top margin, it moves up a bit, but that doesn't change the issue.)

Now a makeshift solution is to use CSS that is handled the same by all browsers, compatibility mode or not. Something like this, for instance.

.back {
  background-color: chocolate;
  height: 65px;
  text-align: right;
}

.images {
  height: 100%;
  float: left;
}

.hyperlinks {
  line-height: 110px;
  margin-left: 10px;
}
<div class="back">
  <img id="Image1" class="images" src="http://lorempixel.com/195/65" />
  <a id="HyperLink1" class="hyperlinks">Home</a>
</div>

A more permanent solution would be to make sure that Visual Studio's designer would show things in standards compliance mode rather than compatibility mode. However, I haven't found a way yet to do that.

Upvotes: 1

Related Questions