CSS - Problem Getting Anchor Hover To Work With Li And Ul Tags

I have some listing text that comes from a database, displayed in a column. Each block of text is enclosed in a DIV tag. I use the following to cause the area of the text to change background color when there is a mouseover:

Quote:
div.list {
padding: 5px 5px 5px 5px;
}
div.list:hover {
background-color: #FFFACD;
}



Works fine for Firefox, but doesn't do anything in IE. How can I fix this so it works in IE as well?

Having two problems, kind of related to browsers.
1) Most of the time, the site loads better under Firefox. For some reason, Firefox won't implement the text-decoration:none attribute. Any ideas?

2) Also, the on hover flip filter doesn't seem to be working in IE, which i was told was the only browser that would work in? I think I used bad syntax, but can't find it. Help would be appreciated!

edit--i used the html validation and the css one, the html said I cant use the xspace and vspace in this iframe:

<iframe class="fade" style="position:absolute; top:125; left:200;"
src="blog.html" width="400" height="400" frameborder="0" align="left" xspace="3" vspace="3"></iframe>

this is the only i frame I use, and was something I got off a frames tutorial... guess i didn't learn it well enough?
was a ton more wrong with the css, but it wasn't like the html validator and telling me where i went wrong.

here is the full css file:

.fade{filter:alpha(opacity=70); -moz-opacity:0.7; background:#ffffff;}

font, td{color:#0000FF; font-size:medium; font-family:sans-serif; font:"Comic Sans MS",Tahoma;}

a,a:link,a:visited,a:hover,a:active { font-size:medium; font-weight:bold; font-family:sans-serif; font:"Comic Sans MS",Tahoma; text-decoration:none; }
.link1 a:link { color:#0000FF; }
.link1 a:visited { color:#0000FF; }
.link1 a:hover { color:#0000FF; filter:flipv; }
.link1 a:active { color:#0000FF; }

.link2 a:link { color:#0000F5; }
.link2 a:visited { color:#0000F5; }
.link2 a:hover { color:#0000F5; filter:flipv; }
.link2 a:active { color:#0000F5; }

could someone please help me figure out what I did to my fonts, and where the links are preventing the underline decoration from being disabled?

<div style="blah">

What would be used to put :hover in the style tag in place of 'blah'?

my layout is pretty simple...

Code:

<div class="container">
 	<div class="topbar">
 	<div class="list">
 		<div class="gametitle"></div>
 		<div class="percentage"></div>
 		<div class="system"></div>
 	</div>
 </div>

i have the following CSS applied to gametitle, percentage and system... for somereason, gametitle doesnt work...

Code:

.gametitle {
 float:left;
 width:250px;
 color:#FFF;
 }
 .gametitle a:link,
 .gametitle a:visted,
 .gametitle a:hover {color:#FFF;}
 .percentage {
 float:left;
 color:#FFF;
 }
 .percentage a:link,
 .percentage a:visited,
 .percentage a:hover {color:#FFF;}
 .system {
 float:right;
 color:#FFF;
 }
 .system a:link,
 .system a:visited,
 .system a:hover {color:#FFF;}

here is the page where all this code is going down...

Mini Catalog

I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple:
PHP Code:
 h3 {
    margin:10px;
    color:#636500;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}
p {
    margin:10px;
    color:#636500;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}
a {
    text-decoration: none;
}
a:hover {
    color:#636500;
}
a:visited {
    color:#cecf9c;
}
a:link {
    color:#cecf9c;
} 





searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore.

I think it may be affected by the a:visited style, but how do I make a:hover work all the time?

Thanks for helping.

Hi there,


First of all, I know very little of CSS.
Just enough (with the help of Firefox web developer toolbar) to modify my webpage: (pbase dot com slash tvw)
I've managed to make the hover function work (in Firefox at least), when you hover over a photo.
Unfortunately it doesn't work in IE (I've checked with IE8). Do I have to adjust the code?

This is the code I currently use:
img.thumbnail:hover {
border: #000000 1px solid;
margin: 0px;
padding: 0px;
background: rgb(45, 45, 45);
vertical-align: middle;
}input {
border: #999999 1px solid;
}

Help would be appreciated!
Thanks.

Tim

Hi,

Is there a good way to use css to make every element with a specified class name to have some hover attribute, for instance .class:hover would do something?

For some reason it doesn't work for me unless I say div.class:hover or a.class:hover, etc. I have to specify an element.

There's a weird bug with named anchor which I'll describe in detail (screen shots will also follow) for posterity as the example page will most likely change : there's a header div followed by a main div containing a centered div with a right sidebar div floating on the left. In the content div there's the page description followed by a picture gallery including a full size image with some thumbnails on the side included in the div which the thumbnails are linked with it as a named anchor. The problem lies that when the named anchored is referred to (linked) it's pushed all the way up right next to the header div ; not only the content div but also the sidebar which I think is weird. I've tried setting margin-top higher than the header div just in case this case broke the normal flow of blocks (which its end sets the beginning of the following content) but whatever margin I set the behavior remained the same. I noted the behavior in FF2, FF3 & Safari 3.2.1 although IE6, IE7 & Opera 9.63 doesn't have the behavior as I'd like to end up with (as with IE).

Sadly the forum rules forbid me from posting links, but I would be happy to send them to you privately.

Please note that it's my first time posting on this site and that I've searched the subject in vain prior to starting this new thread.

APPEARS TO BE HASLAYOUT ISSUE IMAGE WITHIN ANCHOR NOT CLICKABLE.

Hi Guys looking for a spot of help please.

IE is driving me up the wall.

Ive wrote a jQuery script for scrolling a list horizontally upon user clicking left or right. The list has anchors within it which are blocks which I want to be clickable with an image inside (fine in FF etc) but in IE the image within the anchor loses its ability to be clicked the rest if fine apart from I manually have to set the cursor to pointer to show the user its clickable still.

Just when they click the item image within the anchor it does nothing.

Here is a slim version of the HTML :

Code:

<ul>
<li><a href="/page1.html"><span class="box_wrap"><span class="img"><img src="1.jpg" border="0" height="75" /></span><span>Item 1</span></span></a></li>
		<li><a href="/page2.html"><span class="box_wrap"><span class="img"><img src="2.jpg" border="0" height="75" /></span><span>Item 2</span></span></a></li>
		<li><a href="/page3.html"><span class="box_wrap"><span class="img"><img src="3.jpg" border="0" height="75" /></span><span>Item 3</span></span></a></li>
		<li><a href="/page4.html"><span class="box_wrap"><span class="img"><img src="4.jpg" border="0" height="75" /></span><span>Item 4</span></span></a></li>
		<li><a href="/page5.html"><span class="box_wrap"><span class="img"><img src="5.jpg" border="0" height="75" /></span><span>Item 5</span></span></a></li>
		<li><a href="/page6.html"><span class="box_wrap"><span class="img"><img src="6.jpg" border="0" height="75" /></span><span>Item 6</span></span></a></li>
		<li><a href="/page7.html"><span class="box_wrap"><span class="img"><img src="7.jpg" border="0" height="75" /></span><span>Item 7</span></span></a></li>
		<li><a href="/page8.html"><span class="box_wrap"><span class="img"><img src="8.jpg" border="0" height="75" /></span><span>Item 8</span></span></a></li>
		<li><a href="/page9.html"><span class="box_wrap"><span class="img"><img src="9.jpg" border="0" height="75" /></span><span>Item 9</span></span></a></li>
		<li><a href="/page10.html"><span class="box_wrap"><span class="img"><img src="10.jpg" border="0" height="75" /></span><span>Item 10</span></span></a></li>
		<li><a href="/page11.html"><span class="box_wrap"><span class="img"><img src="11.jpg" border="0" height="75" /></span><span>Item 11</span></span></a></li>
		<li><a href="/page12.html"><span class="box_wrap"><span class="img"><img src="12.jpg" border="0" height="75" /></span><span>Item 12</span></span></a></li>
		<li><a href="/page13.html"><span class="box_wrap"><span class="img"><img src="13.jpg" border="0" height="75" /></span><span>Item 13</span></span></a></li>
		<li><a href="/page14.html"><span class="box_wrap"><span class="img"><img src="14.jpg" border="0" height="75" /></span><span>Item 14</span></span></a></li>
		                  
        </ul>  

CSS Code:

Code:

ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}

ul li {

  	display:block;
	list-style:none; 
	margin:0; 
	padding:0; 
	border:0; 
	text-align:center;
	float:left;
	width:118px;
	height:133px;  
}

ul li a{
	display:block;
	border-right:1px solid #e2f5fe;
	outline:none;
	text-decoration:none;
	background:#FFF;
	padding:3px 2px 3px 2px;
	line-height:15px;
}

ul li a:hover{
	background:#e2f5fe;
	color:#fe0084;
}

ul li span.box_wrap { 
	display:block;
	background:#FFF;
	height:127px;
}

ul li span.box_wrap span{
	padding:0px 3px;
	font-size:12px;
} 

ul li span.img { 
	padding:2px 0px 2px 0px;
	display:block;
}

Just when you try to click any of the images within the boxes its not clickable. Really stumped.

Any help or pointers would be greatly appreciated. Thanks in advance!

Hi,

I've done an English site which works but now I'm doing the language versions..in particular, Arabic, which is read from right-to-left (direction: rtl)

http://www.ntcjapan.com/languages/arabic/dindex.html

On IE, the page looks fine. On Firefox, however, the <UL> tags (see light blue and normal blue text in middle of page) are being aligned to the right, overlapping the <div id="main"> which is supposed to contain it.

Code:

	#main {

		width: 590px;
		padding-top: 115px;
		padding-left: 4px;
		padding-right: 5px;
		background: url(../../../images/0_logo.gif) no-repeat;
		float: left;
		margin: 0px 3px 0px 0px;
	}

I do want everything aligned to the right, since Arabic is apparently read that way, but I need the effect as shown on IE.

Any ideas how to make this work?

Also, if anyone has any recommendations on what I could do to fix the W3C validation errors , please let me know.

Thanks very much in advance!

Here is the page: http://www.usdphidelts.com/alumni/map.php

There are <div> box's that need to be placed next to each other, one contains the map, the other contains the information about the icon click on the map.

It looks like with my current CSS, the two <div>'s names map and alumni are being placed on top of one another.

Any idea how I can get them to layout next to each other?

Thanks!

Hi

I am having some problems with using hover and background images. My code is this:

a:hover.buttons {
color:white;
width:53px;
height:33px;
background-color:#3366CC;
background-image: url(images/council1.jpg);
padding-top: 9px;
padding-bottom: 10px;
padding-left: 8px;
padding-right: 8px;

}
It is loading a background image into a table cell. It works OK in mozilla based browsers, but there is a delay of about a second when using IE, which makes the page look rather untidy.

The page I am working on can be viewed he http://www.northstar-newmedia.co.uk/oic (the links ath the top of the page)

Does anyone know why this is happening, and if there is a fix/hack? Any help would be much appreciated.

I'm having a problem with the following piece of code.

Code:

.menuitem
{
	position:relative;
	border:0px solid;
	border-color:#fff;
	z-order:auto;
	padding:1px;
	text-align:center;
	text-size:10px;
	width:300px;
	padding:2px;
}

div.menuitem:hover
{
	background-color:#06f;
	color:white;
}

With Mozilla and Opera, the code highlights the div areas in blue as I expected. However, in IE6, this does not happen. The divs have been wrapped in anchor tags like so:

Code:

<a href="wherever.htm">
<div class="menuitem">
menuitem1
</div>
</a>

Anybody have any ideas?

Hi all u experts
I have some problems which I list them below :

1-I just used a simple css style, it works in FF but not in IE7, it means font size and and bold, is shown in FF but not in IE

Quote:
#tbtd2 {
font: 12px Arial bold;
color: #8F2222;
}




2-also hover effect is not the same in FF and IE , the same as above (looks disable in IE) :

Quote:
#tbtd2:hover {
font: 14px Arial bold;
color: #8F2222;
}



3-how can I have hover effect for row of a table ? ( css style not js ) like change font color or size ?

best regards

Hello,

Basically I have a problem with my CSS regarding an on hover option in IE5. My CSS works fine on IE7 and IE6, however on IE5 it does not work properly and instead of displaying me a menu on IE5 (on Apple) it just creates empty spaces at the bottom of the page. The following is the CSS I use to make the menus work: Code:

ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width:300px;
 background-color: #EAEAEA;
 }


ul li {
 position: relative;
 /* need for IE*/
 float: left;
 background-color:#EAEAEA;
 text-decoration: none;
 }

li ul {
 position: absolute;
 left: 149px;
 top: 0;
 display: none;
 background-color: #EAEAEA;
 text-decoration: none;
 }


ul li a {
 display: block;
 text-decoration:none;
 color: #777;
 background-color: #EAEAEA;
 padding: 5px;
 /* need for IE*/
 height: 1%;
 text-align: left;
 }

ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 150px;
 }


li:hover ul, li.over ul {
 display: block; 
 }

As I already said this works fine on IE7 but a disaster on IE5 (on Apple). Also the doc type I am using is Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

I have also searched google, but can not really find a solution to my problem! Any sugestions are most welcomed

Thank You
bormli