CODEWITHSUNDEEP
asp.nethtmlcss
user1776590
user1776590

Reputation: 135

when rendering the page on different browsers layout changes

I have create a website using asp.net and when I render the the website on firefox and IE the website look the same and when rendering it on Chrome it move the button lower and changes the location of it

Google chrome render enter image description here

this is my master page code 

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="UMSite.master.cs" Inherits="WebApplication4.UMSiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link  href="~/Styles/UM.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="Form1" runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                 <h1><img alt="" src="Styles/UMHeader.png" width= "950" height= "65" /></h1>

            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home"/>

                    </Items>

                </asp:Menu>
            </div>
            </div>

        </div></h1>

        <div class="main" runat="server">

            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>


        </div>

        </form>

</body>
</html>

the below is the css

  /* DEFAULTS
    ----------------------------------------------------------*/

    body   
    {
        background: #b6b7bc;
        font-size: .80em;
        font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
        margin: 0px;
        padding: 0px;
        color: #696969;
        height: 192px;
    }

    a:link, a:visited
    {
        color: #034af3;
    }

    a:hover
    {
        color: #1d60ff;
        text-decoration: none;
    }

    a:active
    {
        color: #034af3;
    }

    p
    {
        margin-bottom: 10px;
        line-height: 1.6em;
    }


    /* HEADINGS   
    ----------------------------------------------------------*/

    h1, h2, h3, h4, h5, h6
    {
        font-size: 1.5em;
        color: #666666;
        font-variant: small-caps;
        text-transform: none;
        font-weight: 200;
        margin-bottom: 0px;
    }

    h1
    {
        font-size: 1.6em;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    h2
    {
        font-size: 1.5em;
        font-weight: 600;
    }

    h3
    {
        font-size: 1.2em;
    }

    h4
    {
        font-size: 1.1em;
    }

    h5, h6
    {
        font-size: 1em;
    }

    /* this rule styles <h1> and <h2> tags that are the 
    first child of the left and right table columns */
    .rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
    {
        margin-top: 0px;
    }


    /* PRIMARY LAYOUT ELEMENTS   
    ----------------------------------------------------------*/

    .page
    {
        width: 950px;
        height:auto;
        background-color: #fff;
        margin: 10px auto 5px auto;
        border: 1px solid #496077;

    }

    .header
    {
        position:relative;
        margin: 0px;
        padding: 0px;
        background: #E30613;
        width: 100%;
        top: 0px;
        left: 0px;
        height: 90px;
    }

    .header h1
    {
        font-weight: 700;
        margin: 0px;
        padding: 0px 0px 0px 0px;
        color: #E30613;
        border: none;
        line-height: 2em;
        font-size: 2em;
    }

    .main
    {
        padding: 0px 12px;
        margin: 0px 0px 0px 0px;
        min-height: 630px;
        width:auto;
        background-image:url('UMBackground.png');
      }

    .leftCol
    {
        padding: 6px 0px;
        margin: 0px 0px 0px 0px;
        width: 200px;
        min-height: 200px;
        width:auto;
    }

    .footer
    {
        color: #4e5766;
        padding: 0px 0px 0px 0px;
        margin: 0px auto;
        text-align: center;
        line-height: normal;
    }


    /* TAB MENU   
    ----------------------------------------------------------*/

    div.hideSkiplink
    {
        background-color:#E30613;
        width: 950px;
        height: 35px;
        margin-top: 0px;

    }

    div.menu
    {
        padding: 1px 0px 1px 2px;
    }

    div.menu ul
    {
        list-style: none;
        margin: 0px;
        padding: 5px;
        width: auto;
    }

    div.menu ul li a, div.menu ul li a:visited
    {
        background-color: #E30613;
        border: 1.25px #00BFFF solid;
        color: #F5FFFA;
        display:inline;
        line-height: 1.35em;
        padding: 10px 30px;
        text-decoration: none;
        white-space: nowrap;

    }

    div.menu ul li a:hover
    {
        background-color: #000000;
        color: #F5FFFA;
        text-decoration: none;
    }

    div.menu ul li a:active
    {
        background-color: #E30613;
        color: #cfdbe6;
        text-decoration: none;
    }

    /* FORM ELEMENTS   
    ----------------------------------------------------------*/

    fieldset
    {
        margin: 1em 0px;
        padding: 1em;
        border: 1px solid #ccc;
    }

    fieldset p 
    {
        margin: 2px 12px 10px 10px;
    }

    fieldset.login label, fieldset.register label, fieldset.changePassword label
    {
        display: block;
    }

    fieldset label.inline 
    {
        display: inline;
    }

    legend 
    {
        font-size: 1.1em;
        font-weight: 600;
        padding: 2px 4px 8px 4px;
    }

    input.textEntry 
    {
        width: 320px;
        border: 1px solid #ccc;
    }

    input.passwordEntry 
    {
        width: 320px;
        border: 1px solid #ccc;
    }

    div.accountInfo
    {
        width: 42%;
    }

    /* MISC  
    ----------------------------------------------------------*/

    .clear
    {
        clear: both;
    }

    .title
    {
        display: block;
        float: left;
        text-align: left;
        width: 947px;
        height: 132px;
    }

    .loginDisplay
    {
        font-size: 1.1em;
        display: block;
        text-align: right;
        padding: 10px;
        color: White;
    }

    .loginDisplay a:link
    {
        color: white;
    }

    .loginDisplay a:visited
    {
        color: white;
    }

    .loginDisplay a:hover
    {
        color: white;
    }

    .failureNotification
    {
        font-size: 1.2em;
        color: Red;
    }

    .bold
    {
        font-weight: bold;
    }

    .submitButton
    {
        text-align: right;
        padding-right: 10px;
    }

Upvotes: 0

Views: 2740

Answers (3)

Mr Lister
Mr Lister

Reputation: 46559

Of course the page will look different on different browsers.

You have body {font-size: .80em;} and the em is a relative size, which means that the font size on the web page is 80% of the browser's default font size.

Since the browser's default size can vary (it is always user selectable) this means that you can't use this method if you aim for browser interoperability. Ditto with the line height.

Either keep the user's preferences (and accept that different users will see different things), or choose a font size in pixels or points.

Note that if you have set a size this way in the body, you can use em elsewhere, which will then be relative to this body size. So things like h3 {font-size:1.2em} are perfectly OK.

Upvotes: 1

DrCheesetree
DrCheesetree

Reputation: 78

This is just the way webkit browsers (safari and chrome, etc) render the html file input type.

See this jsbin for an example of the file input tag.

See HTML input type="file" in Chrome does not show textbox for a previous answer.

Upvotes: 2

ckarlss0n
ckarlss0n

Reputation: 23

I'd tell you to look up "css/html browser fixes". Different browsers show webpages differently. Internet Explorer is often the browser with the biggest visual differences.

Upvotes: 1

Related Questions