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! :
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! :