How to position labels and textboxes with a css

This should be very simple! I am a novice in web development, 5+ years experience in MS Access. I try to develop tableless and learn css to position labels, textboxes, dropdownlists, images, etc. The code below does work in IE. Labels on top textboxes, dropdown neatly positioned under the labels. Firefox meshes everything up and I can't find a way to use css in firefox. What am I doing wrong? Please help!
ul#UserSignUp
{
    margin: 0 auto 0 auto;
    padding: 0;
    list-style-type: none;
    font-size: 9px;
    color: #5A5A5A;
    font-weight: bold;
}
ul#UserSignUp a:link, ul#UserSignUp a:visited
{
    color: #5A5A5A;
    font-weight: 700;
}
#UserSignUp li
{
    margin: 0 auto 0 auto;
    padding: 0;
    list-style-type: none;
    padding-top: 7px;
}
#UserSignUp li span
{
    position: absolute;
    left: 29px;
    margin-top: 6px;
}
 
#UserSignUp li input
{
    position: absolute;
    left: 29px;
    margin-top: -4px;
    width: 150px;
    height: 13px;
    font-size: 10px;
    color: #5A5A5A;
}
 
#UserSignUp li select
{
    position: absolute;
    left: 29px;
    margin-top: 0px;
    height: 18px;
    font-size: 10px;
    color: #5A5A5A;
}
#UserSignUp li img
{
    position: absolute;
    left: 163px;
    margin-top: -1px;
    height: 18px;
    font-size: 10px;
    color: #5A5A5A;
}

Open in new window

PdeLormeAsked:
Who is Participating?
 
LocoTechCJConnect With a Mentor Commented:
Well, one thing to note is that different browsers all have their standard css layouts by default that inherently affects your page.   In your case, it's affecting the margins and padding somehow.  I'll see if I can find out where.  Many designers use a standard css first in all of their designs to reset the browsers default css to a level playing field.  That is the concept of yahoo's reset css: http://developer.yahoo.com/yui/reset/ .  While it provides a level playing field among browsers, it also requires a little more work of the designer to style a page.  You can see the before and after simply by adding the line shown on the referenced page above.  You have to place it ABOVE your css on your page.

With that said, I'm looking at your code to see where it can be ajusted as well.

--LTCJ
0
 
LocoTechCJCommented:
Do you have an example of your html page?

--LTCJ

PS - I hate to bear the bad news, but catering your CSS to IE will usually break everything but IE unless the CSS is VERY generic.  I found it helpfull to develop using Firefox and then make necessary workarounds for IE.
0
 
PdeLormeAuthor Commented:
       <ul id="UserSignUp">
            <li><asp:Label ID="Label6" runat="server">City or <a href='airport.aspx'target='_blank'>Airport</a></asp:Label></li>
            <li><asp:textbox runat="server" id="CityAirport"/></li>
            <li><asp:Label ID="Label2" runat="server" Text="Check-in / Check-out"></asp:Label></li>
                <cc1:CalendarExtender ID="CalendarExtender1" runat="server" CssClass="cal_Theme1"
                    Format="ddd, MMM dd, yyyy" onclientdateselectionchanged="checkDate"
                    PopupButtonID="imgCal" TargetControlID="CheckInCheckOut">
            </cc1:CalendarExtender>
            <li><asp:textbox runat="server" id="CheckInCheckOut" Width="125" /></li>
            <asp:Image ID="imgCal" runat="server" ImageUrl="~/Images/icon-calendar.gif" />
            <li><asp:Label ID="Label3" runat="server" Text="Star rating"></asp:Label></li>
            <li><asp:DropDownList ID="StarRating" runat="server">
                <asp:ListItem Value="3">***</asp:ListItem>
                <asp:ListItem Value="4">****</asp:ListItem>
                <asp:ListItem Value="5">*****</asp:ListItem>
                <asp:ListItem Selected="True" Value="0"> Not sorted</asp:ListItem>
            </asp:DropDownList></li>
            <li><asp:Label ID="Label5" runat="server" Text="Aantal"></asp:Label></li>    
            <li><asp:DropDownList ID="Aantal" runat="server">
                <asp:ListItem Value="1"></asp:ListItem>
                <asp:ListItem Value="2"></asp:ListItem>
                <asp:ListItem Value="3"></asp:ListItem>
            </asp:DropDownList></li>
        </ul>
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LocoTechCJCommented:
Sorry, I don't mean to be pushy, but could you post the source view of the page you get when you use firefox?  Just right-click and "view page source"

--LTCJ
0
 
PdeLormeAuthor Commented:
I hope this helps:



<!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><title>
 
</title>
<link href="../MainStyle.css" rel="stylesheet" type="text/css" /><link href="../Calendar.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function noenter() {
        return !(window.event && window.event.keyCode == 13); }
        function checkDate(sender, args) {
            if (sender._selectedDate < new Date())
                var theDate = new Date();  // you get the actual date
                theDate.setDate(theDate.getDate() + 1); // now is theDate set plus one day.
            {
                alert("Please select a day in the future!");
                sender._selectedDate = theDate;
                // set the date back to the current date
                sender._textbox.set_Value(sender._selectedDate.format(sender._format))
            }
        }    
    </script>
<link href="/BookNEW/WebResource.axd?d=houd52XD-pJlKn9dSV0RUcSO1l_nF-Mu0MOo1FGBoKXDriXk_X_dUifcoIBsVcRK9Qv-dgOoA-oXbRXhSosikA2&amp;t=633608818596875000" type="text/css" rel="stylesheet" /><style type="text/css">
	.ctl00_MainMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
	.ctl00_MainMenu_1 { text-decoration:none; }
	.ctl00_MainMenu_2 {  }
	.ctl00_MainMenu_3 { color:#5A5A5A; }
	.ctl00_MainMenu_4 { padding:2px 5px 2px 5px; }
	.ctl00_MainMenu_5 { color:#5A5A5A; }
	.ctl00_MainMenu_6 { padding:2px 4px 2px 4px; }
	.ctl00_MainMenu_7 { color:#F89844; }
	.ctl00_MainMenu_8 { color:#F89844; }
	.ctl00_MainMenu_9 { color:#F89844; }
	.ctl00_MainMenu_10 { color:#F89844; }
	.ctl00_FooterMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
	.ctl00_FooterMenu_1 { text-decoration:none; }
	.ctl00_FooterMenu_2 {  }
	.ctl00_FooterMenu_3 { color:#5A5A5A; }
	.ctl00_FooterMenu_4 { padding:0px 5px 0px 5px; }
	.ctl00_FooterMenu_5 { color:#F89844; }
	.ctl00_FooterMenu_6 { color:#F89844; }
 
</style></head>
<body>
    <form name="aspnetForm" method="post" action="Copy (2) of search.aspx" id="aspnetForm">
<div>
 
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE5NzMxMzI3NDQPZBYCZg9kFgICAw9kFgQCCw88KwANAgAPFgIeC18hRGF0YUJvdW5kZ2QMFCsAAgUDMDowFCsAAhYOHgRUZXh0BQRCb29rHgVWYWx1ZQUEQm9vax4LTmF2aWdhdGVVcmwFGS9Cb29rTkVXL0hvbWUvU2VhcmNoLmFzcHgeB0VuYWJsZWRnHgpTZWxlY3RhYmxlZx4IRGF0YVBhdGgFGS9ib29rbmV3L2hvbWUvc2VhcmNoLmFzcHgeCURhdGFCb3VuZGcUKwADBQcwOjAsMDoxFCsAAhYOHwEFDk15IHJlc2VydmF0aW9uHwIFDk15IHJlc2VydmF0aW9uHwMFKS9Cb29rTkVXL015UmVzZXJ2YXRpb24vTXlSZXNlcnZhdGlvbi5hc3B4HwRnHwVnHwYFKS9ib29rbmV3L215cmVzZXJ2YXRpb24vbXlyZXNlcnZhdGlvbi5hc3B4HwdnZBQrAAIWDB8BBQ1QYXJ0bmVyIGhvdGVsHwIFDVBhcnRuZXIgaG90ZWwfBGcfBWgfBgUkN2YwYWUxODMtYmRiYS00NjZkLWIwMjUtYThkZWIzN2IyZmY1HwdnFCsAAwUHMDowLDA6MRQrAAIWDh8BBQVMb2dpbh8CBQVMb2dpbh8DBSAvQm9va05FVy9QYXJ0bmVySG90ZWwvTG9naW4uYXNweB8EZx8FZx8GBSAvYm9va25ldy9wYXJ0bmVyaG90ZWwvbG9naW4uYXNweB8HZ2QUKwACFg4fAQUOSG93IHRvIHNpZ24tdXAfAgUOSG93IHRvIHNpZ24tdXAfAwUhL0Jvb2tORVcvUGFydG5lckhvdGVsL1NpZ25VcC5hc3B4HwRnHwVnHwYFIS9ib29rbmV3L3BhcnRuZXJob3RlbC9zaWdudXAuYXNweB8HZ2RkAg8PPCsADQIADxYCHwBnZAwUKwACBQMwOjAUKwACFg4fAQUOUHJpdmFjeSBub3RpY2UfAgUOUHJpdmFjeSBub3RpY2UfAwUcL0Jvb2tORVcvRm9vdGVyL1ByaXZhY3kuYXNweB8EZx8FZx8GBRwvYm9va25ldy9mb290ZXIvcHJpdmFjeS5hc3B4HwdnFCsAAwUHMDowLDA6MRQrAAIWDh8BBRJUZXJtcyAmIGNvbmRpdGlvbnMfAgUSVGVybXMgJiBjb25kaXRpb25zHwMFGi9Cb29rTkVXL0Zvb3Rlci9UZXJtcy5hc3B4HwRnHwVnHwYFGi9ib29rbmV3L2Zvb3Rlci90ZXJtcy5hc3B4HwdnZBQrAAIWDh8BBQpDb250YWN0IHVzHwIFCkNvbnRhY3QgdXMfAwUcL0Jvb2tORVcvRm9vdGVyL0NvbnRhY3QuYXNweB8EZx8FZx8GBRwvYm9va25ldy9mb290ZXIvY29udGFjdC5hc3B4HwdnZGQYAgUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFI2N0bDAwJExvZ2luVmlldzEkTG9naW5TdGF0dXMyJGN0bDAxBSNjdGwwMCRMb2dpblZpZXcxJExvZ2luU3RhdHVzMiRjdGwwMwUQY3RsMDAkTG9naW5WaWV3MQ8PZAIBZA1eXbRKvOBCFpS3Vh4jLaNvXwmM" />
</div>
 
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<script src="/BookNEW/WebResource.axd?d=SbAU37fVTCvxrt8iLwKXow2&amp;t=633546771493281250" type="text/javascript"></script>
 
 
<script src="/BookNEW/ScriptResource.axd?d=0ERkuX_UGZa1XFsMqeSGsrUDajVIKNQhrGQXj-Pbtif9MHFlyrys49lPfhJD1Z2U0&amp;t=ffffffff9fbba729" type="text/javascript"></script>
<script src="/BookNEW/ScriptResource.axd?d=V8a8ZFMBpMuNdmrr4KeGRff3wGApUwFz3UYGCXEcuMjrt7n7biakfLCCEIatChJFVFEPsIsZsT7-y1gEh9J4smWZfJWf3_G_eAQ9j-goaME1&amp;t=56d6e21f" type="text/javascript"></script>
 
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
 
<script src="/BookNEW/ScriptResource.axd?d=V8a8ZFMBpMuNdmrr4KeGRff3wGApUwFz3UYGCXEcuMjrt7n7biakfLCCEIatChJFlVJXPNz-YAvViGdw8peRD7aKRHR-NeWmWzTz-gJW9RBWxeWlPbRS2FaGsjvs7_G00&amp;t=56d6e21f" type="text/javascript"></script>
<script src="/BookNEW/ScriptResource.axd?d=gXR8PDgnrp_vsq2ooXGZGxEgt9DGTMTDamt4GqZu_VUslyvItGyaBSvVyVaWtuKPPasjp3LkpBzk-iFhkzMrXA2&amp;t=7cc3880" type="text/javascript"></script>
<script src="/BookNEW/ScriptResource.axd?d=gXR8PDgnrp_vsq2ooXGZGxEgt9DGTMTDamt4GqZu_VXPtnORQvs33p5JGnVN8ABYK41qyhFRmBujGjiBHS4v-Q2&amp;t=7cc3880" type="text/javascript"></script>
<script src="/BookNEW/ScriptResource.axd?d=gXR8PDgnrp_vsq2ooXGZGxEgt9DGTMTDamt4GqZu_VUEUOXJ8TojTE_cBe2pN5NP0u9EvzTJWPfeySgGgMTxUA2&amp;t=7cc3880" type="text/javascript"></script>
<script src="/BookNEW/ScriptResource.axd?d=gXR8PDgnrp_vsq2ooXGZGxEgt9DGTMTDamt4GqZu_VWhMA-x8NDgLOUsVPd_P0f8yzA5G1tiVphp7uIdvesOng2&amp;t=7cc3880" type="text/javascript"></script>
<script src="/BookNEW/ScriptResource.axd?d=gXR8PDgnrp_vsq2ooXGZGxEgt9DGTMTDamt4GqZu_VVfs4XECkgMOaM4ioWz32LtUeXy02lxxpf_VWjBl3sXYLrrU8Kyx0ON9cIjiHy5p8A1&amp;t=7cc3880" type="text/javascript"></script>
<script src="/BookNEW/ScriptResource.axd?d=gXR8PDgnrp_vsq2ooXGZGxEgt9DGTMTDamt4GqZu_VWhMA-x8NDgLOUsVPd_P0f8aN7pXRJflIJaUMbEmIaphjtHx929_k3-Wg4iig4ktZQ1&amp;t=7cc3880" type="text/javascript"></script>
 
<script src="/BookNEW/ScriptResource.axd?d=gXR8PDgnrp_vsq2ooXGZGxEgt9DGTMTDamt4GqZu_VXPKk3vmFQnYHY1TmdLpab9CyYmackfv5sYKQ4KP3lteSzhQDU3UgooQ-8KuTiRHjM1&amp;t=7cc3880" type="text/javascript"></script>
<script src="/BookNEW/ScriptResource.axd?d=gXR8PDgnrp_vsq2ooXGZGxEgt9DGTMTDamt4GqZu_VW_SeX1DbaQcdisbd3oL93FHP3m1CPW8ZVE-UDq3tuCEg2&amp;t=7cc3880" type="text/javascript"></script>
<script src="/BookNEW/ScriptResource.axd?d=gXR8PDgnrp_vsq2ooXGZGxEgt9DGTMTDamt4GqZu_VV_tN5LlByECmvdaGCUqqnpYrFJrFx-zPlUUudgXJiN_dilTbuM7XA7Yt41IRnv_2w1&amp;t=7cc3880" type="text/javascript"></script>
<div>
 
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwLIjLTBAwK0t+TfBQKIie/6DQKcn86TBwLB7pD3DALA7pD3DALH7pD3DALc7pD3DALqy67VBwLry67VBwLoy67VBwJLrXaAtSbTFe7+ulCEsX3EYh20" />
</div>
    
    
    <div id="container">
        <div id="header">
            <div id="logo">
 
                <img id="ctl00_Image1" src="../Images/logo.gif" style="border-width:0px;width: 502px; height: 48px" />
            </div>
            <div id="login">
                
                        Welcome, 
                        <span id="ctl00_LoginView1_LoginName1">DELORME\Peter</span>!
                        <br />
                        <a id="ctl00_LoginView1_LoginStatus2" href="javascript:__doPostBack('ctl00$LoginView1$LoginStatus2$ctl00','')">Logout</a>
                    
               </div>
        </div>
 
        <div id="line">
            <div id="lineL">
                <span id="ctl00_SiteMapPath1" style="color:#707070;font-family:Tahoma;font-size:12pt;"><a href="#ctl00_SiteMapPath1_SkipLink"><img alt="Skip Navigation Links" height="0" width="0" src="/BookNEW/WebResource.axd?d=R3p3T9HoUzRpeSSp2paU7Q2&amp;t=633546771493281250" style="border-width:0px;" /></a><a id="ctl00_SiteMapPath1_SkipLink"></a></span>
            </div>
            <div id="lineR">
                <a href="#ctl00_MainMenu_SkipLink"><img alt="Skip Navigation Links" src="/BookNEW/WebResource.axd?d=R3p3T9HoUzRpeSSp2paU7Q2&amp;t=633546771493281250" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_MainMenu" class="ctl00_MainMenu_2" cellpadding="0" cellspacing="0" border="0" style="text-align: left">
	<tr>
		<td><img src="../Images/menuButton.gif" alt="" /></td><td onmouseover="Menu_HoverRoot(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_MainMenun0"><table class="ctl00_MainMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
 
				<td style="white-space:nowrap;"><a class="ctl00_MainMenu_1 ctl00_MainMenu_3" href="/BookNEW/Home/Search.aspx">Book</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td><table border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr>
				<td><img src="../Images/menuButton.gif" alt="" /></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_MainMenun1"><table class="ctl00_MainMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
					<tr>
						<td style="white-space:nowrap;"><a class="ctl00_MainMenu_1 ctl00_MainMenu_3" href="/BookNEW/MyReservation/MyReservation.aspx">My reservation</a></td>
					</tr>
 
				</table></td><td style="width:3px;"></td><td><img src="../Images/menuButton.gif" alt="" /></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_MainMenun2"><table class="ctl00_MainMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
					<tr>
						<td style="white-space:nowrap;"><a class="ctl00_MainMenu_1 ctl00_MainMenu_3" href="#" style="cursor:text;">Partner hotel</a></td>
					</tr>
				</table></td>
			</tr>
		</table><div id="ctl00_MainMenun2Items" class="ctl00_MainMenu_0">
			<table border="0" cellpadding="0" cellspacing="0">
 
				<tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_MainMenun3">
					<td><table class="ctl00_MainMenu_6" cellpadding="0" cellspacing="0" border="0" width="100%">
						<tr>
							<td style="white-space:nowrap;width:100%;"><a class="ctl00_MainMenu_1 ctl00_MainMenu_5" href="/BookNEW/PartnerHotel/Login.aspx">Login</a></td>
						</tr>
					</table></td>
				</tr><tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_MainMenun4">
					<td><table class="ctl00_MainMenu_6" cellpadding="0" cellspacing="0" border="0" width="100%">
 
						<tr>
							<td style="white-space:nowrap;width:100%;"><a class="ctl00_MainMenu_1 ctl00_MainMenu_5" href="/BookNEW/PartnerHotel/SignUp.aspx">How to sign-up</a></td>
						</tr>
					</table></td>
				</tr>
			</table><div class="ctl00_MainMenu_6 ctl00_MainMenu_0" id="ctl00_MainMenun2ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
				<img src="/BookNEW/WebResource.axd?d=rfx6BbYSykUSlOiv7N9dowp9ekMT16IsTEkCNnBRJ_01&amp;t=633546771493281250" alt="Scroll up" />
			</div><div class="ctl00_MainMenu_6 ctl00_MainMenu_0" id="ctl00_MainMenun2ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
 
				<img src="/BookNEW/WebResource.axd?d=9Brb4ebrMe-TZLyVUwjBUSY_oyh2GKy0e_AtB6s6QZU1&amp;t=633546771493281250" alt="Scroll down" />
			</div>
		</div></td>
	</tr>
</table><a id="ctl00_MainMenu_SkipLink"></a>
            </div>
        </div>
        <div id="contentplaceholder1">
            
    <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ContentPlaceHolder1$ScriptManager1', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
 
</script>
 
    <div>
        <ul id="UserSignUp">
            <li><span id="ctl00_ContentPlaceHolder1_Label6">City or <a href='airport.aspx'target='_blank'>Airport</a></span></li>
            <li><input name="ctl00$ContentPlaceHolder1$CityAirport" type="text" id="ctl00_ContentPlaceHolder1_CityAirport" /></li>
            <li><span id="ctl00_ContentPlaceHolder1_Label2">Check-in / Check-out</span></li>
                
            <li><input name="ctl00$ContentPlaceHolder1$CheckInCheckOut" type="text" id="ctl00_ContentPlaceHolder1_CheckInCheckOut" style="width:125px;" /></li>
 
            <img id="ctl00_ContentPlaceHolder1_imgCal" src="../Images/icon-calendar.gif" style="border-width:0px;" />
            <li><span id="ctl00_ContentPlaceHolder1_Label3">Star rating</span></li>
            <li><select name="ctl00$ContentPlaceHolder1$StarRating" id="ctl00_ContentPlaceHolder1_StarRating">
	<option value="3">***</option>
	<option value="4">****</option>
	<option value="5">*****</option>
	<option selected="selected" value="0"> Not sorted</option>
 
</select></li>
            <li><span id="ctl00_ContentPlaceHolder1_Label5">Aantal</span></li>    
            <li><select name="ctl00$ContentPlaceHolder1$Aantal" id="ctl00_ContentPlaceHolder1_Aantal">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
 
</select></li>
 
        </ul>
    </div>
 
        </div>
        <div id="footer">
            <div id="footerR">
                <a href="#ctl00_FooterMenu_SkipLink"><img alt="Skip Navigation Links" src="/BookNEW/WebResource.axd?d=R3p3T9HoUzRpeSSp2paU7Q2&amp;t=633546771493281250" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_FooterMenu" class="ctl00_FooterMenu_2" cellpadding="0" cellspacing="0" border="0" style="text-align: left">
	<tr>
		<td><img src="../Images/menuButton.gif" alt="" /></td><td onmouseover="Menu_HoverRoot(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_FooterMenun0"><table class="ctl00_FooterMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
 
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_FooterMenu_1 ctl00_FooterMenu_3" href="/BookNEW/Footer/Privacy.aspx">Privacy notice</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td><table border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr>
				<td><img src="../Images/menuButton.gif" alt="" /></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_FooterMenun1"><table class="ctl00_FooterMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
					<tr>
						<td style="white-space:nowrap;"><a class="ctl00_FooterMenu_1 ctl00_FooterMenu_3" href="/BookNEW/Footer/Terms.aspx">Terms & conditions</a></td>
 
					</tr>
				</table></td><td style="width:3px;"></td><td><img src="../Images/menuButton.gif" alt="" /></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_FooterMenun2"><table class="ctl00_FooterMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
					<tr>
						<td style="white-space:nowrap;"><a class="ctl00_FooterMenu_1 ctl00_FooterMenu_3" href="/BookNEW/Footer/Contact.aspx">Contact us</a></td>
					</tr>
				</table></td>
			</tr>
		</table></td>
 
	</tr>
</table><a id="ctl00_FooterMenu_SkipLink"></a>
            </div>
            <div id="footerL">
                &copy; 2008 Book, LLC. All rights reserved.
            </div>
        </div>
    </div>
    
 
<script type="text/javascript">
//<![CDATA[
var ctl00_MainMenu_Data = new Object();
ctl00_MainMenu_Data.disappearAfter = 500;
ctl00_MainMenu_Data.horizontalOffset = 2;
ctl00_MainMenu_Data.verticalOffset = 0;
ctl00_MainMenu_Data.hoverClass = 'ctl00_MainMenu_10';
ctl00_MainMenu_Data.hoverHyperLinkClass = 'ctl00_MainMenu_9';
ctl00_MainMenu_Data.staticHoverClass = 'ctl00_MainMenu_8';
ctl00_MainMenu_Data.staticHoverHyperLinkClass = 'ctl00_MainMenu_7';
var ctl00_FooterMenu_Data = new Object();
ctl00_FooterMenu_Data.disappearAfter = 500;
ctl00_FooterMenu_Data.horizontalOffset = 0;
ctl00_FooterMenu_Data.verticalOffset = 0;
ctl00_FooterMenu_Data.staticHoverClass = 'ctl00_FooterMenu_6';
ctl00_FooterMenu_Data.staticHoverHyperLinkClass = 'ctl00_FooterMenu_5';
Sys.Application.initialize();
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.CalendarBehavior, {"button":$get("ctl00_ContentPlaceHolder1_imgCal"),"cssClass":"cal_Theme1","format":"ddd, MMM dd, yyyy","id":"ctl00_ContentPlaceHolder1_CalendarExtender1"}, {"dateSelectionChanged":checkDate}, null, $get("ctl00_ContentPlaceHolder1_CheckInCheckOut"));
});
//]]>
 
</script>
</form>
</body>
</html>

Open in new window

0
 
PdeLormeAuthor Commented:
I found another issue with the calendar. It pops up behind some of the objects. I've tried to put a z-index on the objects and calendar. Still it pops up behind the select and label objects. Perhaps I should consider using a table in combination with css. This way my calendar pops up correctly and I have no problems formatting the objects correctly in different browsers. Please advice. Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.