drop down menu looks very strange

tonyx666 · Aug 18, 2006

hi, this is a strange problem and it is annoying me.. and it seems to be only happening in firefox and not in ie which is surprising.

http://londonheathrowcars.com/newest/index.asp if you look at this page in firefox, you can see that there is the time and date just under the menu.. the time and date are in an iframe..

if you hold the mouse over fleet.. you will see that the first two items.. saloon and estate look weird (mash up as we say in london)

i think this is because the menu items appear directly above the border of the iframe..

firstly can anyone else see this annoyance and secondly is there any way to get rid of it..

below is my page code and my stylesheet..
thank you in advance for those of you very kind people that use your time to help others..

the page..

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>

<head>

<title>Heathrow Airport Taxi | UK Transfer Service | 24 Hour London Cars</title>

<meta name="description" content="We are an established London based company located 5 minutes away from Heathrow Airport. We provide reliable 24 hour taxi services and private hire transfers to and from all UK destinations.">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="external.js"></script>
<script type="text/javascript" src="menu.js"></script>

<!--[if IE]>
<script type="text/javascript">
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;
</script>
<![endif]-->

</head>

<body>

<div id="wrap">
		
<div id="top">
</div>

<div id="menu">

<ul id="nav">
			<li><a href="index.asp">Home</a></li>
			
			<li><a href="##">Services</a> 
				<ul>
					<li><a href="transfer-service.asp">Our Services</a></li>
					<li><a href="airport-transfers.asp">Airport Transfers</a></li>
					<li><a href="seaport-transfers.asp">Seaport Transfers</a></li>
					<li><a href="executive-chauffeur.asp">Executive Travel</a></li>
					<li><a href="day-hire.asp">Day Hire</a></li>
        		</ul>
			</li>

	        <li><a href="##">Fleet</a> 
				<ul>
					<li><a href="saloon-car.asp">Saloon</a></li>
					<li><a href="estate-car.asp">Estate</a></li>
					<li><a href="mpv-car.asp">People Carrier</a></li>
					<li><a href="minivan-car.asp">9-Seater</a></li>
					<li><a href="executive-car.asp">Executive</a></li>

				</ul>
			</li>

	        <li><a href="##">Accounts</a> 
				<ul>
					<li><a href="current-account.asp">Existing Customers</a></li>
					<li><a href="open-account.asp">Open Account</a></li>
				</ul>
			</li>

			<li><a href="##">Rates</a> 
				<ul>
					<li><a href="price-search.asp">Quote Finder</a></li>
				</ul>
			</li>

			<li><a href="taxi-booking.asp">Bookings</a></li>

			<li><a href="taxi-enquiry.asp">Enquiries</a></li>

			<li><a href="##">Info</a> 
				<ul>
					<li><a href="heathrow-airport.asp">Heathrow Guide</a></li>
					<li><a href="meet-driver.asp">Meeting Your Driver</a></li>
					<li><a href="transfer-faqs.asp">Faqs</a></li>
					<li><a href="terms-conditions.asp">Terms & Conditions</a></li>
					<li><a href="pco-guide.asp">Public Carriage Office</a></li>
					<li><a href="site-map.asp">Sitemap</a></li>
				</ul>
			 </li>

			<li><a href="##">Links</a> 
				<ul>
					<li><a href="heathrow-links.asp">Heathrow Airport</a></li>
					<li><a href="ukairport-links.asp">Other UK Airports</a></li>
					<li><a href="london-links.asp">London</a></li>
					<li><a href="uk-links.asp">United Kingdom</a></li>
					<li><a href="worldwide-links.asp">Worldwide</a></li>
				</ul>
			</li>

			<li><a href="transfer-contact.asp">Contact</a></li>
		</ul>

  </div>	

<div id="footer">

<table border="0" id="table4" cellspacing="0" cellpadding="0">
	<tr>
		<td width="166" align="left" valign="top">

<form method="link" action="price-search.asp"><p class="mainbody"><input type="submit"  style="margin-left:0px;background-color:#F99C08;font-weight:bold;font-size:14px;font-family:arial;color:#fff;width:100px;height:32px;" value="Quick Quote"><br><b>&nbsp;Click for Prices</b></p></form>

		</td>
		<td width="203" align="left" valign="top">

<iframe src="[URL unfurl="true"]http://free.timeanddate.com/clock/i3lygb8/n136/fs12/fc666/tcf9f9f9/ahl/avt/ftb/tt0/ts1/tb4"[/URL] frameborder="0" width="200" height="32" name="I1"></iframe>

		</td>
		<td valign="top" align="left" width="364">


<table border="0" width="374" id="table5" cellspacing="0" cellpadding="0">
	<tr>
		<td width="35">&nbsp;</td>
		<td width="85"><script language="javascript" src="[URL unfurl="true"]http://zazachat.zazasoftware.com/LiveChatClient/scripts/zazamagic.aspx?zimg=289&zazac=1686&iv=&iwidth=85&iheight=44"></script></td>[/URL]
		<td width="35">&nbsp;</td>
		<td valign="top" align="left" width="219"><p class="mainishother"><b>Click the Live Help button to chat online with one of our operators or leave us a message. </b></p></td>
	</tr>
</table>




</td>
	</tr>
</table>

</div>

<div id="bleft">
<h1 class="top">London Heathrow Cars</h1>
				<p class="mainbody">We are an established Heathrow based company. We specialise in reliable <b>24 Hour Taxi</b> services to and from <b>London Heathrow</b> (LHR). Our main base is located five minutes away from Heathrow Airport which allows us to provide reliable pick-ups and drop-offs.<br><br>We can also provide transfers between London and any destination in the UK.<br><br>Our team of trained staff will do everything they can to make your journey quick, safe and stress free. We will provide you with your own vehicle and driver during your transfer and you will never have to share this vehicle with an unknown passenger. Your driver will assist you with your luggage and wait for you whilst you change money or visit the bathroom. Just let us know what you need and we will do all we can to help.</p>
				<img class="baitpic" src="images\Heathrow-Airport-Planes.jpg" alt="Heathrow Planes">
<br><br>

</div>

<div id="bog">
</div>

<div id="bot">
</div>
			
</div>

</body>

</html>

the stylesheet

Code:

*	
{margin:0;padding:0;}

body
{background-color:#EBEBEB;}

/*DIVS*/

div#wrap
{width:750px;position:absolute;left:50%;margin: 0 0 0 -375px;border:1px solid #666666;background-color:#ffffff;}

div#top	
{width:750px;height:170px;background-color:#666666;}

div#menu
{background-color:#fff; padding-top:0px;}

div#bleft
{width:374px;background-color:#fff;float:left;text-align:left;}

div#bright
{width:374px;background-color:#fff;float:right;text-align:left;}

div#bog
{width:374px;background-color:#fff;float:right;text-align:left;}

div#footer
{margin-top:26px;width:750px;background-color:#F9F9F9;height:60px;padding-top:15px;}

div#main
{width:750px;background-color:#ffffff;}

div#bot{width:750px;background-color:#ffffff;clear:both;}

a.faqlist {color:#F99C08;}
/*MENU*/


img.weather {margin-top:10px;}

	#menu a,#menu li li a{
	float:left;
	width:73px;
	display:block;
	font-family:arial;
	font-size:80%;
	font-weight:120;
	color: #666666;
	padding:.3em 0 .3em 0 ;
	text-decoration: none;
	text-align: center;
	border-width:1px 1px 1px 1px;
	border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
	border-style:solid;

	}
	
	#menu .bccor{border-color:#ffffff #ffffff #ffffff #ffffff;}
	
	#menu li li a{
	background: #EBEBEB;
	}
	
	/*#menu li li{height:50px;}*/
	
	#menu ul{
	padding:0;
	margin:0;
	list-style: none;
	}
	
	#menu li{
	position:relative;
	float: left;
	width:75px;
	
	}
	
	#menu li {margin:0 0px 0 0;}/*margin between top li*/	
	#menu li li{margin:0px 0 0 0;}/*margin between li li*/
	
	li ul{display:none;}
	
	li li,li:hover ul,li.over ul{display:block;}
	
	#nav li li a{
	border-color:#EBEBEB #EBEBEB #EBEBEB #EBEBEB;
	}
	
	#nav li li a:hover{
	display:block;
	background:#666666;
	border-width:1px 1px 1px 1px;
	border-color:#666666 #666666 #666666 #666666;
	font-family:arial;
	font-size:80%;
	font-weight:120;
	color: #F99C08;
	}
	.text{float:left;margin-top:30px;width:600px;}

	#menu{position:relative;}
	#nav{position:absolute;top:0;left:0;}

come on the gunners!

Vragabond · Aug 18, 2006

In my Mozilla, the menu items actually appear behind the date/time box. Which makes me think if the user really needs that -- we all probably have a clock somewhere (on the computer or not) that we usually check for time rather than just some website.

tonyx666 · Aug 20, 2006

yes but you are missing the point my friend

the time and date displayed is for LONDON

we have visitors from all over the world loggin on, planning their journey from the airport, we wish to associate our site more strongly with the city of LONDON.. thats why its there

you really need to think outside the box sometimes my friend.

come on the gunners!

Vragabond · Aug 20, 2006

Friend, thanks for that explanation. I would go to the asp forum (forum333) -- since you seem to be using asp -- and ask them how to show the current time on the website, since it is a pretty simple task. Therefore you can just response.write that time and date in a span element or something and get rid of the iframe altogether. Because I will re-instate my belief (albeit it might be stuck in a box) that I would rather know what the second option in the 'Fleet' dropdown is than what the local time is in London.

ChrisHunt · Aug 21, 2006

Well, it looks to be a rendering bug in FF caused by displaying the drop-down text over an <iframe>. So if you want to fix it, something's gotta give.

Like Vrag, I'd take the date/time off altogether, it always strikes me as a pointless thing to include. Sure, I suppose some people might look at it, apply their encyclopedic knowlege of time zone differences, and think "Oh, they're in London (or Dublin, or Lisbon, or Algiers, or Lagos...)". Some might look at it and think your clock is wrong. Maybe you'd be better off with a picture of Big Ben & the London Eye?

If you wanna keep the time, just get it from asp and write it out staticly to the page, there's no reason to put it in an iframe.

If you're determined to stick with the iframe method too, try moving it around a few pixels to minimise the mash up effect.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

tonyx666 · Aug 21, 2006

ok, good points all round as always..

the problem is i tried displaying the time of london is asp and it was very tricky.. i couldnt manage it, and nobody could offer me a solution after weeks of posting like a desperate maniac..

i was able to display the current time of my server, but the server is not in london and the time was an hour off, then we tried cutting that hour off the time.. but that also didnt work..

but i say it again, we get so many callers asking us what the time is in london, what the weather is like.. the currency exchange rate.. etc.. so we are choosing to display all this information in the future on the site..

do you think i could just display the time in a div rather than an iframe.. would that do the trick?

come on the gunners!

ChrisHunt · Aug 21, 2006

I don't speak asp, but a little googling threw up the [tt]DateAdd[/tt] function. To tweak the current date/time by an hour, do something like this

Code:

tweakedtime = DateAdd("h", -1, Now())

Having local information about London sounds like a good idea, btw, though I'd probably put it all on a seperate page. You can sign up at weather.com to get current weather forecasts onto your site - though perhaps your customers are more interested in "what's the weather like in London in July?" rather than specific weather forecasts. (The answer is, of course, "Your guess is as good as mine, but it probably won't snow". How I love British weather... )

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

tonyx666 · Aug 25, 2006

thanks

Heathrow Taxis

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

drop down menu looks very strange

tonyx666

MIS

Vragabond

Programmer

tonyx666

MIS

Vragabond

Programmer

ChrisHunt

Programmer

tonyx666

MIS

ChrisHunt

Programmer

tonyx666

MIS

Similar threads

Part and Inventory Search

Sponsor