bazz
03-11-2005, 06:01 PM
Hi,
I'm having difficulty with a left navmenu in a <ul><li> where I'm trying to make it move tighter to the left. If I tell it to have a margin of -10px (either the <ul> or the <li>, it is OK in FF but off the screen in IE
I just dont seem to be able to work it out.
css
div#productnavbar1 {
float : left;
#background-color: #785B83;
background-image : url('images/menubkgrnd.jpg');
width : 190px;
border : 1px solid #e5f9ff;
text-align: left;
margin-left : 0;
}
div#productnavbar1 h3 {
font-family : "Trebuchet MS", verdana, sans-serif, arial, helvetica;
font-size : 1.1em;
margin-left : 20px;
padding-top : 10px;
}
div#productnavbar1 ul {
background-color: transparent;
display: block;
white-space: nowrap;
margin-top : -15px;
}
div#productnavbar1 ul li
{
display : block;
list-style-type: none;
line-height : 25px;
border-bottom : 1px solid #000040;
background-color : transparent;
}
div#productnavbar1 ul li a:link, div#productnavbar1 ul li a:visited, div#productnavbar1 ul li a:active {
color: #000040;
text-decoration: none;
font-size : .9em;
font-weight : normal;
}
div#productnavbar1 ul li a:visited {
background-color: transparent;
color : #000040;
}
div#productnavbar1 ul li:hover {
background-color: #ffffff;
color : #000040;
}
html
<div id="productnavbar1">
<h3>Tailored Solutions</h3>
<ul>
<li><a href="http://mydomain.com/bed_and_breakfasts.php">CHRIS™ for Bed & Breakfast</a></li>
<li><a href="http://mydomain.com/guesthouses.php">CHRIS™ for Guesthouses</a></li>
<li><a href="http://mydomain.com/hotels.php">CHRIS™ for Hotels</a></li>
<li><a href="http://mydomain.com/restaurants.php">CHRIS™ for Restaurants</a></li>
<li><a href="http://mydomain.com/self_catering.php">CHRIS™ for Self-Catering</a></li>
</ul>
<h3>Components Explained</h3>
<ul>
<li><a href="http://mydomain.com/photography.php">CHRIS™ ProPics™</a></li>
<li><a href="http://mydomain.com/internetimagery.php">CHRIS™ ProImages™</a> <a href="http://cms.mydomain.com/cgi-bin/thechrissystem/imaging/choose.pl">Demo</a></li>
<li><a href="http://mydomain.com/vrimagery.php">CHRIS™ Interactive™</a></li>
<li><a href="http://mydomain.com/contentmanagement.php">CHRIS™ EasyEdit™</a></li>
<li><a href="http://mydomain.com/accommodator.php">CHRIS™ Accommodator™</a></li>
<li><a href="http://mydomain.com/confab.php">CHRIS™ Confab™</a></li>
<li><a href="http://mydomain.com/consulting.php">CHRIS™ Consulting</a></li>
<li><a href="http://mydomain.com/">Full Demo</a></li>
<li><a href="http://tmydomain.com/terms.php">Terms & Conditions</a></li>
</ul>
</div>
Bazz
I'm having difficulty with a left navmenu in a <ul><li> where I'm trying to make it move tighter to the left. If I tell it to have a margin of -10px (either the <ul> or the <li>, it is OK in FF but off the screen in IE
I just dont seem to be able to work it out.
css
div#productnavbar1 {
float : left;
#background-color: #785B83;
background-image : url('images/menubkgrnd.jpg');
width : 190px;
border : 1px solid #e5f9ff;
text-align: left;
margin-left : 0;
}
div#productnavbar1 h3 {
font-family : "Trebuchet MS", verdana, sans-serif, arial, helvetica;
font-size : 1.1em;
margin-left : 20px;
padding-top : 10px;
}
div#productnavbar1 ul {
background-color: transparent;
display: block;
white-space: nowrap;
margin-top : -15px;
}
div#productnavbar1 ul li
{
display : block;
list-style-type: none;
line-height : 25px;
border-bottom : 1px solid #000040;
background-color : transparent;
}
div#productnavbar1 ul li a:link, div#productnavbar1 ul li a:visited, div#productnavbar1 ul li a:active {
color: #000040;
text-decoration: none;
font-size : .9em;
font-weight : normal;
}
div#productnavbar1 ul li a:visited {
background-color: transparent;
color : #000040;
}
div#productnavbar1 ul li:hover {
background-color: #ffffff;
color : #000040;
}
html
<div id="productnavbar1">
<h3>Tailored Solutions</h3>
<ul>
<li><a href="http://mydomain.com/bed_and_breakfasts.php">CHRIS™ for Bed & Breakfast</a></li>
<li><a href="http://mydomain.com/guesthouses.php">CHRIS™ for Guesthouses</a></li>
<li><a href="http://mydomain.com/hotels.php">CHRIS™ for Hotels</a></li>
<li><a href="http://mydomain.com/restaurants.php">CHRIS™ for Restaurants</a></li>
<li><a href="http://mydomain.com/self_catering.php">CHRIS™ for Self-Catering</a></li>
</ul>
<h3>Components Explained</h3>
<ul>
<li><a href="http://mydomain.com/photography.php">CHRIS™ ProPics™</a></li>
<li><a href="http://mydomain.com/internetimagery.php">CHRIS™ ProImages™</a> <a href="http://cms.mydomain.com/cgi-bin/thechrissystem/imaging/choose.pl">Demo</a></li>
<li><a href="http://mydomain.com/vrimagery.php">CHRIS™ Interactive™</a></li>
<li><a href="http://mydomain.com/contentmanagement.php">CHRIS™ EasyEdit™</a></li>
<li><a href="http://mydomain.com/accommodator.php">CHRIS™ Accommodator™</a></li>
<li><a href="http://mydomain.com/confab.php">CHRIS™ Confab™</a></li>
<li><a href="http://mydomain.com/consulting.php">CHRIS™ Consulting</a></li>
<li><a href="http://mydomain.com/">Full Demo</a></li>
<li><a href="http://tmydomain.com/terms.php">Terms & Conditions</a></li>
</ul>
</div>
Bazz