SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    bullet list arrange problem

    http://www.heathrowminicab.com/menu/transfer-faqs.asp

    if you mouse over Services..

    you will see that the menu displays BEHIND the faq bullet list..

    it appears in front of other text and headings.. but it doesnt appear in front of other bullets.. here is my style sheet.. the faq styles are in bold.. all the other ul and li styles are used to create my drop down..

    Code:
    body {margin:0; padding:0; background-color:#EBEBEB;}
    
    div#wrap {width:750px; position:absolute; left:50%; margin: 0 0 0 -375px; border:1px solid #666666; padding:0; background:#ffffff;}
    
    div#top {width:750px; height:160px; background:#666666; text-align:left;}
    
    div#menu {background:#fff; text-align:left; margin-top:25px; margin-left:35px;}
    
    div#main {background:#fff; text-align:left; width:750px; float:left; margin-top:35px;}
    
    div#bleft {width:374px; background:#fff; float:left; text-align:left; margin-top:35px;}
    
    div#bright {width:374px; background:#fff; float:right; text-align:left;}
    
    
    h1 {margin-top:0px; margin-left:35px; margin-bottom:30px; font-family:arial; color:#F99C08; font-size:13pt; font-weight:bold;}
    
    p.main {margin-top:0px; margin-left:35px; margin-bottom:30px; margin-right:40px; color:#666666;
    font-family:arial; font-size:9pt;}
    
    img.logo {float:left; margin-left:35px; margin-top:22px;}
    
    img {border:0px;}
    
    ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    
    li { /* all list items */
    	float: left;
    	position: relative;
    	background-color:#fff;
    }
    
    li ul { /* second-level lists */
    	display: none;
    	position: absolute;
    	top: 1.5em;
    	left: 0;
    	width: 10em;
    }
    
    li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    	top: auto;
    	left: auto;
    }
    
    li:hover ul, li.over ul { /* lists nested under hovered list items */
    	display: block;
    }
    
    
    ul.bullet {list-style-type: none; padding-left: 0; margin-left: 0px; margin-bottom:30px;}
    
    li.faq { margin-left:35px; background: url(arrowbullet.png) left center no-repeat }
    
    p.bullet {margin-top:0px; margin-left:35px; margin-bottom:5px; margin-right:10px; color:#666666; font-family:arial; font-size:9pt;}
    
    :link {color: #666666} :visited {color: #666666} a:active {color: #333333} a:hover {color: #F99C08}
    
    p.main6 {margin-top:10px; margin-left:35px; margin-bottom:0px; margin-right:35px; color:#666666;
    font-family:arial; font-size:9pt; font-weight:normal;}

  2. #2
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh dear.. and if you look at the page in IE it looks like a jigsaw puzzle.. WHY??? here is my page code aswell..

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    <head>
    <title>Heathrow Taxi | Minicab Travel Faqs | Airport Transfer Information</title>
    
    <meta name="description" content="Heathrow Travel Faqs. Questions about London Airport taxi transfer services, car travel and general Heathrow Airport Transport Information. Book a taxi to and from Heathrow.">
    <meta name="keywords" content="">
    
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <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>
    <script type="text/javascript" src="image.js">
    </script>
    <script type="text/javascript"> MM_preloadImages('fleet.jpg','fleet2.jpg','exec.jpg','exec2.jpg','acc.jpg','acc2.jpg','quote.jpg','quote2.jpg','air.jpg','air2.jpg','sea.jpg','sea2.jpg','day.jpg','day2.jpg','enq.jpg','enq2.jpg','book.jpg','book2.jpg','faq.jpg','faq2.jpg','site.jpg','site2.jpg','tc.jpg','tc2.jpg','gen.jpg','gen2.jpg','hotels.jpg','hotels2.jpg','events.jpg','events2.jpg','serv1.jpg','serv2.jpg','exacc.jpg','exacc2.jpg','openacc.jpg','openacc2.jpg')
    </script>
    
    
    <style type="text/css">
    #nav li ul li{
    position:relative;
    top:1px;
    }
    </style>
    
    
    </head>
    <body>
    <div id="wrap">
    
    
    <div id="top">
    <img class="logo" src="Heathrow-Minicab-Logo.jpg" title="Heathrow Minicab Header" alt="Heathrow Taxi Header Graphic"/>
    </div>
    
    
    <div id="menu">
    <ul id="nav">
    
    
    <li><a href="index.asp"><img src="home.jpg"/></a>
    		<ul>
    						
    		</ul>
    </li>
    
    
    <li><img src="services.jpg"/>
    		<ul>
    			<li><a href="transfer-service.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','serv2.jpg',1)"><img 
    src="serv1.jpg" name="Image1" width="144" height="26" border="0"></a></li>
    
    			<li><a href="taxi-fleet.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','fleet2.jpg',1)"><img 
    src="fleet.jpg" name="Image2" width="144" height="26" border="0"></a></li>
    
    				<li><a href="airport-transfers.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','air2.jpg',1)"><img 
    src="air.jpg" name="Image3" width="144" height="26" border="0"></a></li>
    
    	<li><a href="seaport-transfers.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','sea2.jpg',1)"><img 
    src="sea.jpg" name="Image4" width="144" height="26" border="0"></a></li>
    
    	<li><a href="executive-chauffeur.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','exec2.jpg',1)"><img 
    src="exec.jpg" name="Image5" width="144" height="26" border="0"></a></li>
    
    	<li><a href="day-hire.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','day2.jpg',1)"><img 
    src="day.jpg" name="Image6" width="144" height="26" border="0"></a></li>
    		</ul>
    	
    </li>
    
    <li><img src="accounts.jpg"/>
    		<ul>
    			<li><a href="existing-accounts.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','exacc2.jpg',1)"><img 
    src="exacc.jpg" name="Image7" width="144" height="26" border="0"></a></li>	
    
    <li><a href="open-account.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','openacc2.jpg',1)"><img 
    src="openacc.jpg" name="Image8" width="144" height="26" border="0"></a></li>
    		</ul>
    </li>
    
    <li><img src="rates.jpg"/>
    		<ul>
    			<li><a href="price-search.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','quote2.jpg',1)"><img 
    src="quote.jpg" name="Image9" width="144" height="26" border="0"></a></li>			
    		</ul>
    </li>
    
    
    <li><img src="enqbook.jpg"/>
    		<ul>
    			<li><a href="taxi-enquiries.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','enq2.jpg',1)"><img 
    src="enq.jpg" name="Image10" width="144" height="26" border="0"></a></li>
    
    <li><a href="taxi-bookings.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','book2.jpg',1)"><img 
    src="book.jpg" name="Image11" width="144" height="26" border="0"></a></li>
    		</ul>
    </li>
    
    
    <li><img src="info.jpg"/>
    		<ul>
    			<li><a href="transfer-faqs.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','faq2.jpg',1)"><img 
    src="faq.jpg" name="Image12" width="144" height="26" border="0"></a></li>
    
    <li><a href="terms-conditions.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','tc2.jpg',1)"><img 
    src="tc.jpg" name="Image13" width="144" height="26" border="0"></a></li>
    
    <li><a href="site-map.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image14','','site2.jpg',1)"><img 
    src="site.jpg" name="Image14" width="144" height="26" border="0"></a></li>
    
    		</ul>
    </li>
    
    
    <li><img src="links.jpg"/>
    		<ul>
    			<li><a href="heathrow-links.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image15','','gen2.jpg',1)"><img 
    src="gen.jpg" name="Image15" width="144" height="26" border="0"></a></li>
    
    <li><a href="heathrow-hotels.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image16','','hotels2.jpg',1)"><img 
    src="hotels.jpg" name="Image16" width="144" height="26" border="0"></a></li>
    
    <li><a href="uk-events.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image17','','events2.jpg',1)"><img 
    src="events.jpg" name="Image17" width="144" height="26" border="0"></a></li>
    
    		</ul>
    </li>
    
    <li><a href="contact-details.asp"><img src="contact.jpg"/></a>
    		<ul>
    						
    		</ul>
    </li>
    
    </ul>
    </div>
    <div id="main">
    <h1>Frequently Asked Questions</h1>
    
    <UL class="bullet">
    <LI class="faq"><p class="bullet"><a href="#one">How do I get a quote or make a booking?</a></p></li><br>
    <LI class="faq"><p class="bullet"><a href="#two">How do I meet my Driver at the Airport?</a></p></li><br>
    <LI class="faq"><p class="bullet"><a href="#three">What happens if my flight arrives late?</a></p></li><br>
    <LI class="faq"><p class="bullet"><a href="#four">Is there an extra charge for waiting time?</a></p></li><br>
    <LI class="faq"><p class="bullet"><a href="#five">How long will the Driver wait for me?</a></p></li><br>
    <LI class="faq"><p class="bullet"><a href="#six">How do I pay for my journey?</a></p></li><br>
    <LI class="faq"><p class="bullet"><a href="#seven">Must all bookings be made in advance?</a></p></li><br>
    <LI class="faq"><p class="bullet"><a href="#eight">Do you have account facilities?</a></p></li></ul>
    <br>
    
    <a name="one"><h1>How do I get a quote or make a booking?</h1></a>
    <p class="main6">Getting a quote or making a booking request couldn't be easier. You have 4 easy options:<br><br>
    <b>1.</b> Enquire or book by phone, contact us:<br><p class="main6">From the UK on: <b>020 8814 2727</b><br>From abroad on: <b>+44 20 8814 2727</b></p><p class="main6"><b>2.</b> Complete our online booking form - please go to our <a href="booking.asp">booking</a> section<br><br><b>3.</b> Send us information by fax:<br><p class="main6">From the UK on: <b>020 8399 6500</b><br>From abroad on: <b>+44 20 8399 6500</b></p><p class="main6"><b>4.</b> Drop us an email with your requirements at <a href="mailto:info@heathrowminicab.com"><b>info@heathrowminicab.com</b></a></p>
    <a href="#top"><p class="main6"><b>Back to top</b></p></a>
    <br><br><br>
    <a name="two"><h1>How do I meet my Driver at the Airport?</h1></a>
    <p class="main6">Our driver will meet you at the customs exit hall inside your arrival terminal. If you have requested the Meet & Greet service our driver will be holding a name board with your name clearly displayed on it. If you have provided a contact telephone number (such as a mobile number) then our driver can ring you upon your arrival. You will then be escorted to a conveniently parked vehicle and driven to your destination.</p>
    <a href="#top"><p class="main6"><b>Back to top</b></p></a>
    <br><br><br>
    <a name="three"><h1>What happens if my flight arrives late?</h1></a>
    <p class="main6">Our standard procedure involves 24 hour monitoring of all Heathrow arrival and departure flight times. Regardless of late or early arrivals, your driver will be there.</p>
    <a href="#top"><p class="main6"><b>Back to top</b></p></a>
    <br><br><br>
    <a name="four"><h1>Is there an extra charge for waiting time?</h1></a>
    <p class="main6">All of our quotes include up to 30 minutes waiting time. This waiting period begins at the time of your flight arrival. This means that even in the case of a late arrival, we wont start adding on minutes until your plane has actually landed. After 30 minutes there is an excess charge of 15.00 per hour (25p per minute).</p>
    <a href="#top"><p class="main6"><b>Back to top</b></p></a>
    <br><br><br>
    <a name="five"><h1>How long will the Driver wait for me?</h1></a>
    <p class="main6">In relation to an Airport meeting, once the allotted 30 minutes waiting time has expired, your driver will make extensive enquiries at the Airport (with Customs; your Airline; Airport information's paging system) before referring back to our office where further enquiries will be made. Only then will the driver be authorised to leave the terminal.</p>
    <a href="#top"><p class="main6"><b>Back to top</b></p></a>
    <br><br><br>
    <a name="six"><h1>How do I pay for my journey?</h1></a>
    <p class="main6">There are 3 ways of paying for your journey. You can pay by:<br><br>1. Cash Sterling (&#163)<br><br>
    2. Visa, MasterCard and Maestro in advance, subject to an 5% handling fee.<br><br>
    3. Cheques are accepted with a cheque guarantee card.</p>
    <a href="#top"><p class="main6"><b>Back to top</b></p></a>
    <br><br><br>
    <a name="seven"><h1>Must all bookings be made in advance?</h1></a>
    <p class="main6">It is advisable that bookings are made at least 24 hours before your journey. Last minute bookings however can be accommodated.</p>
    <a href="#top"><p class="main6"><b>Back to top</b></p></a>
    <br><br><br>
    <a name="eight"><h1>Do you have account facilities?</h1></a>
    <p class="main6">Account facilities can be arranged subject to status. Just contact us through our <a href="contact.htm">contact page</a>, or apply directly using our <a href="account.asp">online application form.</a></p>
    <a href="#top"><p class="main6"><b>Back to top</b></p></a>
    <br><br>
    
    </div>
    
    </div>
    </body>
    </html>

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    does anyone have any idea why this is happenning?

    would the z index property do anything for this situation.. ive tried a few combinations and it hasnt worked

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes add z-index:10 for example to your #nav li ul li
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  5. #5
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've got quite a few markup errors in there which will make your life harder - you might want to take a visit to http://validator.w3.org/ and check them out.

    You've got <br>s in between your <li>s which may well mess things up - take those out for a start. Also you have paragraph tags inside your list items for no reason I can see - I'd take them out too.

    Then have a look see what's happening in the browsers.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    To get the list to go over the top in ie you will need to adjust the z-index here.

    Code:
    div#menu {background:#fff; text-align:left; margin-top:25px; margin-left:35px;position:relative;z-index:2;}
    div#main {background:#fff; text-align:left; width:750px; float:left; margin-top:35px;position:relative;z-index:1;}
    That will control the stacking order of the parents.

    As well as the things mentioned by tailslide I'm also wondering why you are using tons of js to do those simple list rollovers when they could be done without any extra mark-up via css instead.

    This would reduce the size of the html considerably

  7. #7
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok..

    i have made the menu go above the rest..

    i removed the <p> properties from the faq li questions..

    prob is now the font isnt formated.. the list looks like this..

    Code:
    <UL class="bullet">
    <p class="bullet">
    <LI class="faq"><a href="#one">How do I get a quote or make a booking?</a></li>
    <LI class="faq"><a href="#two">How do I meet my Driver at the Airport?</a></li>
    <LI class="faq"><a href="#three">What happens if my flight arrives late?</a></li>
    <LI class="faq"><a href="#four">Is there an extra charge for waiting time?</a></li>
    <LI class="faq"><a href="#five">How long will the Driver wait for me?</a></li>
    <LI class="faq"><a href="#six">How do I pay for my journey?</a></li>
    <LI class="faq"><a href="#seven">Must all bookings be made in advance?</a></li>
    <LI class="faq"><a href="#eight">Do you have account facilities?</a></li></ul>
    </p>
    i have also moved most of the p-classes from my page.. i have just placed one at the top of the page and the closing p tag at the bottom..

    this works fine in firefox.. as the whole page has the right text.. in IE however only the first paragraph is formatted correctly.. the rest of the page text is default.. why is this??

    also by not putting BRs in my list of faqs.. they all stay on the same lines.. thats why i put them there in the first place.. how can i get around that the correct way?

    here is the page.. http://www.heathrowminicab.com/menu/transfer-faqs.asp

    i have also uploaded the page and stylesheet code here as text files.

    http://www.heathrowminicab.com/faqpage.txt
    http://www.heathrowminicab.com/stylesheet.txt

    you lot are all legends by the way..

  8. #8
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can add the class that formatted the links into the <li> class - I can't remember what the other class was but you could do this:

    HTML Code:
    <li class="faq yourotherclass">
    The list items being side by side is caused because you've got a rule in your CSS which floats all your list items left - this is probably a bad idea, reserve that for things that you actually want floated and let the other list items just sit as they should
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  9. #9
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the reason the left float is ther is because that was set for the drop down expanding menu (which im gonna change anyway cos it looks dry, just wanted to get it working)

    thats why i added another class to each li.. which in the stylesheet does not float left..

    i think that if i change that general li rule then the drop down menu system will be altered.

  10. #10
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it will - so you need to make sure that the float:left rule only applies to your menu so add an id to your menu list ul and then stick that in front of the rule that floats all your lists left. In other words make that rule specific to your menu.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •