menu distorting for no apparent reason

antonyx · #1 (**permalink**) Aug 18th, 2006, 19:12

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: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<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="http://free.timeanddate.com/clock/i3lygb8/n136/fs12/fc666/tcf9f9f9/ahl/avt/ftb/tt0/ts1/tb4" 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="http://zazachat.zazasoftware.com/LiveChatClient/scripts/zazamagic.aspx?zimg=289&zazac=1686&iv=&iwidth=85&iheight=44"></script></td>
        <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: Select all

*    
{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;}

ukgeoff · #2 (**permalink**) Aug 18th, 2006, 21:37

Looks the same to me in Firefox and IE on an XP system.

Broken in Opera 9 because it doesnt like the use of the iframe.

I think you will find that the iframe is a deprecated tag and should not be used in strict doctypes.

You don't need it anyway. Use a <div> instead.

antonyx · #3 (**permalink**) Aug 20th, 2006, 20:35

oh yeahhh, why didnt i think of that..l

antonyx · #4 (**permalink**) Aug 21st, 2006, 12:56

ok well i am trying to use a div..

i simply tried this..

<div src="http://free.timeanddate.com/clock/i3lygb8/n136/fs12/fc666/tcf9f9f9/ahl/avt/ftb/tt0/ts1/tb4" frameborder="0" width="200" height="32"></div>

and it didnt work.. how can i change it to work?

ukgeoff · #5 (**permalink**) Aug 21st, 2006, 14:21

Quote:

Originally Posted by antonyx

ok well i am trying to use a div..

i simply tried this..

<div src="http://free.timeanddate.com/clock/i3lygb8/n136/fs12/fc666/tcf9f9f9/ahl/avt/ftb/tt0/ts1/tb4" frameborder="0" width="200" height="32"></div>

and it didnt work.. how can i change it to work?

You could start by using proper markup and standard attributes.

What's this 'frameborder' nonsense?

And div's don't have a src. Do you think you've missed something out.

Used the same page link as before and that still has the above src as that of an img tag inside a td tag.

antonyx · #6 (**permalink**) Aug 21st, 2006, 14:26

please be gentle.. the iframe code i used was simply auto generated from this site:
http://www.timeanddate.com

i tried using that src in an image tag and it was just blank.

moojoo · #7 (**permalink**) Aug 21st, 2006, 14:31

Use a div and do an include if you really want to have the frame effect and link to and external file within the div.

antonyx · #8 (**permalink**) Aug 21st, 2006, 15:07

what do you mean an include?

moojoo · #9 (**permalink**) Aug 21st, 2006, 16:00

Something like
<?php include("foo.php"); ?> which will bring in an outside file and display its contents.

antonyx · #10 (**permalink**) Aug 21st, 2006, 18:11

well i have microsoft hosting so i will need an asp way of doin so..

also would i be able to just use the include inside a table cell, or would i have to create a div and then include it.

moojoo · #11 (**permalink**) Aug 21st, 2006, 18:27

ASP Way:

antonyx · #12 (**permalink**) Aug 21st, 2006, 19:49

i have taken the easy way out and removed the submenu items from the fleet tab..

making a website is about compromise..

content, accessibility, technologies, usability, presentation.... etc.. as i am sure you guys are aware..

i have decided to do this because rite now i dont have the time to fix it.. thank you for your suggestions however.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Navigation not working for no apparent reason	elephantinc	Flash & Multimedia Forum	4	Feb 16th, 2008 18:45
Resizing swfs without distorting content	erictomlinson	Flash & Multimedia Forum	4	Aug 6th, 2007 17:56
I have a normal css menu, but want ot add drop down menu to it	multichild	Web Page Design	7	Jan 9th, 2007 16:07
Scroll bar appearing at botom of site for some reason	jj1234	Web Page Design	1	Jan 30th, 2006 12:24

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
menu distorting for no apparent reason