|
CSS - Overwriting Wordwrap Within A List
I have a list, within a narrow width. Several items are too wide, and wrap. This would be okay, but the next line is then written on top of the wrapped text.
What property could I use to prevent this? An example is in the image below: Similar TutorialsDear all. Trying to overwrite a general <a>-formatting. For <a> <img /> </a> I do not want to have this formatting. How can I do this? I appreciate if you spend some time looking on this snippet (also via attachment). What should happen: The <a>-Tag makes show a small x in front of the link. For <img>-Tags included in <a> I don't want to show them. Any ideas? Code:
body {
background-color: #C1CDA9;
}
a {
background-image: url(arrow.gif);
background-repeat: no-repeat;
padding-left: 22px;
text-decoration: none;
color: #990000;
}
a img {
border: 1px solid white;
background-image: none; /* ??? should remove background (cross) from picture 4 */
}
#element {
background-color: lightgrey;
border: 1px solid grey;
}
#element a img {
border: 5px solid red;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<a href="#">Link</a><br />
1<img src="eyecatcher.gif" /><br />
<a href="#">2<img src="eyecatcher.gif" /></a><br />
<div id="element">
<a href="#">Link</a><br />
3<img src="eyecatcher.gif" /><br />
<a href="#">4<img src="eyecatcher.gif" /></a><br />
</div>
</body>
</html>
I have a div containing some content from a database like so: Code: <div class="container"> Dynamic Content Here!!! </div> now, the dynamic content contains its own div and span elements, with their own css style attributes. Is there a way to make sure I overwrite the style elements of the inner divs/spans? I've tried applying classes to the div buts thats about all I can think of!? cheers, tom Attempting to inherit all main attributes of a column, and modifying few, what is the correct way to inherit/overwrite the attributes of col3 here ? Code: .col3, col3b {
float: left;
position: relative;
background: #FFFFFF;
width: 25%;
height: 80%;
left: 3%;
border-left: 1px solid #333;
margin: 3px 2px 4px 0;
}
.col3b {
border-left: none !important;
}
Tried as well like: Code: .col3 {
}
.col3 .col3b {
border-left: none !important;
}
note: not talking about a single 'inherit' value I have 2 content areas. One with id sidebar2 and another with id maincontent. I want the links in these separate content areas to have different hover colors and possibly other characteristics. My problem is, the styles for sidebar2 are being overwritten by the styles in maincontent as it is below it in the style sheet (cascade). The hover of the words "Good Game" in this example is green which clashes with the background of the sidebars content. It should be a blue color. Why does a completely separate id overwrite the styling in a previous id? How can I improve this code to get the desired results. Line numbers eg (line 140) are just referencing where the code appears within the stylesheet and are not actually in the css sheet. HTML example: <div id="sidebar2"> <h1>Daily Content</h1> <ul> <li> <a href="(URL)">Good Game</a> </li></ul> </div> #sidebar2 li a:link, li a:visited (line 140) { text-decoration: none; font-weight: bold; font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: #336699; } #sidebar2 li a:active, li a:hover (line 148) { text-decoration: none; color: #2986aa; text-indent: 5px; font-weight: bold; font-family: Arial,Helvetica,sans-serif; font-size: 12px; } #mainContent a:link, li a:visited (line 157) { text-decoration: none; font-weight: bold; font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: #003366; } #mainContent li a:active, li a:hover (line 166) { text-decoration: none; color: #99cc66; text-indent: 5px; font-weight: bold; font-family: Arial,Helvetica,sans-serif; font-size: 12px; } Hello, I am hoping someone can help me. I've tried googling this and am not finding anything that helps or makes sense. I'm still relatively new to CSS. Anyway, here's my issue: I have a jquery navigation and have a style for the list in my <head> section. On one of my pages, I want to have a regular, vertical, bulleted list but something isn't letting it be vertical. I *think* it's the <head> style but I'm not sure. Would someone please have a look? Here's the HTML: [code] <script type="text/javascript" src="js/font_size.js"></script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <!-- navigation code adapted from code --> <script type="text/javascript" src="js/jquery.bgpos.js"></script> <style type="text/css"> ul {list-style:none;margin:0;padding:0;} li {float:left;width:110px;margin:2px;padding:0;text-align:center;} li a {display:block;padding:5px 10px;height:100%;color:#580d0a;text-decoration:none;border-right:2px solid #847f2e;border-bottom:2px solid #847f2e;} li a:hover, li a:focus, li a:active {background-position:-150px 0; color: #ebce72;} #nav a {background:linktomy(img/nav_bar.png) repeat 0 0;} </style> <script type="text/javascript"> $(function(){ $('#nav a') .css( {backgroundPosition: "0 0"} ) .mouseover(function(){ $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500}) }) .mouseout(function(){ $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500}) }) }); </script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="primary_container"> <div id="logo"> <a href="index.html"><img border="0" src="img/3hearts.png" alt="Heart Homes Tucson" /></a> </div> <div id="nav_bar"> <ul id="nav"> <li><a href="">Home</a></li> <li><a href="">About Us</a></li> <li><a class="nav-on" href=""><strong>Services & Locations</strong></a></li> <li><a href="">Faithful Heart Home</a></li> <li><a href="">Loving Heart Home</a></li> <li><a href="">Young at Heart Home</a></li> </ul> </div> <div id="text_container2"> <h1> Services</h1> Tucson Heart Homes believes that everyone deserves the best care which is why our many services include: <ul top="-10px" left= "20px" list-style="disc" display="list-item"> <li>3 home-cooked and nutritious meals, as well as snacks, daily</li><br /> <li>24-hour State Certified Caregivers</li> <li>Fun daily activities designed to meet residence needs</li> <li>Personallized care plans by our Registerd Nurse</li> [code] .... etc I've tried creating a separate div in my CSS, I've tried putting the settings in here, nothing is working.... The CSS I have for the nav is: [code] div#nav_bar{ position: absolute; top: 125px; left: 5px; } ul#nav{ display: block; width: 150px; padding: 5px 18px; margin: 5px; margin-bottom: 5px; } [code] Any help is greatly appreciated! This is my final project for a class and this is the LAST thing not working. Thank you! SMCorning Colleagues, I seem to be having an issue on a page I am developing, where I am using CSS to position many of my elements. I have a banner at the top, and then have used absolute positioning of a couple of flash movies, a graphic and a javascript menu. I have used Xara Webstyle for creating the JS-based Menu. The problem I am experiencing, is that these are positioned in the order I mentioned, from the top to the middle of the page. I also then have some CSS positioned items below the menu. This menu is a tiered, or flyout menu of sorts, and when it drops down is should overlap the absolutely positioned items in the bottom of the page, but those items are overlapping the menu, I assume, because they are absolutely positioned. What I would like is to make the bottom items "go to the background" so to speak, so the javascripted menus writes over them. Is there some setting I am missing that would allow these bottom elements to be in background, so to speak, so that the menu drops will be on top?? Thanks for your help, in advance. Kork I have a list that I've created with the list-style-type being an image. For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly? Below is the code. The cell that these lists sit in has has an id of 'cellid'. Code:
#cellid {
margin: 0 0;
padding: 0 0;
}
#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}
#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}
The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space? Thanks, Brian Seems like most people use unordered lists for menus. Code: <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> Others use definition lists. They claim it is less buggy with IE. Code: <dl> <dt>menu1</dt> <dt>menu2</dt> <dt>menu3</dt> </dl> Any thoughts on whether unordered lists or definition lists are best? Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag? Code: <ul> <li><span>menu1</span></li> <li><span>menu2</span></li> <li><span>menu3</span></li> </ul> Thanks Hi I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript. here is the structure, Code:
<ul id="nav">
<li class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>
</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>
<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
<li class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>
here is my all related css, external css file, Code:
#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0 0; width:100%;}
/* All Levels */
#nav li { text-align:left; }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}
/* 0 Level */
#nav li { clear:both; position:relative; display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left; padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }
#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}
#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }
#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }
/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }
/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }
/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }
#nav li ul { display:none; }
#nav li:hover ul{display: block; }
#nav ol { margin-left:5px; margin-bottom:10px; }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif); font-size:12px; font-weight:normal; }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }
inline css code to overwrite the default behavior for target page Code:
ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}
ul#nav ol li a { padding:0px; }
ul#nav ol li { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol { border:#ccc 1px solid; padding-bottom:30px; }
I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem. In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards. any help is much appreciated I am really stuck with this. Hi, Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side? /Hubba Bubba Hi, I have an OL list (the numbered one) and the horz gap between the list item number (as automatically generated by OL) and the text of the LI is too big (according to client). Looks fine in FF but is bigger alright on IE (ahem naturally .....) I've played with the CSS for both the OL & LI styles even setting all margins and paddings to 0 but without effect on the gap. Is there any way to style that gap? Code below. Kevin <ol class="most_read"> <li class="most_read_li">Apples</li> <li class="most_read_li">Oranges</li> </ol> .most_read { text-align:left; color:#808080; font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal; margin-left:30px; padding:0px; margin-top:5px; } .most_read_li { margin-bottom:7px; margin-right:7px; } Hi I am creating a navigation bar using unsorted list and CSS. I have given my CSS and HTML code here Code: #navcontainer
{
width: 200px;
margin-top:150px;
}
#navcontainer ul#navlist
{
width:200px;
clear:left;
text-align:left;
margin-left:0;
padding-left:0;
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;
}
#navcontainer ul#navlist li
{
margin-left:0;
padding: 0px;
display: block;
list-style:none;
border-bottom: 1px solid gray;
}
#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}
a.linkText {
padding: 10px;
display: block;
color : #444444;
font-family : arial;
font-size : 11px;
font-weight : bold;
text-decoration : none;
height:25px;
}
a.linkText:link {
color : Aqua;
/* you can define other styles if necessary */
}
a.linkText:visited {
color : Maroon;
/* you can define other styles if necessary */
}
a.linkText:hover {
color : Blue;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="linkText" href="#">Item One</a></li>
<li><a class="linkText" href="#">Item two</a></li>
<li><a class="linkText" href="#">Item three</a></li>
<li><a class="linkText" href="#">Item four</a></li>
<li><a class="linkText" href="#">Item five</a></li>
</ul>
</div>
The problem is, when I select the next list item, previously selected list item should come to the original color. Is there any way I can achieve this? Your guidence will be appreciated. Many thanks Im having trouble putting together a subnavigation list on my website, I am trying to create four sections each of which has a different color to it, and i can get almost everything to work except the subnavigation background color. I have tried white and transparent, but i think the parent element is somehow interfering with the css. any help would be appreciated. Here is my code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style type="text/css">
ul.nav
{margin:0;
padding:0;
display:block;
width:100px;
list-style-type:none;}
ul.nav li, ul.nav li a, ul.nav li a:active, ul.nav li a:visited, ul.nav li a:hover, ul.nav li.home a:hover, ul.nav li.work a:hover, ul.nav li.for_clients a:hover, ul.nav li.contact a:hover
{font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#CCCCCC;
color:#666666;
line-height:30px;
width:100px;
list-style-type:none;
text-decoration:none;
font-size:10px;
font-weight:bold;
padding-left:10px;}
ul.nav li.home_over, ul.nav li.home a:hover
{color:#ffffff;
background-color:#018E9F;}
ul.nav li.work_over, ul.nav li.work a:hover
{color:#ffffff;
background-color:#6F0141;}
ul.nav li.for_clients_over, ul.nav li.for_clients a:hover
{color:#ffffff;
background-color:#FF850D;}
ul.nav li.contact_over, ul.nav li.contact a:hover
{color:#ffffff;
background-color:#CCE82E;}
ul.subnav_home
{position:absolute;
top:8px;
left:118px;
margin:0;
padding:0;
display:block;
width:100px;
list-style-type:none;
background-color:#FFFFFF;}
ul.subnav_home li a, ul.subnav_home li a:active, ul.subnav_home li a:visited, ul.subnav_home li a:hover
{font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#fffffff;
color:#aaaaaa;
line-height:30px;
width:100px;
list-style-type:none;
text-decoration:none;
font-size:10px;
font-weight:bold;
padding-left:0px;}
ul.subnav_home li a:hover, ul.subnav_home li.subnav_home_over
{color:#018e9f;}
</style>
<body>
<ul class="nav">
<li class="home_over">home</a></li>
<ul class="subnav_home">
<li class="subnav_home_over">philosophy</li>
<li><a href="process.htm">process</a></li>
<li><a href="resume.htm">resume</a></li>
</ul>
<li class="work"><a href="index.htm">work</a></li>
<li class="for_clients"><a href="index.htm">for_clients</a></li>
<li class="contact"><a href="index.htm">contact</a></li>
</ul>
</body>
</html>
I have a list in IE that works fine, but I have to make it work in NN4 as well. The problem is the big space left between the item and the left side of the body. I looked several sites, but couldn't find any answers. You can view the actual htm at http://www.nald.ca/test/fora/test.htm Main CSS: http://www.nald.ca/test/fora/test.css CSS for NN4: http://www.nald.ca/test/fora/test.css If anyone could just give me some kind of idea where I am going wrong, it would be really awesome. Thanks Hi! Another new-to-CSS dabbler here. Not entirely sure what I'm doing, but I get by. I'm working on a site for a paper (making the switch from tables to proper CSS so bear with me) and I can't get the nav bar to cooperate. i31.tinypic.com/wbvzoh . png One of these things is not like the others... And I can't for the life of me figure out why or what would be causing it bar some well-known CSS issue with nav bars that I am not yet privy to. Code for the bar is as follows: CSS Code: #navcontainer ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background-color: #e0edc9;
color: #25733e;
width: 780px;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
}
#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 0px;
/* matches link padding except for left and right */
padding-top: 0px;
}
#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: #25733e;
text-decoration: none;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #adc38a;
color: white;
}
#navcontainer #active { border-left: 1px solid #fff; }
HTML Code: <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">HOME</a></li> <li><a href="#">RECENT</a></li> <li><a href="#">AD INFO</a></li> <li><a href="#">ARCHIVES</a></li> <li><a href="#">PAY A BILL</a></li> <lj><a href="#">CONTACT</a></li> </ul> </div> Any ideas? Hi, I am currently using an unordered list to output images in a photo gallery im making however i want to also add text underneath each of these. If i use <br> after the image it messes up the UL as the next LI appears underneath the previous one. This is not the desired effect as i am creating a horizontal list. How can i add text underneath the image without distroying the layout? Please help me style lists. This is the on area I am having a really hard time understanding. I have a menu list in my side bar and a standard list in the content section. I keep having problems because the styles seem to be conflicting with each other. My site is http://www.myslavelake.com/dir/budget-2009/ Code for the menu Code: <ul id="navlist"> <li><a href="#">Arctic Ice Centre </a></li> <li><a href="#">Water Conservation </a></li> <li><a href="#">Capital Priorities</a></li> </ul> Code: #sidebar ol, ul, li {
font-size: 1.0em;
font-weight: 600;
text-decoration: none;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#navlist ol, ul {
padding: 5px 0px 0px 0px;
}
The main list code Code: #content ul {
margin-left: 0;
list-style-type: square;
/*text-indent: -1em;*/
}
#content ul li {
font-weight: normal;
list-style-type: square;
font-weight: normal;
/*text-indent: -1em;*/
}
I am happy with the menu but would like normal list for the content section. Right know bullets are not showing up in the content section. Please look at the location list on the right side of this page - http://certified.tmhdesign.com My designer sent me a layout that has each location in a list and seperated by dots that DO NOT go the whole distance of the ul/li. As you can see I am close but they are not laying out the same in IE and Firefox. IE is closer to what I am after but without the big gap Hello, I created a menu using an unordered list and after the list I have a div with some text: http://www.27lamps.com/public/Menu.htm My menu gets over the div. Why? Thanks, Miguel I've been fighting with this for a good couple of days here so I figure it's time to come ask people who might have a better idea than I do. I've been trying to get this list to display on a horizontal bar. It's not a navigation bar that's an integral part of the site's layout, just an unordered list that I need to have go across a line instead of down. I got the code from a site that does pre made menus because I'm still new to all of this so, you know, blah life story. Ha. My HTML looks like this: Code: <li><a href="#url">2005<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub pos1">
<li><a class="sub2" href="#">August<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="border b1"></div>
<div class="base div1">
<h4>August 2005</h4>
<p>August 29</p>
<p>New school division office will be in Weyburn</p>
<ul>
<li><a href="#url">Section 1</a></li>
<li><a href="#url">Section 2</a></li>
<li><a href="#url">Section 3</a></li>
</ul>
</div>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
and I'm still not really sure what part of the code is the CSS affecting this but I think? it's this: Code: #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul {float:left; padding:0; margin:0; list-style:none; width:200px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li {display:block; float:left; width:150px; height:auto; padding:0; margin:0;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a {width:190px; padding-left:10px; background:#fff url(vertical-list/dot.gif) no-repeat left center; color:#000; border:0; margin:0; height:auto; line-height:18px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a:hover {color:#069;}
Is there a way to over ride this code so I can put the list on a single line? I'm staring at the emoticon bashing its head against a wall and it seems pretty accurate at this point. |
|||||||