Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Navbar not displaying in IE

Reply
Thread Tools

Navbar not displaying in IE

 
 
bradski bradski is offline
Junior Member
Join Date: Jul 2011
Posts: 1
 
      07-18-2011
Hi!

I'm a bit of a noob to CSS and I'm having some problems - my left hand navbar (a css styled ul) won't display in IE!

Here's the HTML:

<div id="menu">

<ul>
<li><a href="http://www.trusty-travel-tips.com" class="home"></a></li>
<li><a class="headerplanning"></a></li>
<ul>
<li><a href="http://www.trusty-travel-tips.com/passport.html" class="passports"></a></li>
<li><a href="http://www.trusty-travel-tips.com/visa.html" class="visas"></a></li>
<li><a href="http://www.trusty-travel-tips.com/international-travel-health-insurance.html" class="travelinsurance"></a></li>
<li><a href="http://www.trusty-travel-tips.com/how-to-travel.html" class="howtotravel"></a></li>
</ul>
<li><a class="headerpacking"></a></li>
<ul>
<li><a href="http://www.trusty-travel-tips.com/travel-packing-tips.html" class="packing"></a></li>
<li><a href="http://www.trusty-travel-tips.com/travel-packing-checklist.html" class="packingchecklists"></a></li>
<li><a href="http://www.trusty-travel-tips.com/international-travel-luggage.html" class="luggage"></a></li>
<li><a href="http://www.trusty-travel-tips.com/travel-accessories.html" class="travelaccessories"></a></li>
<li><a href="http://www.trusty-travel-tips.com/travel-security.html" class="securityproducts"></a></li>
</ul>
<li><a class="headertravelling"></a></li>
<ul>
<li><a href="http://www.trusty-travel-tips.com/accommodation.html" class="accommodation"></a></li>
<li><a href="http://www.trusty-travel-tips.com/transport.html" class="transport"></a></li>
<li><a href="http://www.trusty-travel-tips.com/air-travel-tips.html" class="airtravel"></a></li>
<li><a href="http://www.trusty-travel-tips.com/travel-health.html" class="travelhealth"></a></li>
<li><a href="http://www.trusty-travel-tips.com/travel-safety.html" class="travelsafety"></a></li>
<li><a href="http://www.trusty-travel-tips.com/about-us.html" class="aboutus"></a></li>
<li><a href="http://www.trusty-travel-tips.com/Travel-Tips-blog.html" class="blog"></a></li>
</ul>
</ul>

</div>


...and here's the CSS:

#menu {
list-style: none;
padding: 0;
margin: -5px;
width: 774px;
height: 210px;
position: relative;
}

#menu a {
display: block;
position: absolute;
outline: none;
}

#menu ul ul {
left:-10px
}


#menu .home {
background-image: url(../image-files/home.jpg);
width: 180px;
height: 34px;
top: 0px;
}

#menu .headerplanning {
background-image: url(../image-files/headerplanning.jpg);
width: 180px;
height: 34px;
top: 32px;
}

#menu .passports {
background-image: url(../image-files/passports.jpg);
width: 180px;
height: 34px;
top: 64px;
}


#menu .visas {
background-image: url(../image-files/visas.jpg);
width: 180px;
height: 34px;
top: 96px;
}

#menu .travelinsurance {
background-image: url(../image-files/travelinsurance.jpg);
width: 180px;
height: 34px;
top: 128px;
}

#menu .howtotravel {
background-image: url(../image-files/howtotravel.jpg);
width: 180px;
height: 34px;
top: 160px;
}

#menu .headerpacking {
background-image: url(../image-files/headerpacking.jpg);
width: 180px;
height: 34px;
top: 192px;
}

#menu .packing {
background-image: url(../image-files/packing.jpg);
width: 180px;
height: 34px;
top: 224px;
}

#menu .packingchecklists {
background-image: url(../image-files/packingchecklists.jpg);
width: 180px;
height: 34px;
top: 256px;
}

#menu .luggage {
background-image: url(../image-files/luggage.jpg);
width: 180px;
height: 34px;
top: 288px;
}

#menu .travelaccessories {
background-image: url(../image-files/travelaccessories.jpg);
width: 180px;
height: 34px;
top: 320px;
}

#menu .securityproducts {
background-image: url(../image-files/securityproducts.jpg);
width: 180px;
height: 34px;
top: 352px;
}

#menu .headertravelling {
background-image: url(../image-files/headertravelling.jpg);
width: 180px;
height: 34px;
top: 384px;
}

#menu .accommodation {
background-image: url(../image-files/accommodation.jpg);
width: 180px;
height: 34px;
top: 410px;
}

#menu .transport {
background-image: url(../image-files/transport.jpg);
width: 180px;
height: 34px;
top: 442px;
}

#menu .airtravel {
background-image: url(../image-files/airtravel.jpg);
width: 180px;
height: 34px;
top: 474px;
}

#menu .travelhealth {
background-image: url(../image-files/travelhealth.jpg);
width: 180px;
height: 34px;
top: 506px;
}

#menu .travelsafety {
background-image: url(../image-files/travelsafety.jpg);
width: 180px;
height: 34px;
top: 538px;
}

#menu .aboutus {
background-image: url(../image-files/aboutus.jpg);
width: 180px;
height: 34px;
top: 538px;
}

#menu .blog {
background-image: url(../image-files/blog.jpg);
width: 180px;
height: 34px;
top: 570px;
}


It's very clunky I know but I wanted to have each of the buttons customizable to a different image. I would really appreciate any help anyone can offer me!

Many thanks! :
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Repeater with SubRepeater for Navbar Elmo Watson ASP .Net 0 03-27-2005 07:11 PM
navbar position when changing font size chlori HTML 5 01-19-2005 09:03 AM
navbar 100% height Nik Coughin HTML 5 07-14-2004 02:34 AM
How to make a CSS navbar that colors the page you're on Paul Furman HTML 2 02-17-2004 06:16 PM
What is the best markup for a breadcrumb navbar? Thomas Mlynarczyk HTML 10 01-17-2004 08:28 PM



Advertisments