?
Solved

How to make my web application look correctly in mozilla, opera?

Posted on 2008-10-17
8
Medium Priority
?
401 Views
Last Modified: 2013-12-07
How to make my web application look correctly in mozilla, opera?

I have a Web application that uses CSS to handle my page layout(see css code)
At the top of my pages i have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">

In IE 6-7 it looks great.....BUT in Mozilla, Opera....it looks like junk...basically it seems as though Mozilla is ignoring or does not recognize my Width 100%.

Below is the code which I beleive is the culprit since it handles most of my page formating.

Can someone assist me in converting this to be complaint with IE7, Mozilla, and Opera.
Or provide me with a tip to get it to look right...in other browsers without a complete redesign of my pages.

thanks in advance.


#container 
{
	min-height:100%;
	position: absolute;
    top: 0px;
    left: 0px;
}
#body 
{
	padding-bottom:20px;/* Height of the footer */
		
}
#footer
{
	position:absolute;
	bottom:0;
	width:100%;
	height:20px;
    left: 0px;
}
 
/*HEADER STYLE - START  */   
.header
{
    /*background: url(../image/banner_bg.png) repeat-x;*/
    width:100%;
    border:none;
}
.headermenubarsub
{
	height:18px;
	/*background: url(../image/submenu_bg.gif) repeat-x left;*/
    background-color:#D8D9DA;
	width:100%;
}
.headermenubar
{
	border-bottom:1px solid #0D3692;
	width:100%;
	height:8;
}
/*HEADER STYLE - END*/ 
 
.MainPage
{
     /*background-color: #e5e5e5;*/
     width: 950px;
     height:100%;
     margin:0px;
     background-color: white;
    /*background: url(../image/body_bg.gif);*/
}
.Page
{
    /*border-style: none;
    border-color: inherit;
    border-width: 0px;
    background-color:White;*/
    height: 88px;
    width:75%;
    }
    
.Page_Menu
{
    /*background-color: #a2c8f3;  */
    /*background-position: left 25px; 
    background-image: url('../images/other/stripe.gif'); 
    background-repeat: repeat-x;*/
    height: 25px;
    background-color:#D8D9DA; 
    border-top:1px solid #AAAAAA;
	border-bottom:1px solid #666666;
	width:100%;
}

Open in new window

0
Comment
Question by:16spam16
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 8

Expert Comment

by:eszaq
ID: 22743881
Is your application on public server? Where can it be seen?
0
 
LVL 1

Author Comment

by:16spam16
ID: 22743942
It is internal.
0
 
LVL 1

Author Comment

by:16spam16
ID: 22758135
I can provide page source if that will help?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 8

Expert Comment

by:eszaq
ID: 22759407
Yes please.
0
 
LVL 1

Author Comment

by:16spam16
ID: 22762102
Sorry for the delay
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Login.aspx.vb" Inherits="MySite.Login" %>
 
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<%@ Register src="crtlHeader.ascx" tagname="crtlHeader" tagprefix="uc2" %>
<%@ Register src="crtlFooter.ascx" tagname="crtlFooter" tagprefix="uc3" %>
<%@ Register src="crtlLoad_Login.ascx" tagname="crtlLoad_Login" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
<html>
<head id="HEAD1" runat="server">
<link rel="SHORTCUT ICON" href="image/favicon32.ico">
<title>MySite - Home</title>
<link href="css/theme.css" type="text/css" rel="stylesheet">
    <style type="text/css">
        .style2
        {
            font-size: 12px;
            color: Black;
            font-family: Arial;
            font-weight: normal;
            text-decoration: none;
            width: 96px;
        }
 
        .style4
        {
            font-family: Arial;
            font-weight: bold;
            font-size: small;
        }
        .style5
        {
            font-family: Arial;
            font-size: small;
        }
        .style6
        {
            width: 371px;
        }
        .style7
        {
            font-size: large;
        }
        .style8
        {
            width: 16px;
        }
    </style>
</head>
<BODY class="MainPage">
<FORM id="Form1" method="post" runat="server">
        <div id="container">
	        <div id="header">
		        <!-- Header start -->
		        <uc2:crtlheader ID="crtlHeader1" runat="server" />
		        <!-- Header end -->
	        </div>
	        <div id="body">
		        <!-- Body start -->
		        <table id="tblPage" class="Page" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td id="Content" valign=middle align="center">
                <br />
                <asp:scriptmanager ID="ScriptManager1" runat="server">
                </asp:scriptmanager>
                
                                
        <cc1:validatorcalloutextender runat="Server" ID="NReqE"
            TargetControlID="NReq"
            HighlightCssClass="validatorCalloutHighlight" />    
                    
                <br />
            </td>
        </tr>
        <tr>
            <td id="Content2" valign=middle align="center">
 
                    <asp:updatepanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:panel id="panError" runat="server" BorderWidth="1px" BorderStyle="Solid" Visible="False"
							                        Width="600px" BorderColor="#E27C10" BackColor="#FCF1C1" Height="29px" 
                                            style="margin-bottom: 0px">
                        <table id="Table14" height="28" cellspacing="0" cellpadding="2" width="568" border="0">
 
                        <tr>
                        <td nowrap width="29">
                        <asp:Image id="Image1" runat="server" BackColor="Transparent" ImageUrl="image/alert_anim.gif"></asp:Image></td>
                        <td nowrap align="center">
                        <asp:Label id="lblErrorMsg" runat="server" BackColor="Transparent" Width="528px" ForeColor="#990000"
											                        Font-Size="XX-Small" Font-Names="Verdana" Font-Bold="True"></asp:Label></td>
                        </tr>
                        </table>
                        </asp:panel>
                    
                        <table id="Table13" align="center" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="16">
                            <img height="16" src="images/top_lef.gif" width="16" /></td>
                        <td background="images/top_mid.gif" height="16">
                            <img height="16" src="images/top_mid.gif" width="16" /></td>
                        <td width="24">
                            <img height="16" src="images/top_rig.gif" width="24" /></td>
                    </tr>
                    <tr>
                        <td background="images/cen_lef.gif" width="16">
                            <img height="11" src="images/cen_lef.gif" width="16" /></td>
                        <td align="left" bgcolor="#ffffff" valign="center">
                            <table id="Table6" align="center" border="0" cellpadding="0" cellspacing="2" 
                                height="23" style="BORDER-BOTTOM: #1b51bb 2px solid" width="100%">
                                <tr>
                                    <td style="text-align: center">
                                                                                    <font face="Arial" size="4"><span class="plaintext">
                                            <img align="absMiddle" hspace="4" src="image/login.gif" /></span>Sign In Here</font>
                                    </td>
                                </tr>
                            </table>
                            <font face="Arial" size="4">
                    <table border="0" align="center" cellpadding="2" cellspacing="2" 
                        width: 65%">
                        <tr class="bodytext">
                            <td colspan="2" align="right">
                                </td>
                        </tr>
                        <tr class="bodytext">
                            <td align="right" class="style2" >
                                User Name:</td>
                            <td width="50%">
                                <span>
                                <asp:textbox id="txtLogin" runat="server" Width="175px" 
        TabIndex="1" CssClass="textbox"></asp:textbox>
                                </span>
                            </td>
                        </tr>
                        <tr class="bodytext">
                            <td align="right" nowrap height="12" class="style2">
                                Password:</td>
                            <td height="12">
                                <span>
                                <asp:textbox id="txtPassword" tabIndex="2" runat="server" Width="175px"
														TextMode="Password" CssClass="textbox"></asp:textbox>
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center">
                                <span>
                                <asp:button id="btnLogin" runat="server" OnClick="LoginClick" Width="80px" Text="Login" TabIndex="3">
                                </asp:button>
                                </span>
                            </td>
                        </tr>
                    </table>
                            </font>
                        </td>
                        <td background="images/cen_rig.gif" width="24" align="center">
                            <img height="11" src="images/cen_rig.gif" width="24" /></td>
                    </tr>
                    <tr>
                        <td height="16" width="16">
                            <img height="16" src="images/bot_lef.gif" width="16" /></td>
                        <td background="images/bot_mid.gif" height="16">
                            <img height="16" src="images/bot_mid.gif" width="16" /></td>
                        <td height="16" width="24">
                            <img height="16" src="images/bot_rig.gif" width="24" /></td>
                    </tr>
                </table>  
                    </ContentTemplate>                  
                    </asp:updatepanel>
                    
        <asp:panel ID="pnlProgress" runat="server" class="modalPopup">
            <div>
               <uc1:crtlload_login ID="crtlLoad_Login1" runat="server" /> 
            </div>
        </asp:panel>
        
        <cc1:modalpopupextender ID="mpeProgress" runat="server" 
        TargetControlID="pnlProgress" PopupControlID="pnlProgress" 
        BackgroundCssClass="modalBackground" />
        </td>
        </tr>
        <tr>
            <td id="Content23" valign="middle" align="center">
        <asp:requiredfieldvalidator runat="server" ID="NReq"
            ControlToValidate="txtLogin"
            Display="None"
            
                    ErrorMessage="A User Name is required." />
        <asp:requiredfieldvalidator runat="server" ID="NReq0"
            ControlToValidate="txtPassword"
            Display="None"
            
                    ErrorMessage="A Password is required." />
        <cc1:validatorcalloutextender runat="Server" ID="NReq0_validatorcalloutextender"
            TargetControlID="NReq0"
            HighlightCssClass="validatorCalloutHighlight" />    
 
        <cc1:validatorcalloutextender runat="Server" ID="Validatorcalloutextender1"
            TargetControlID="NReq0"
            HighlightCssClass="validatorCalloutHighlight" />    
                                
            </td>
        </tr>
        </table>
		        <!-- Body end -->
	        </div>
	        <div id="footer">
		        <!-- Footer start -->
		        <uc3:crtlfooter ID="crtlFooter1" runat="server" />
		        <!-- Footer end -->
	        </div>
        </div>
    <script type="text/javascript">
 
        Sys.Net.WebRequestManager.add_invokingRequest(onInvoke);
        Sys.Net.WebRequestManager.add_completedRequest(onComplete);
 
        function onInvoke(sender, args)
        {
            $find('<%= mpeProgress.ClientID %>').show();
        }
 
        function onComplete(sender, args)
        {
            $find('<%= mpeProgress.ClientID %>').hide();
        }
 
 
        function pageUnload()
        {
            Sys.Net.WebRequestManager.remove_invokingRequest(onInvoke);
            Sys.Net.WebRequestManager.remove_completedRequest(onComplete);
        }
 
    </script>
        
</FORM>
    </BODY>
</html>

Open in new window

0
 
LVL 8

Accepted Solution

by:
eszaq earned 500 total points
ID: 22762962
I do not have a server to run asp on. But from what I can see it is problem with your HTML, not CSS. I will not go deep into your code, let's just try to solve the mystery.

Tag for table with id "Table6" has attribute width="100%". So I guess this is the one you want to be wider. BUT it is nested inside "Table13" which does not have any width specified. By default table is as wide as contents requires. Since width of your table of interest "Table6" does not have much of contents, parent table shrinks. Try to specify width of "Table6" in pixels OR set width of "Table13" to 100% to see the result.

Also, whenever you are in process of debugging your layout, it's always fun to have some temporary declarations in your CSS, e.g.:
table{border: thin solid red;}
0
 
LVL 1

Author Comment

by:16spam16
ID: 22763565
interesting...ill take a look tomorrow when i get in the office.
0
 
LVL 1

Author Closing Comment

by:16spam16
ID: 31507178
Thanks.
That seems to solve most of my problems.  Thanks for the tip. I will have to look at the other 30 pages i have.  thank you again.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Suggested Courses
Course of the Month14 days, 15 hours left to enroll

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question