Solved

Layout and CSS problems with Firefox

Posted on 2008-06-17
7
3,766 Views
Last Modified: 2013-12-07
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
0
Comment
Question by:G0ggy
  • 4
  • 3
7 Comments
 
LVL 10

Accepted Solution

by:
bluefezteam earned 500 total points
ID: 21802331
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
 
LVL 11

Author Comment

by:G0ggy
ID: 21802443
Solved it with a:

.clear
{
      clear:both;
}

<br /> class at the bottom of the form wrapper. Some points coming your way anyway.
0
 
LVL 11

Author Closing Comment

by:G0ggy
ID: 31467905
Just re-read, that's exactly what you put! Points are yours!
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 10

Expert Comment

by:bluefezteam
ID: 21802954
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
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21803757
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
 
LVL 11

Author Comment

by:G0ggy
ID: 21803799
It's who I work for, for me sins!
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21803828
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

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jQuery or CSS 9 38
C3-->D3 Line Chart 4 19
Google Chrome Notifications 2 30
Bootstrap input box width 2 16
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

762 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now