Solved

Layout and CSS problems with Firefox

Posted on 2008-06-17
7
3,790 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
Industry Leaders: 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

Suggested Solutions

Title # Comments Views Activity
HTML INPUT 6 35
Incorrect css styling in footer 3 23
Add Rows on a Table 8 47
Undefined variable with $_POST in PHP 5 31
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

734 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