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
LVL 11
G0ggyAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
bluefezteamConnect With a Mentor Commented:
at the moment you float maincontent left and rightcontent right, applying a clearleft on the right CSS,

remove clear left and add a new div after these 2 called .clearFix.

.clearFix{clear:both;}

i think your layout issues are due to clearing the divs, I notice you apply it to the footer, but I believe thats the wrong place (or at least it needs another clearfix inside the containing div (warpper div?) it would be easier to bug fix if I could see the page working live and visualise the rendered code, but this is a start

        <div class="mainContent">
        </div>
       
        <div class="rightContent">
        </div>
        <div class="clearFix">
        </div>
0
 
G0ggyAuthor Commented:
Solved it with a:

.clear
{
      clear:both;
}

<br /> class at the bottom of the form wrapper. Some points coming your way anyway.
0
 
G0ggyAuthor Commented:
Just re-read, that's exactly what you put! Points are yours!
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
bluefezteamCommented:
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!
0
 
bluefezteamCommented:
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?
0
 
G0ggyAuthor Commented:
It's who I work for, for me sins!
0
 
bluefezteamCommented:
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...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.