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:
default.aspx
css used:
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.
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.
