CSS - A Rollover List Using A:hover Problem

ok i have a list that has style:none. this list is a link.. now whenever a user wants to hover over it i want to add a pointer (arrow perhaps) on the left of the list...

Code:

#menu li  {
list-style:none;
}
#menu a, #menu a:visited {
	text-decoration:none;
	color:#0033FF;
}
#menu li a:hover {
list-style-image:url(images/pointer.jpg);
}
#menu a:hover {
	
	background-color:#0033FF;
	color:white;
	font-weight:bold;
}

now html
Code:

<ul>
		<li><a href="home.php">Home</a></li>
</ul>

Is it possible to change the bullets of an unordered list when you hover over the <li> element using CSS?

I've tried something like this..

Code:

#ulist ul{
	list-style: none;
}
#ulist li a{
	list-style: square;
}

the list
Code:

<ul id="ulist">
   <li><a href="#">Element 1</a></li>
   <li><a href="#">Element 2</a></li>
   <li><a href="#">Element 3</a></li>
   <li><a href="#">Element 4</a></li>
</ul>

But that doesn't work, the reason I think is because the list-style is being applyed to the <a> and not the <li> element.

If not a CSS, how would I use JavaScript to determine the <li> element and add the "square" bullet style to it?

Cheers,
Fozzy

In IE7, the list <ul> is present on pageload, but once you go mouse over it, it disappears. The hover works fine in FF and IE6. I don't think the system matters, but my testing is IE6, and FF on XP and IE7 is on a Vista machine.

I've searched all over for a fix to this problem, but all I've been able to find are some issues with IE7 on <ul> lists and whitespace. My CSS is not great and some of the fixes talked about a hasLayout() set to true - which I don't know how to do - or if I was just reading that wrong.

I know the issue is with the hover - because when I remove the css for the hover - it works fine and does not disappear. On a side note - if I'm on IE7 and I go into Internet Options and just click in and out - the page works fine. (Crazy MS).

Code:

<style type="text/css">
ul#listmenu
{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 14px;
}

/** unordered list item for top menu **/
ul#listmenu li
{
	padding-left: 0px;
	padding-right: 0px;
	float: left;
	margin: 0;
	width: auto !important;
	font-size: 14px;
	line-height: 23px;
	white-space: nowrap;
}

/** unordered list item link for top menu **/
ul#listmenu li a
{
 	padding: 0 17px 0 10px;
	width: auto;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 14px;
	background: url(../images/bullet_menu.gif) 0 6px no-repeat;
}

ul#listmenu li a:hover {
	background: url(../images/bullet_menu_over.gif) 0 6px no-repeat;
	text-decoration:none;
	color: #FFA820;
}

table.tabletop {
	margin: 20px 0 0 20px;
	width: 100%;
}

</style>


<!-- start image header -->
<div style="position:relative; float:left;clear:left;width: 768px;height: 243px;background: #FFF;background: url(../images/banner.jpg) 0 0 no-repeat;">

<table cellpadding="0" cellspacing="0" class="tabletop">
	<tr>
		<td>
				
<table width="100%" border="0" cellpadding="0" cellspacing="1">
	<tr>
		<td nowrap="nowrap">

<ul id="listmenu">
	<li>
		<a href="somelink.php" class="listmenu" >About Us</a>
	</li>
	<li>
		<a href="somelink.php" class="listmenu" >Operations</a>
	</li>
	<li>
		<a href="somelink.php" class="listmenu" >Customers</a>
	</li>
</ul>

		</td>
	</tr>
</table>
				
		</td>
	</tr>
</table>

</div>
			<!-- end image header -->

i know that IE doesnt support the :hover being added to anything but links, is this the same with :active?
was just wondering whether i could have a style change when the user clicks on a form button

I've been using CSS for a couple of days now, and am a bit stuck on how to change the main background image in the body when I hover over a menu item on the side bar. Changing the menu item background seemed easy enough. But, I suspect I am missing a key piece on how to get access to a body style from inside a list style.

Here is the short section I am working on, with the full CSS file shown below that. This validates with a couple of warnings about my black on black color selection. I would certainly appreciate any help with this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<title>HOTWORKS</title>
  <link rel="stylesheet" href="stylz.css" type="text/css">
</head>

<body class="top" id="bdy" > 
<!-- Site navigation menu -->
<ul class="navbar" id="navlist">
	<li><a href="tools.html"><br>Tools</a>
	<li><a href="glass.html"><br>Glass <br> Artwork</a>
	<li><a href="pottery.html"><br>Ceramic<br> Artwork</a>
	<li><a href="about.html"><br>About</a>
</ul>

<!-- Main content -->
<h1>     </h1>

<p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
TOOLS - ART - MISCELLANEA 
<br>

<address>
</address>

</body>
</html>

Code:

#navlist a:hover { 
    color: #1e5ebd;
    background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FF0000;
	 /* how do I do something like this 
    body.top {  background-image: url(images/tabtool.jpg) ; }
	 */
}

Just to be complete, and in case there is something in here that you might need, here is the full css file:

Code:

  body.top {
    padding-left: 11em;
    font-family: Fantasy, "Times New Roman", Times, serif;
    font-size:15px;
    color: #000000;
    /*background-image: url(images/tab3.jpg) ; */
    background-position: 210px 10px; 
    background-repeat:no-repeat;
    background-color: #000000;
    margin-left:5cm;
	}

   body.top {  background-image: url(images/tab3.jpg) ; }
   
  ul.navbar {
   	color: #000000;
    list-style-type: none;
    position: absolute;
    display:block;
    float:left;
    left: 1em;
	}

  h1 {
    font-family: Helvetica, Geneva, Arial,
		SunSans-Regular, sans-serif 
	}
  ul.navbar li {
		text-align:center; 
   /* vertical-align:100px; */
   background: #000000;
   border-right: 1em solid black;
	}
  ul.navbar a {
		text-decoration: none ;
		 top:10%; 
    height:4em; 
  
	}
  a:link {
    color: white }
  a:visited {
    color: white }

#navlist {
    font-family:Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    list-style:none;
}
#navlist a {
    display:block;
    width:144px;
    height:137px;
    color:#fff;
    text-decoration:none;
    background:url("images/drawer4.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
}
#navlist a:hover { 
    color: #1e5ebd;
    background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FF0000;
	 /* how do I do something like this 
    body.top {  background-image: url(images/tabtool.jpg) ; }
	 */
}
#navlist a:active {
	 background:url("images/drawer4b.jpg") no-repeat;
	 background-repeat:no-repeat;
	 background-position: 0px -10px;
    color:#FFC741;
}

I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover.

Code:

<li id="menuitem_2mainnav">
<a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a>
<ul id="menulist_2mainnav">
<li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li>
<li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li>
<li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li>
<li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li>
</ul>
</li>

I have tried:
Code:

#menulist_2mainnav li:hover{ color:#000000 !important;  }

But it doesn't change the links text colour.

Hi All,

I am building a site that has the following structure for the navigation;

Code:

<div id="navigation">
    <ul id="navlist">
      <li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
      <li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
      <li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
        <ul>
          <li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
          <li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
          <li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
          <li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
          <li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
        </ul>
      </li>
      <li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
      <li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
    </ul>
  </div>

The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;.

Edit: Just noticed that I can't link to the full site that I have uploaded for preview.

What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another?

Your help would be much appreciated!

i have a problem with my rollovers. they work fine in ff and safari, and shockingly do not work in ie6. i've been at it for a couple of days now, and can't seem to make headway on it.

i'm also new to this forum, so im hoping i do this right:

html:

<div id="banner"><img src="assets/banner.png" alt="xxx" width="450" height="145" border="0" />
<ol>
<li><a href="index.html" id="home">home</a></li>
<li><a href="about.html" id="about">Aboutx</a></li>
<li><a href="portfolio.html" id="portfolio">xPortfolio</a></li>
<li><a href="services.html" id="services">Servicesx</a></li>
<li><a href="news.html" id="news">Latest News</a></li>
<li><a href="contact.html" id="contact">Contact </a></li>
</ol>
</div>

css:

@charset "utf-8";
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-repeat: repeat-y;
}
div {
background-position: center;
}

#container {
width: 100%;
background-color: #0000000;
}
#containertopout {
width: 100%;
background-image: url(topbg.png);
background-repeat: repeat-x;
height: 300px;
}
#containertopin {
width: 900px;
margin-right: auto;
margin-left: auto;
}
#banner {
height: 245px;
width: 450px;
float: left;

}
#flash {
width: 450px;
float: left;
padding: 0px;
top: auto;
height: 228px;
margin-top: -0.7em;
margin-right: auto;
margin-bottom: -20px;
margin-left: auto;
}
#flashcontent {
margin: 0px;
padding: 0px;
height: 228px;
width: 450px;
}
#footer {
display: inline;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 850px;
}


#containermiddle {
width: 850px;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-y;
background-color: #000000;
float: none;
padding: 0px;
}
#body {
background-repeat: repeat-y;
background-color: #000000;
}
#containerbottomout {
width: 100%;
background-image: url(botbg.png);
background-repeat: repeat-x;
height: 120px;
clear: both;
overflow: auto;
}
#containerbottomin {
width: 850px;
margin-right: auto;
margin-left: auto;
clear: both;
float: none;
}


.col1 {
border-right-width: 2px;
border-right-style: ridge;
border-top-color: #071E3C;
border-right-color: #071E3C;
border-bottom-color: #071E3C;
border-left-color: #071E3C;
}
#navlinks li {
display: inline;
list-style-type: none;
margin-left: 0.25em;
padding-left: 0.5em;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #18457B;
}
#navlinks .first {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin-left: -0.75em;
}
#navlinks a {
font-size: 10px;
}


p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5;
color: #4480d5;
}
#navlinks p {
margin-top: -1.5em;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#navigation {
padding-top: 1em;
text-align: center;
}


.style1 {
font-size: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF9B21;
}
.style2 {font-size: 16px}

.style3 {
color: #4480d5;
font-size: 12px;
line-height: 20px;
}
.style4 {
color: #FF9B21;
font-size: 12px;
line-height: 20px;
}

a:link {
color: #4480D5;
font-size: 12px;
line-height: 20px;
text-decoration: none;
}
a:hover {
color: #FFC51B;
text-decoration: underline;
}
a:active {
color: #4480d5;
}
a:visited {
color: #FF9B21;
text-decoration: none;
}

#banner li{
float:left;
margin-top: -0.6em;
list-style-type: none;
}

#banner a{
text-decoration: none;
display: block;
float: left;
text-indent: -5000px;
}

#banner #home {
background-image: url(navbut/home.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
margin-left: -3.35em;
}

#banner #home:hover {
background-position: 0 -95px;
}

#banner #about {
background-image: url(navbut/aboutus.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #about:hover {
background-position: 0 -95px;
}

#banner #portfolio {
background-image: url(navbut/portfolio.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #portfolio:hover {
background-position: 0 -95px;
}

#banner #services {
background-image: url(navbut/services.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #services:hover {
background-position: 0 -95px;
}

#banner #news {
background-image: url(navbut/news.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #news:hover {
background-position: 0 -95px;
}

#banner #contact {
background-image: url(navbut/contact.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #contact:hover {
background-position: 0 -95px;
}

free happy thoughts from me for whoever can help me out!

Does anyone have have an idea of why the problem I am about to describe is happening?

View this link in IE 6:
paintingshiva.com / 2006rd / www / template / gallery.html

can't post url.. take out spaces between slashes
URL


This site is a prototype for my website that I am redesigning. The page above will be one of the gallery pages. Right now, I ma using colored circles as placeholder content.

Rollover the right side ART navigational elements (colored circles).

The weird circumstance:
When I rollover, two different nav elements one after another (except for the first one), the div where the title elements are, fold up into the main content area (where the large colored circle is). But if you rollover the first one after this happens, everything goes back to normal.

I can not figure out why this is happening.

I built the ART navigational elements by adding a background image to the style of the anchor tags. There is also a JavaScript at the top of the page that is changing the style of each element to make the rollover effect.

i have set up my navigation menu like so:
PHP Code:
<style type='text/css'>
   div#nav {
      border:1px solid #000000;
      background-color:#F2F2F2;
      height:auto;
   }
   div#nav a {
      display:block;
      color:black;
      border:1px solid #FFFFFF;
   }
   div#nav a:hover {
      color:red;
      border:1px solid #000000;
      background-color:white;
   }
</style>

<div class='nav'>
   <a href='page1.html'>Page 1</a>
   <a href='page2.html'>Page 2</a>
   <a href='page3.html'>Page 3</a>
   <a href='page4.html'>Page 4</a>
</div> 




the above works perfectly in Firefox, but doesnt in IE.
IE seems to keep around the fact that the <a> tag only encapsulates the text: Page 1, so the rollover effect only works in IE when the user hovers over the text and not anywhere in the row.
Does IE not understand the display:block? as i think this is whats causing it...

Hi there, well as i said i need some help from any CSS gurus.

I've been using the Trifecta rollever code ever since i found it in almost every page i've done. Just this week i found out that for some reason in IE when i use the vertical version of it, there's a 3px margin above the menu. I've tried changing every setting and resetting most elements margins, padding, and borders to 0 to no avail. I keep getting that ugly 3px margin.

Here's the latest example:

Example

You'll see the problem in the left and right hand menus, under Bussiness and under Client Zone, in both, the distance between the image and the first menu item should be zero. But IE shows an ugly 3 px margin ( btw, in the Bussiness side there's a bigger margin because i set it like that, but still there's an extra 3px..).

Here's the code used which is the exact code i took from the web and i just adapt it whenever.
This is from the menu on the right ( CLient Zone ), if you check it under IE, be it version 6 or 7 you'll see a 3 px margin on top of the menu...


Code:

#menu2{
			margin-bottom:6px;
			padding:0;
			border:0;
		}
		
		
		/* NAVIGATION BUTTONS 2*/
			.cssnav2	{
						position:relative;
						font-family: arial, helvetica, sans-serif;
						background-image:  url(../images/menus/menu2_on_1.gif);
						background-repeat: no-repeat;
						white-space: nowrap;
						display: block;
						width: 165px;
						height: 28px;
						margin: 0; 
						padding: 0; 
			}
			.cssnav2 a {
						display: block;
						color: #000000;
						font-size: 11px;
						width: 165px;
						height: 28px;
						display: block;
						float: left;
						color: black; 
						text-decoration: none;
			}

			.cssnav2 img {width: 165px; height: 28px; border: 0; }
			* html a:hover {visibility:visible}
			.cssnav2 a:hover img{visibility:hidden}

			.cssnav2 span {
						position: absolute;
						left: 40px;
						top: 0;
						line-height:28px;
						margin: 0px;
						padding: 0px;
						cursor: pointer;
						width: 118px;
						height: 28px;
						text-align: left;
						color:#646565;
						font-family:Arial, Helvetica, sans-serif;
			}

Thanks for any help.

Edit: I found something about a 3px bug with IE and floats, but i dont know if it applies in this case because first im not using floats and secondly that bug is supposed to be gone in IE 7.

I am just learning CSS and I found this site and they have a step through example, but I am having problem where they use

body.about dt#about,
body.about dt#about a,
body.services dt#services,
body.services dt#services a,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.contact dt#contact,
body.contact dt#contact a {
background-position: 0 -100px;
}

to select different parts of an image to display. Also, supposedly, you put in the body tag of the index.html file
<body class="about">

and it is supposed to use the about image, but I am unsure how to enable the others. Anyone have an idea. The code is too much to post here, but I could possibly email it if anyone needs it.

I have a menu with several links each of which has a span tag connected, when you hover over the link the span tag is revealed as a roll over text.

However I have also made the whole page (the page size is controlled by JavaScript) an anchor tag and placed a span for that, so there is a default text which is replaced by the other roll over text. This works fine in Firefox.

However, I'm having problems getting this to work properly in IE6. It doesn't reveal the span for the whole page, although the other links are ok, it also reveals the text if I hover over where the rollover text appears. I have validated the CSS and XHTML.

Is there a way to fix this or am I going to have to go back to JavaScript?

[code]
css:
body {
background: url(images/sips_menu.gif) no-repeat;
}

a.con {
z-index: 1;
}

a.menu {
z-index: 2;
}

/*set whole page as an invisible link*/

a.con:link,a.con:visited,a.con:hover,a.con:active {
background-color: transparent;
display: block;
border: none;
position: absolute;
top: 0px;
left: 0px;
width: 790px;
height: 540px;
text-decoration: none;
cursor: default;
}

/*set span for whole page as visible only when hovering over page*/

a.con span {
display:none;
}

a.con:hover span {
color: black;
font-weight: normal;
display: block;
text-decoration: none;
font-size: 11px;
font-family: arial, sans-serif;
text-align: left;
position: absolute;
top: 125px;
left: 580px;
width: 170px;
height: 150px;
}

/*menu links - when mouse is over these it is not over general page anchor*/

a.menu:link,a.menu:visited,a.menu:hover,a.menu:active {
background-color: white;
border: 1px solid black;
color: #617AB2;
font-size: 12px;
font-weight: bolder;
font-family: arial, sans-serif;
text-decoration: none;
text-align: left;
padding: 4px 6px 4px 6px;
}

a.menu:hover {
color: red;
}

/*menu link rollover text visible when mouse over*/

a.menu span {
display: none;
}

a.menu:hover span {
color: black;
font-weight: normal;
display: block;
}

/* Ids to position each of the menu links */

#one {
position: absolute;
top: 180px;
left: 20px;
}

#two {
position: absolute;
top: 250px;
left: 250px;
}

#three {
position: absolute;
top: 380px;
left: 220px;
}

#four {
position: absolute;
top: 320px;
left: 420px;
}

#five {
position: absolute;
top: 450px;
left: 565px;
}

/* Ids to position the span tags*/
#a {
position: absolute;
top: -55px;
left: 560px;
width: 170px;
}

#b {
position: absolute;
top: -125px;
left: 330px;
width: 170px;
}

#c {
position: absolute;
top: -255px;
left: 360px;
width: 170px;
}

#d {
position: absolute;
top: -195px;
left: 160px;
width: 170px;
}

#e {
position: absolute;
top: -325px;
left: 15px;
width: 170px;
}

xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<link rel="stylesheet" href="menu.css" type="text/css" />
</head>
<body>
<p><a class="con" href="#"><span>text</span></a></p>
<p><a class="menu" id="one" href="#">link<span id="a">rollover text</span></a><br /></p>
<p><a class="menu" id="two" href="#">link<span id="b">rollover text</span></a><br /></p>
<p><a class="menu" id="three" href="#">link<span id="c">rollover text</span></a><br /></p>
<p><a class="menu" id="four" href="#">link <span id="d">rollover text</span></a><br /></p>
<p><a class="menu" id="five" href="#">link<span id="e">rollover text</span></a><br /></p>
</body>
</html>

Hi all,
I'm sure this is an easy fix, but I can't get it.
I have a javascript rollover image swap, and can only get it to validate if I don't use the border="0" attribute.
The site is to be pure css, but the course requires me to use some javascript to show understanding.
So it works fine, but showing a blue border in ie, and a red border in mozilla.
My question is, if you can help, how to hide/get rid of the border, and have validate at the same time. Cheers Solar.

html link http://darkspeed.atspace.com/Javascript.htm

css link http://darkspeed.atspace.com/speedstyle.css

the div is #roll, hope this makes sense.. thanks.

And if I'm doing it all wrong any advice would be appreciated..
Thanks again.