Solved

Layout and CSS problems with Firefox

Posted on 2008-06-17
7
3,786 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
[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
  • 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
Technology Partners: 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 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

Technology Partners: 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!

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

735 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