website style fine in IE but goes mental when in firefox

davetherave2

davetherave2

davetherave2

Soldato
Joined
27 Mar 2003
Posts
2,710
Well I am still fairly new to web stuff (i have about 4 months experience).

But I am now moving away from table based design to DIV based design and have got to grips with CSS (probably not the level of some of you lot but enough to understand how to get my site working).

the problem I have is that I have used IE 7 as my test browser and everything looks fine but when I used firefox all the object go all over the place.

Now is there a way that I can correct these issues.

now i'm not sure if I can post a link to the site as it will be used for business (not competitor but don't want to run the risk of breaking the rules).

the site is designed to allow delegates to book/ reserve a hotel place for an event



here is an example of my code.

master page:
Code: 
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="AllocationsOnline.master.cs" Inherits="AllocationsOnline.AllocationsOnline" %>

<!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="MainHeader"  runat="server" >
        <title>Zibrant Allocations Website</title>
        <link href="BaseStyle.css" type="text/css" rel="stylesheet"/>
    </head>
    <body id="MainBody" runat="server">
        <div id="MainContainer">
            <form id="MainForm" runat="server">
                <div id="Header" class="Header">
                    <a href="http://www.zibrant.co.uk">
                        <img src="http://preview.ibr.co.uk/allocationsonline/animage.jpg"alt="" />
                    </a> 
                </div>
    
                <div id="MainContent">
                    <asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </form>
            <div id="MainFooter" class="Footer">
            </div>
        </div>
        
</body>
</html>

default.aspx
Code: 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AllocationsOnline.Default" MasterPageFile="~/AllocationsOnline.Master" %>

<asp:Content ContentPlaceHolderID="MainContentPlaceHolder" runat="server">

<div id="MainContainer2" >
    <h3>
    Welcome to the Online Allocations System Please enter your event ID and authorisation code below
    </h3>
    <div id="LoginTable" class="LoginTable">
        <div id="loginLs" class="LoginTableLeft">
            <div id = "lbl1" class="LoginBlock">
                <asp:Label ID="lblEventID" Text="Event ID" runat="server"/>
            </div>
            <div id = "lbl2" class="LoginBlock">
                <asp:Label ID="lblAuthCode" Text="Auth Code" runat="server" />
            </div>
        </div>
        <div id="loginRs" class="LoginTableRight">
            <div id = "tbx1" class="LoginBlock">
                <asp:TextBox ID="tbxEventID" runat="server" />
            </div>
            <div id = "tbx2" class="LoginBlock">
                <asp:TextBox ID="tbxAuthCode" runat="server" />
            </div>
            <div id = "btnSub" class="LoginBlock">
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
        </div>
        </div>
        
    </div>
</div>




</asp:Content>

css used:
Code: 
.Header
{
	width:800px;
	border-bottom:solid 1px blue;
	float:left;
	margin:0px auto;
	text-align:left;
}

.Footer
{
	width:800px;
	border-top:solid 1px blue;
	float:left;
	margin:0px auto;
	text-align:left;
}
html
{
	text-align:center;
}


img
{
	border-width:0px;
}
#MainBody
{
	width:802px;
	margin:0px;
	text-align:left;
	padding:15px;
	border:1px dashed #333;
}

#MainContainer
{
	width:801px;
	margin:0px ;
	text-align:left;
	
	background-color:#eee;
}
#MainContainer2
{
	width:801px;
	margin:0px ;
	text-align:left;
	
	background-color:#eee;
}

h3
{
	text-align:center;
	background-color:Gray;
	color:White;
	overflow:hidden;
	
	
}
h4
{
	background-color:Gray;
	color:White;
}

.LoginTable
{
	text-align:left;
	border-width:0px;
	width:800px;
}

.LoginTableLeft
{
	float:left;
	text-align:right;
	width:400px;
	
}
.LoginTableRight
{
	float:right;
	text-align:left;
	width:399px;
	
}

.LoginBlock
{
	height:30px;
}

.HotelInfo
{
	width:800px;
	border-color:Black;
	border-style:solid;
	border-width:1px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.HotelInfo th
{
	width:100px;
	text-align:center;
	border-color:Black;
	border-style:groove;
	border-width:1px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.HotelInfo td
{
	width:100px;
	text-align:left;
	border-color:Black;
	border-style:groove;
	border-width:1px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}


.bottombuttons
{
	margin-left:250px;
	width:297px;
	background-color:navy; 
	height: 40px; 
	color: white;
	text-align:center; 
	float:none; 
	margin-top: 50px;
	
}

/*Page specific styles */

.GuaranteeSectionBreak
{
	width:800px;
}

.GuaranteeLeftColumn
{
	float:left;
	width:400px; 
	text-align:right;
}
.GuaranteeRightColumn
{
	float:right;
	width:399px; 
	text-align:left;
}

.GuaranteeItemBlock
{
	height:30px;
}
.GuaranteeItemBlockDble
{
	height:52px;
}




  /*css for Summary.aspx */

.SummaryTable
{
	width:800px;
	background-color:#eee;
}

.SummaryItemBlock
{
	height:30px;
	background-color:#eee;
}

.SummaryItemLeft
{
	width:400px;
	float:left;
	background-color:#eee;
	
	
	
	
}
.SummaryItemRight
{
	width:399px;
	float:right;
	background-color:#eee;
	
}

.PersonalSectionBreak
{
	width:800px;
	background-color:#eee;
}

.NextButton
{
	margin-left:-20px;
	margin-top:8px; 
	top:8px;
}

please feel free to advise on any improvements/things I am doing wrong.
If it is fine to post a link I can provide a test event for you to see how the site should work.
 
well the intention is that this site will have a base style and then we can use different style sheets based on client requirements.

In addition to trying to make this as secure (prevent sql injection and all the rest) as possible for the PCI compliance it really is pushing my novice skills to their limit.

So could someone tell me why the two browsers seem to treat the css differently?

plus any good resources on this both web and book based.

from the short time that I have been programming as a career I have learnt a lot and am really enjoying the different challenges that I come up against each day.

edit. I have been developing this against the xhtml traditional 1.0 profile is that the corret profile to use when testing/ validating my code.
I am using vs2005 to develop this site.
 
Last edited:
here is the site:

www.online.zibrant.co.uk/allocationsonline


(this can be removed should it break any rules)


if you use the following eventID and auth code this will get you into the site.

eventID = 5073
auth code = OYYHANOAEW

this is going to a test database so all information is for testing purposes.


Well this site will be used within business and I am guessing the majority of them will be using IE as their browser of choice so I could release it as it and then tweak the design at a later stage to get it more standards complianant to work with FF and other browsers.

Currently it is in its bare bones form so that I could get the feel right before it goes live.
 
Last edited:
I wasn't ware that this was such an issue. I am glad I asked the question now. :D

So in your eyes the best way is to develop a site in FF and then apply these IE conditional statements to the site.
Am I correct in thinking that IE 8.0 will be more standards compliant and can pass the (ACID test. Think thats what it is called). Does this mean that every site that looks ok now will have to be fixed if IE is rendering the code to a more standards level.

oh I have changed the link as well to the following:

www.online.zibrant.co.uk/allocationsonline

This was so I could enable SSL for the guarantee section and personal details.
 
You must log in or register to reply here.
Back
Top Bottom