Link to home
Start Free TrialLog in
Avatar of Peter Wilcox
Peter WilcoxFlag for United States of America

asked on

Why Is My Page Not aligned Correctly In FireFox and Opera

Why Do I have the following:

www.passportluggage.com

1. Space at the bottem.
2. FireFox and opera aren't aligned corretly.

Here is the code for the main Page:

Defaut.aspx:

<%@ Register TagPrefix="uc1" TagName="Header" Src="Header.ascx" %>
<%@ Register tagprefix="uc1" tagname="Footer" src="Footer.ascx"%>
<%@ Register TagPrefix="cc1" Namespace="BVSoftware.WebControls" Assembly="BVSoftware.WebControls.Library1" %>
<%@ Register TagPrefix="uc1" TagName="ContentColumn" Src="controls/ContentColumn.ascx" %>
<%@ Page CodeBehind="default.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="_default" %>
<%@ Register TagPrefix="uc1" TagName="StyleSheetSelector" Src="controls/StyleSheetSelector.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>
<%=PageTitle%>
</title>
<cc1:metatag id="MetaDescriptionControl" runat="server" MetaTagName="Description"></cc1:metatag>
<cc1:metatag id="MetaKeywordsControl" runat="server" MetaTagName="Keywords"></cc1:metatag>
<cc1:CSSTag id="CSSTag1" runat="server"></cc1:CSSTag>
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</HEAD>
<body>
<form id="Form1" runat="server">

<div class="container2">
<div class="linestrip">
<table cellspacing="0" cellpadding="0" border="0" id="container">
<tr>
<td><uc1:header id="Header1" runat="server"></uc1:header></td>
</tr>
<tr>
<td id="PageHome">
<div id="maincontent">
<table id="HomeTable" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="HomeColumn1"><uc1:ContentColumn ColumnNumber="1" id="ContentColumn1" runat="server"></uc1:ContentColumn></td>
<td id="HomeColumn3"><uc1:ContentColumn ColumnNumber="3" id="ContentColumn3" runat="server"></uc1:ContentColumn></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td><uc1:footer id="Footer1" runat="server"></uc1:footer></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</HTML>


Header.ascx:
<%@ Register TagPrefix="mbrw" Namespace="MetaBuilders.WebControls" Assembly="MetaBuilders.WebControls.RemoteWindow" %>
<%@ Register TagPrefix="uc1" TagName="MiniCartTotals" Src="controls/MiniCartTotals.ascx" %>
<%@ Register TagPrefix="uc1" TagName="HeaderSearch" Src="controls/SearchBox.ascx" %>
<%@ Control Language="vb" CodeBehind="Header.ascx.vb" AutoEventWireup="false" Inherits="Header" targetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<%@ Register TagPrefix="uc1" TagName="LoginStatusControl" Src="controls/LoginStatusControl.ascx" %>
<%@ Register TagPrefix="uc1" TagName="MainMenu" Src="controls/MainMenu.ascx" %>
<%@ Register TagPrefix="cc1" Namespace="BVSoftware.WebControls" Assembly="BVSoftware.WebControls.Library1" %>
<%' © 2003 BV Software LLC %>
<div id="header">
      <div id="BrandingArea">
            <div id="Logo"><A href="default.aspx" target="_self" id="lnkHome" runat="server"></A><IMG id="LogoImage" src="images/logo.gif" border="0" runat="server"></div>
            <div id="ShoppingCartLink"><asp:hyperlink id="lnkCart" Runat="server" NavigateUrl="cart.aspx">Shopping Cart</asp:hyperlink></div>
            
            
            <uc1:minicarttotals id="MiniCartTotals1" runat="server"></uc1:minicarttotals>
                              
                              <div id="searchheader"><uc1:HeaderSearch id="HeaderSearch1" runat="server"></uc1:HeaderSearch></div>

                        <div id="hidefootermenu">
                        
                              <asp:hyperlink id="lnkMyAccount" Runat="server" NavigateUrl="myaccount_orders.aspx">My Account</asp:hyperlink>
                        
                              <asp:hyperlink id="lnkCustomerService" Runat="server" NavigateUrl="contact.aspx">Customer Service</asp:hyperlink>
                        
                              <asp:hyperlink id="lnkSearch" Runat="server" NavigateUrl="search.aspx">Search</asp:hyperlink>
                  </div></div>
                  
      </div>
      <div id="MainMenu">
            <uc1:MainMenu id="MainMenu1" runat="server"></uc1:MainMenu>
      </div>

<!-- DHTML Menu Builder Loader Code START -->
<div id=DMBRI style="position:absolute; left: 223px; top: 144px;">
<img src="menus/images/dmb_i.gif" name=DMBImgFiles width="1" height="1" border="0" alt="">
<img src="menus/dmb_m.gif" name=DMBJSCode width="1" height="1" border="0" alt="">
</div>
<script language="JavaScript" type="text/javascript">
var rimPath=null;var rjsPath=null;var rPath2Root=null;function InitRelCode(){var iImg;var jImg;var tObj;if(!document.layers){iImg=document.images['DMBImgFiles'];jImg=document.images['DMBJSCode'];tObj=jImg;}else{tObj=document.layers['DMBRI'];if(tObj){iImg=tObj.document.images['DMBImgFiles'];jImg=tObj.document.images['DMBJSCode'];}}if(!tObj){window.setTimeout("InitRelCode()",700);return false;}rimPath=_gp(iImg.src);rjsPath=_gp(jImg.src);rPath2Root=rjsPath+"../";return true;}function _purl(u){return xrep(xrep(u,"%%REP%%",rPath2Root),"\\","/");}function _fip(img){if(img.src.indexOf("%%REL%%")!=-1) img.src=rimPath+img.src.split("%%REL%%")[1];return img.src;}function _gp(p){return p.substr(0,p.lastIndexOf("/")+1);}function xrep(s,f,n){if(s) s=s.split(f).join(n);return s;}InitRelCode();
</script>
<script language="JavaScript" type="text/javascript">
function LoadMenus() {if(!rjsPath){window.setTimeout("LoadMenus()", 10);return false;}var navVer = navigator.appVersion;
if(navVer.substr(0,3) >= 4)
if((navigator.appName=="Netscape") && (parseInt(navigator.appVersion)==4)) {
document.write('<' + 'script language="JavaScript" type="text/javascript" src="' + rjsPath + 'nsluggageandleather.js"><\/script\>');
} else {
document.write('<' + 'script language="JavaScript" type="text/javascript" src="' + rjsPath + 'ieluggageandleather.js"><\/script\>');
}return true;}LoadMenus();</script>
<!-- DHTML Menu Builder Loader Code END -->


Footer.ascx:
<%@ Register TagPrefix="cc1" Namespace="BVSoftware.WebControls" Assembly="BVSoftware.WebControls.Library1" %>
<%@ Control Language="vb" CodeBehind="Footer.ascx.vb" AutoEventWireup="false" Inherits="Footer" %>
<%' © 2003 BV Software LLC %>
<div id="footer">
      <p align="center" id="footermenu"><a href="default.aspx" target="_self"><img src="/images/bot_Home.gif" width="40" height="12" border="0"></a><img src="/images/bot_spacer.gif" width="41" height="12"><img src="/images/bot_Your_Account.gif" width="77" height="11"><img src="/images/bot_spacer.gif" width="41" height="12"><img src="/images/bot_Customer_service.gif" width="97" height="9"><img src="/images/bot_spacer.gif" width="41" height="12"><img src="/images/bot_Privacy_Policy.gif" width="78" height="12"><img src="/images/bot_spacer.gif" width="41" height="12"><img src="/images/bot_Shipping_Policy.gif" width="83" height="12"><img src="/images/bot_spacer.gif" width="41" height="12"><img src="/images/bot_phone.gif" width="89" height="12"></p>
      <div id="hidefootermenu"><asp:hyperlink id="linkHome" runat="server">Home</asp:hyperlink>&nbsp;&nbsp;
            <asp:hyperlink id="linkCart" runat="server">View Cart</asp:hyperlink>&nbsp;&nbsp;
            <asp:hyperlink id="linkMyAccount" runat="server">My Account</asp:hyperlink>&nbsp;&nbsp;            
            <asp:hyperlink id="linkPrivacy" runat="server">Privacy Policy</asp:hyperlink>
        <div id="hidefootermenu"><asp:HyperLink ID="linkCustomerService" runat="server">CustomerService</asp:HyperLink>
        </div>            
            <div id="footercustommenu"><asp:PlaceHolder id="CustomPagesPlaceHolder" runat="server"></asp:PlaceHolder></div>
      
      <div id="copyright">
            <asp:Label ID="lblCopyright" Runat="server" /></div></div>
<div id="poweredby">
  <asp:Label ID="PoweredBy" runat="server" />
      </div></div>
      

Avatar of reinis
reinis
The problem most likely exists in your CSS.

Ensuring that your website looks the same across all browsers can be a very difficult and time consuming thing to accomplish. Many developers spend quite some time creating hacks or workarounds to ensure that their page looks the same in IE as well as Mozilla and Opera browsers.

I would also suggest using a validator to help find bugs in your HTML so that you could correct them. You can try http://validator.w3.org/ or to see all the errors that exist on your page:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.passportluggage.com%2F

By correcting these issues, you will ensure that your HTML conforms to standards.

Then again, if you're happy with how it looks in IE, which has about 90% market share, how much time are you willing to spend trying to fix things for the other browsers.

Rei.
ASKER CERTIFIED SOLUTION
Avatar of James Rodgers
James Rodgers
Flag of Canada image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Peter Wilcox
Peter Wilcox
Flag of United States of America image

ASKER

Thanks... Jester 48 I was able to get rid of the space.  I have all the closing tags if you look closely..  

I still can't get the page to display mozilla in the correct field's for some reason...  
Avatar of dorward
dorward
It looks like you are trying to center a block using the text-align property, but this property doesn't center blocks. Your choice of Doctype (HTML 4.01 Transitional without a URL) is throwing Internet Explorer into Quirks mode, this causes it to emulate a bug in Internet Explorer 5.x in which text-align does center blocks.

See http://dorward.me.uk/www/centre/#block for an explanation on how blocks should be centered.

(As others have said - get your code to conform to standards, its a lot easier to debug then).
Avatar of James Rodgers
James Rodgers
Flag of Canada image
glad i could help

thanks for teh points