Link to home
Start Free TrialLog in
Avatar of G0ggy
G0ggyFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Layout and CSS problems with Firefox

Hi all,

I have a problem with Firefox, yes I know, the problem is really with IE as Firefox is just being compliant, however the site was developed in IE under VS2008 so I need to go back and make everything line up. Please find attached some images and code, as you can see, where IE displays everything just fine, FF is dropping some styles and alignments.

Can you see in my code why things are not being picked up?

Thanks
MASTER PAGE:
 
<%@ Master Language="VB" CodeFile="2-col-v3.master.vb" Inherits="secure_masterpages_2colnew"  %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>JCB Training</title>
    
    <link rel="stylesheet" type="text/css" href="../../App_Themes/jcb-v3/jcb-v3.css" />
    <link rel="stylesheet" type="text/css" href="../../App_Themes/jcb-v3/layout-v3.css" />
    <link rel="stylesheet" type="text/css" href="../../App_Themes/jcb-v3/ratings.css" />
    
    <script type="text/javascript" src="../js/popWindow.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="wrapper">
        <div class="header">
            <table width="100%" style="height:90px;">
            <tr>
                <td>
                    <div class="welcometext">
                        <asp:Label ID="lblWelcomeMessage" Text="Welcome to JCB Training" runat="server"></asp:Label>    
                    </div>
                </td>
                <td style="text-align:right; vertical-align:middle;">
                    <asp:Image ID="imgJCBLogo" ImageAlign="middle" CssClass="jcblogo" ImageUrl="~/secure/images/logos/jcb-logo.png" 
                         AlternateText="JCB Training Logo" runat="server" />    
                </td>
            </tr>
            </table>
        </div>
        
        <div class="menu">
            <asp:Menu ID="mainMenu" runat="server" Orientation="horizontal" DisappearAfter="1000" Font-Names="Arial" 
                Font-Size="9" Width="100%" CssClass="menu" BorderStyle="None"
                
                StaticEnableDefaultPopOutImage="true"
                StaticPopOutImageTextFormatString="More..."
                StaticPopOutImageUrl="~/secure/images/app_gfx/down-arrow-light.gif"
                
                StaticMenuItemStyle-HorizontalPadding="4px"
                StaticMenuItemStyle-ForeColor="#ffffff"
                StaticMenuItemStyle-VerticalPadding="0"
                                
                StaticMenuStyle-HorizontalPadding="4px"
                StaticMenuStyle-VerticalPadding="0"  
                StaticMenuStyle-ForeColor="#ffffff"
                StaticMenuStyle-Font-Bold="false" 
                StaticMenuStyle-Font-Size="9"
                StaticMenuStyle-Font-Names="Arial"
                StaticMenuStyle-Height="22"
                
                StaticHoverStyle-ForeColor="#ffcc00"
                StaticHoverStyle-Font-Names="Arial"
                StaticHoverStyle-Font-Size="9"
                StaticHoverStyle-Font-Bold="false"
                
                DynamicVerticalOffset="5" 
                DynamicHorizontalOffset="3"
                DynamicEnableDefaultPopOutImage="true"
                DynamicPopOutImageUrl="~/secure/images/app_gfx/right-arrow-light.gif"
                DynamicPopOutImageTextFormatString="More..."
                
                DynamicMenuStyle-HorizontalPadding="2"
                DynamicMenuStyle-VerticalPadding="0"
                DynamicMenuStyle-ForeColor="#ffffff"
                DynamicMenuStyle-Width="170"
                DynamicMenuStyle-Font-Names="Arial"
                DynamicMenuStyle-Font-Size="9"
                DynamicMenuStyle-Font-Bold="false"
                DynamicMenuStyle-Height="22"
                DynamicMenuStyle-BorderStyle="None"
                DynamicMenuStyle-BackColor="#282728"
                              
                DynamicMenuItemStyle-HorizontalPadding="2"
                DynamicMenuItemStyle-VerticalPadding="0"
                DynamicMenuItemStyle-ForeColor="#ffffff"
                DynamicMenuItemStyle-BackColor="#282728"
                DynamicMenuItemStyle-Width="170"
                DynamicMenuItemStyle-ItemSpacing="0"
                DynamicMenuItemStyle-Font-Names="Arial"
                DynamicMenuItemStyle-Font-Bold="false"
                DynamicMenuItemStyle-Font-Size="9"
                DynamicMenuItemStyle-Height="22"
                DynamicMenuItemStyle-BorderStyle="None"
                
                DynamicHoverStyle-ForeColor="#ffcc00"
                DynamicHoverStyle-BackColor="#000000"
                DynamicHoverStyle-Font-Names="Arial"
                DynamicHoverStyle-Font-Bold="false"
                DynamicHoverStyle-Font-Size="9"
                DynamicHoverStyle-Height="22"
                dynamichoverstyle-borderstyle="None"
                DynamicHoverStyle-Width="170">
                
            </asp:Menu>
        </div>
            
        <div class="smalllink">
            <asp:SiteMapPath ID="smpMain" CssClass="sitemappath" runat="server"></asp:SiteMapPath>
        </div>
        
        <div class="mainContent">
            <asp:ContentPlaceHolder ID="cphNew2ColMain" runat="server"></asp:ContentPlaceHolder>
        </div>
        
        <div class="rightContent">
            <asp:ContentPlaceHolder ID="cphNew2ColRight" runat="server"></asp:ContentPlaceHolder>
        </div>
    </div>
    <div class="footer" style="text-align:center;">
        <table class="form" width="100%">
        <tr>
            <td>
                <asp:Label ID="lblVersionInfo" CssClass="smalltext" runat="server"></asp:Label>
            </td>
            <td>
                <asp:Label ID="lblCopyright" Text="&copy; 2005-2008 J C Bamford Excavators Ltd" CssClass="smalltext" runat="server"></asp:Label>
            </td>
            <td>
                <asp:HyperLink ID="hplPrivacy" Text="Privacy Policy" NavigateUrl="~/public/information/privacyPolicy-v3.aspx" CssClass="smalllink" runat="server"></asp:HyperLink>         
            </td>
            <td>
                <asp:HyperLink ID="hplDPA" Text="Data Protection" NavigateUrl="~/public/information/dataProtection-v3.aspx" CssClass="smalllink" runat="server"></asp:HyperLink>         
            </td>
            <td>
                <asp:LinkButton ID="lnbRemoveLoginCookies" Text="Remove Cookies" CssClass="smalllink" runat="server"></asp:LinkButton>
            </td>
        </tr>
        <tr>
            <td colspan="5">
                <asp:GridView ID="cookies" EmptyDataText="No cookie values" Width="100%" SkinID="normalgridview" runat="server"></asp:GridView>                
            </td>
        </tr>
        </table>
    </div>
    </form>
</body>
</html>
 
 
 
 
 
LOGIN PAGE:
 
<%@ Page Language="VB" MasterPageFile="~/secure/masterpages/2-col-v3.master" Theme="jcb-v3" AutoEventWireup="false" CodeFile="login-v3.aspx.vb" Inherits="public_login_login_v3" title="JCB Training :: Login" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cphNew2ColMain" Runat="Server">
    <asp:Panel ID="pnlSessionExpiredMessage" Visible="false" runat="server">
        <div class="pagetext">
            <asp:Label ID="lblSessionMessage" Text="Your session has expired, please login again." Visible="False" 
                runat="server" meta:resourcekey="lblSessionMessageResource1"></asp:Label>
        </div>
    </asp:Panel>
 
    <div class="pagetitle">
        <asp:Image ID="imgLogin" ImageUrl="~/secure/images/pageicons/padlock.gif" ImageAlign="Middle" runat="server" />&nbsp;
        <asp:Label ID="lblLoginText" runat="server"></asp:Label>        
    </div>
 
    <asp:Panel ID="pnlLogin" DefaultButton="btnLogIn" runat="server" meta:resourcekey="pnlLoginResource2">
        <div class="formwrapper">
            <div class="formlinewrapper">
                <div class="requiredfieldinformation">
                    <asp:Label ID="lblRequiredFieldInformation" Text="<b>Bold</b> fields are required" runat="server"></asp:Label>
                </div>
            </div>
            
            <div class="formlinewrapper">
                <div class="formprompt">
                    <asp:Label ID="lblLoginPromptEmail" Text="Email" Font-Bold="true" runat="server"></asp:Label>    
                </div>
                <div class="forminput">
                    <asp:TextBox ID="txtEmailAddress" Width="200px" runat="server"></asp:TextBox>
                    <br />
                    <asp:RequiredFieldValidator ID="rfvEmailAddress" ControlToValidate="txtEmailAddress" ErrorMessage="Your email address cannot be blank" 
                        Display="Dynamic" CssClass="fielderror" runat="server" meta:resourcekey="rfvEmailAddressResource1"></asp:RequiredFieldValidator>   
                </div>
            </div>
            
            <div class="formlinewrapper">
                <div class="formprompt">
                    <asp:Label ID="lblLoginPromptPassword" Text="Password" Font-Bold="true" runat="server" meta:resourcekey="lblLoginPromptPasswordResource2"></asp:Label>      
                </div>
                <div class="forminput">
                    <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" meta:resourcekey="txtPasswordResource1"></asp:TextBox>    
                    <br />
                    <asp:RequiredFieldValidator ID="rfvPassword" ControlToValidate="txtPassword" Text="Please enter your password" Display="Dynamic" 
                        SkinID="fielderror" runat="server" meta:resourcekey="rfvPasswordResource1"></asp:RequiredFieldValidator> 
                </div>
            </div>
            
            <div class="formlinewrapper">
                <div class="forminput">
                    <asp:Button ID="btnLogin" Text="Login" runat="server" />
                </div>
            </div>
            
            <div class="formlinewrapper"> 
                <div class="formmessages">
                    <asp:Label ID="lblMessages" runat="server"></asp:Label>
                </div>
            </div>
        </div>
 
        <br />
 
        <div class="subtitlebar">
            <asp:Label ID="lblDealerCodeSubTitle" Text="Dealer Code" SkinID="subtitle" runat="server"></asp:Label>
        </div>
 
        <div class="pagetext">
            <asp:Image ID="imgDealer" ImageAlign="middle" ImageUrl="~/secure/images/pageicons/man-hardhat.gif" runat="server" />&nbsp;
            <asp:Label ID="lblDealerLoginIntro" Text="Your Dealer Code is only required for JCB Dealerships, users can ignore this field" CssClass="pageText" runat="server" meta:resourcekey="lblDealerLoginIntroResource1"></asp:Label>    
        </div>
 
        <div class="formwrapper">
            <div class="formprompt">
                <asp:Label ID="lblLoginPromptDealerCode" Text="Enter Dealer Code" runat="server"></asp:Label>        
            </div>
            
            <div class="forminput">
                <asp:TextBox ID="txtDealerCode" MaxLength="6" runat="server" meta:resourcekey="txtDealerCodeResource1"></asp:TextBox>&nbsp;
                <asp:HyperLink ID="hplDealerCodeHelp" NavigateUrl="javascript:popUp('../../public/information/dealerCodeExplanation.htm')" Text="(what is this?)" CssClass="smalllink" runat="server"></asp:HyperLink>
            </div>
        </div>
    </asp:Panel>
</asp:Content>
 
<asp:Content ID="Content2" ContentPlaceHolderID="cphNew2ColRight" Runat="Server">
    <div class="rightsubtitlebar">
        <asp:Label ID="lblQuickLinks" Text="Quick Links" SkinID="subtitle" runat="server"></asp:Label>
    </div>
 
    <div class="pagetext">
        <asp:HyperLink ID="hplNotRegistered" Text="Register at JCB Training"  NavigateUrl="~/public/register/register-v3.aspx" 
            CssClass="hyperlink" runat="server" meta:resourcekey="hplNotRegisteredResource1"></asp:HyperLink>
        <br />&nbsp;<br /> 
        <asp:HyperLink ID="lblPasswordReminder" Text="Password Reminder" NavigateUrl="~/public/login/passwordReminder-v3.aspx" 
            CssClass="hyperlink" runat="server" meta:resourcekey="lblPasswordReminderResource1"></asp:HyperLink>
        <br />&nbsp;<br />
        <asp:HyperLink ID="hplConfirmEmail" Text="Email Confirmation" NavigateUrl="~/public/register/confirmEmail-v3.aspx"
             CssClass="hyperlink" runat="server"></asp:HyperLink>
    </div>
    
    <br />
    
    <div class="rightsubtitlebar">
        <asp:Label ID="lblChangeLanguage" Text="Change Language" SkinID="subtitle" runat="server"></asp:Label>
    </div>
    
    <div class="pagetext">
        <asp:Label ID="lblChangeLanguageIntro" runat="server"></asp:Label>
    </div>
    
    <br />
 
    <div class="formwrapper">
        <div class="formlinewrapper">
            <div class="forminput">
                <asp:DropDownList ID="ddlLanguage" DataValueField="languageID" DataTextField="languageFull" 
                    ValidationGroup="languages" runat="server"></asp:DropDownList>
                <br />
                <asp:RequiredFieldValidator ID="rfvLanguage" ControlToValidate="ddlLanguage" ValidationGroup="languages" 
                    InitialValue="-- select language --" ErrorMessage="Nothing selected" Display="dynamic" 
                    CssClass="fielderror" runat="server"></asp:RequiredFieldValidator>
            </div>
        </div>
        
        <div class="formlinewrapper">
            <div class="forminput">
                <asp:Button ID="btnSelectLanguage" Text="Change" ValidationGroup="languages" runat="server" />
            </div>
        </div>
    </div>
</asp:Content>
 
 
 
 
 
LAYOUT CSS:
 
body 
{
	margin-top:5px;
	height:87%;
	background-color:#fde9b5;
	margin-left:5px;
	margin-right:5px;
}
 
.wrapper
{
	background-color:#ffffff;
	padding:15px 15px 15px 15px;
	width:97%;
	height:100%;
	padding-bottom:10px;
	vertical-align:top;
	display:block;
}
 
.mainContent
{
	float:left;
	background-color:#ffffff;
	vertical-align:top;
	width:66%;
	display:block;
}
 
.rightContent
{
	clear:left;
	float:right;
	background-color:#ffffff;
	vertical-align:top;
	width:31%;
	border:solid 1px #ff5c00;
	padding-bottom:10px;
	padding-right:0px;
	position:relative;
	display:block; 
}
 
.footer
{
	padding:15px 5px 0px 5px;
	clear:both;
	float:none;
	width:97%;
}
 
.header
{
	background:#000000 url(../../secure/images/banners/blackbg-repeater.png) repeat-x;
	width:100%;
	vertical-align:middle;
	padding-left:15px;
	height:90px;
}
 
.menu
{
	clear:both;
	width:101.30%;
	background:#000000 url(../../secure/images/backgrounds/reverse-dk-bg-grad.png) repeat-x;
}
 
.menuitem
{
	background:#000000 url(../../secure/images/backgrounds/dark-gray-bg-grad.png) repeat-x;
}
 
.jcblogo
{
	padding-right:15px;
}
 
.formwrapper
{
	width:99%;
	background-color:#d5ddf3;
	border:solid 1px #3366cc;
}
 
.formlinewrapper
{
	width:100%;
	margin-bottom:10px;
	clear:left;
	float:left;
	border-bottom:dotted 1px #99ccff;
}
 
.formprompt
{
	width:25%;
	font-family:Tahoma;
	font-weight:Normal;
	font-size:13px;
	float:left;
	padding-left:5px;
	padding-top:5px;
	text-align:left;
}
 
.forminput
{
	width:73%;
	float:right;
	padding-top:5px;
	text-align:left;
	font-family:Verdana;
	font-weight:normal;
	font-size:12px;
}
 
.formmessages
{
	width:100%;
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;
	padding-bottom:5px;
	text-align:left;
	font-family:Verdana;
	font-weight:normal;
	font-size:12px;
	color:#0033ff;
}
 
.requiredfieldinformation
{
	font-family:Tahoma;
	font-size:12px;
	padding-left:2%;
	padding-bottom:10px;
	padding-top:10px;
	border-bottom:dotted 1px #464646;
	vertical-align:middle;
	width:15%;
}
 
.subtitlebar
{
	width:98%;
	background:#295a8f url(../../secure/images/backgrounds/blue-bg-grad.png) repeat-x;
	vertical-align:middle;
	height:22px;
	padding-top:5px;
	padding-left:10px;
	padding-bottom:5px;
}
 
.rightsubtitlebar
{
	width:100%;
	background:#ff5c00 url(../../secure/images/backgrounds/right-subtitle-bg-grad.png) repeat-x;
	vertical-align:middle;
	height:22px;
	padding-left:10px;
	margin-bottom:10px;
}
 
.missionstatementwrapper
{
	padding-left:10px;
	padding-right:10px;
	text-align:justify;
}
 
.photo
{
	margin-top:10px;
	margin-bottom:10px;
	margin-left:10px;
}
 
.imgWrapper
{
	margin:10px 0px 10px 10px;
	background:url(../../images/backgrounds/shadow.png) no-repeat bottom right;
	float:left;
	position:relative;
}
 
.imgWrapperFooter
{
	margin:10px 0px 10px 10px;
	float:left;
	position:relative;
}
 
.imgWrapper img
{
	background-color:#ffffff;
	border:solid 1px #a9a9a9;
	padding:4px;
	display:block;
	margin: -5px 5px 5px -5px;
	position:relative;
}
 
.alignright
{
	width:100%;
	padding-right:15px;
	text-align:right;
	font-family:Verdana;
	font-size:12px;
}
 
.aligncentre
{
	width:100%;
	text-align:center;
}
 
#homepageswrappper
{
	width:100%;
	vertical-align:top;
}
 
#homepagesleftcol
{
	width:33%;
	text-align:center;
	float:left;
}
 
#homepagesrightcol
{
	width:33%;
	text-align:center;
	float:right;
}
 
#homepagesmiddlecol
{
	width:33%;
	text-align:center;
	float:left;
}
 
.notes
{
	background-color:#ffffe1;
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:10px;
	border:solid 1px #666666;
}
 
.wizard td { vertical-align: top; }
 
 
 
 
 
 
STYLES CSS:
 
.pagetitle
{
	margin:5px 0px 15px 15px;
	font-family:Verdana;
	font-weight:900;
	font-size:20px;
	color:#464646;
}
 
.subtitle
{
	margin:0px 0px 0px 0px;
	font-family:Verdana;
	font-weight:700;
	font-size:14px;
	color:#ffffff;
	vertical-align:middle;
}
 
.pagetext
{
	margin:5px 5px 5px 5px;
	font-family:Verdana;
	font-size:12px;
	color:#464646;
	display:block;
}
 
.smalltext
{
	margin:5px 5px 5px 5px;
	font-family:Verdana;
	font-size:9px;
	color:#464646;
	display:block;
}
 
.sidebartitle
{
	margin:5px 0px 20px 15px;
	font-family:Verdana;
	font-weight:700;
	font-size:12px;
	color:#464646;
}
 
.welcometext
{
	font-family:Square 721 BT, Arial, Verdana;
	font-size:24px;
	color:#ffc218;
	font-weight:900;
}
 
.fielderror
{
	font-family:Verdana;
	font-size:12px;
	color:#ff0000;
	font-weight:bold;
}
 
.smalllink
{
	font-family:Verdana;
	font-size:9px;
	color:#1f527b;
}
 
.hyperlink
{
	color:#1f527b;
	font-size:12px;
	font-family:Verdana;
}
 
.sitemappath
{
	color:#1f527b;
	font-size:10px;
	font-family:Verdana;
}
 
.linkbutton
{
	color:#1f527b;
	font-size:12px;
	font-family:Verdana;
}
 
.newstitle
{
	color:#464646;
	font-size:11px;
	font-family:Verdana;
	font-weight:bold;
}
.newsdate
{
	color:#464646;
	font-size:12px;
	font-family:Verdana;
}
 
.newsarticle
{
	color:#464646;
	font-size:11px;
	font-family:Verdana;
}
 
.missionstatement
{
	font-size:11px;
	color:#464646;
	font-family:Verdana;
	font-style:italic;
}
 
.hiddenforminput
{
	background-color:#f2f2f2;
}
 
.question
{
	padding-bottom:10px;
	padding-top:20px;
}
 
.notestext
{
	font-family:Verdana, Arial, Sans-Serif;
	font-size:10px;
	color:#666666;
}
 
ol
{
	font-family:Verdana, Arial, Sans-Serif;
	font-size:12px;
	color:#464646;
	text-align:justify;
	padding-top:10px;
}
 
li
{
	padding-bottom:10px;
}

Open in new window

Firefox.gif
IE6.gif
ASKER CERTIFIED SOLUTION
Avatar of bluefezteam
bluefezteam
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 G0ggy
G0ggy
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

Solved it with a:

.clear
{
      clear:both;
}

<br /> class at the bottom of the form wrapper. Some points coming your way anyway.
Avatar of G0ggy
G0ggy
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

Just re-read, that's exactly what you put! Points are yours!
Avatar of bluefezteam
bluefezteam
excellent - amazing how many questions here relate to floats, when things look wonkey and floats are involved it's always my first point of call.

Good luck!
Avatar of bluefezteam
bluefezteam
Just dawned on me, your projects for JCB - I have a friend whose helping out at JCB in the west midlands, is this who you work for or is this a private project?
Avatar of G0ggy
G0ggy
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

It's who I work for, for me sins!
Avatar of bluefezteam
bluefezteam
ah ok - well JCB are currently sponsoring NSPCC and my friends working with them (for NSPCC) to achieve their charity goals.

I'm developing a flash based golf game for them at the mo, apparently you guys are having a Celebrity Golf Match to raise cash...