CSS - .class:hover Doesn't Work?

Hey guys.

I'm still learning css so excuse some crude styles.

I don't know how to explain this so grap IE 6 and click here. Scroll down the links on the left until you get to the last one "Printable Pics." As you can see for some reason the last two links jump down the page and a big blank spot appears in it's place when you hover your mouse over it.

It doesn't do that in firefox or opera so I don't know whats' going on.

Heres my CSS:

Code:

body {
  text-align: center;
  height: 100%;
  background-image: url(images/bg_title.gif);
}

img {
  border: none;
}

#wrapper {
  width: 780px;
  height: 100%;
  margin: 0 auto;
  text-align: left;
  position: relative;
  background-color: #FFFF7D;
  color: #000000;
  border: solid 2px #0000ff;
}

#header {
  width: 780px;
  height: 143px;
  margin-bottom: 3px;
}
#headerImage {
  width:200px;
  float: left;
  margin-right: 2px;
}
#headerImage img {
  margin: 0px;
}

#headerLogo {
  width: 577px;
  float: left;
  margin: 0px;
}

#headerLogo img {
  margin: 0px;
}

#navagation {
  width: 204px;
  margin-bottom: 1px;
  float: left;
  margin-right: 1px;
}

.navIcon {
  float: left;
  margin-right: 2px;
  margin-bottom: 1px;
  padding: 0px;
}
.navButton {
  float: left;
  margin-bottom:1px;
  padding: 0px;
}

a.navButton:link {
  border: none;
}
a.navButton:visited {
  border: none;
}
a.navButton:hover {
  border: 1px solid #000000;
}

#mainContentArea {
  float: left;
  width: 570px;
  height: 711px;
  border: solid 1px #000000;
  background-color: #ffffff;
  margin-bottom: 3px;
}

#footer {
  height: 1px;
  margin-top: -1px;
  clear: both;
  overflow: hidden;
}

Thanks in advance!

-Tim

Forgive the subject, I'm not sure how to describe this oddity. This seems to only happen in IE, test with this snippet:
Code:

<style>
	a:hover span { color: Green }
</style>

<a href="#"><span>link</span></a>

One would expect the text to turn green when hovering, but it doesn't. Works fine in other browsers as it should, but not in IE. However, if you add any valid style, regardless of function, to the bare :hover pseudo-class of the anchor, it works fine. For example, this doesn't change the theoredical function at all:
Code:

<style>
	a:hover { visibility: inherit }
	a:hover span { color: Green }
</style>

<a href="#"><span>link</span></a>

But now it works fine in IE. It doesn't recognize the psuedo-class as a parent unless there's an explict valid style for the item itself. Order doesn't appear important.

I guess I'm posting in part as a PSA and just to have this odd behavior confirmed by third parties. I've done a lot of reading on IE bugs and don't recall seeing this come up. It probably stems from the lack of :hover support for non-anchor tags.

Confirm/deny/comment?

I'm using the following code to create a CSS button:

<a href="equipment.shtml"><span class="menubutton">Rental</span></a>

.menubutton {
color: white;
text-decoration: none;
font-family: Helvetica, Verdana, sans-serif;
font-size: small;
background-color: #666666;
width: 110px;
height: 20px;
border-bottom:2px white solid;
float:left;
padding-top:5px;
}

.menubutton:hover {
background-color: #1B1B1B;
border-bottom: 2px #2E844A solid;
cursor: hand;
}


IE six doesn't use the hover seudo class for some reason. Any suggestions?

please please somebody help me with this...
i have given my links some effects with this code:

Code:

<style type="text/css">
<!--
a img {border: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; border-bottom:3px double; color: #000000;}

a.head,
a.head:link { text-decoration: none; }
a.head:hover { text-decoration: none; }
//-->
</style>

it works fine on my links, but the class "head" doesn't seem to be effecting the link with that class....it still has the same hover effect as the other links. I have class="head" in the link tag of the element, but it still doesn't work. I want no effect on this link since it is an image and I don't want a double-underline on it. The only thing I can think of is that maybe the head image isnt being effected correctly because it is an include file, but I don't think that really matters.

Thanks!

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

(please note, i'm a noob)..

What i have right now:
################
HTML:
################
<div id="aboutusimage"></div>




################
CSS:
################
#aboutusimage {
width:400px;
height:75px;
background-image:url(/images/about.jpg);
position:relative;
left:189px;
top: 4px;
margin-bottom:30px;
}



========================



What i'd like to have:
################
HTML:
################
<div id="banner" class="about"></div>




################
CSS:
################
#banner {
width:400px;
height:75px;
position:relative;
left:189px;
top: 4px;
margin-bottom:30px;
}

#banner.about {
background-image:url(/images/about.jpg);
}



======================

For some reason, the image disapears when i do this :\
Any advice?

This is my CSS File:

PHP Code:
.linkbody
{
padding: 15px 15px 6px;
color: white;
font-family: Verdana;
font-size: 10pt;
width: 160px;
background-color: #006EA1;
} 





and this my html file:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
	<title> Schmid </title>
	<link type="text/css" rel="stylesheet" href="css2.css">
</head>

 <body>
	<center>
		<table class="linkbody" width="800">
           <tr>
               <td>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
               </td>
             </tr>
      </table>
</center>

</body>

</HTML>

In Firefox the padding works fine, but in the IE6 it doesn't work at all makes me angry

thx for any help

Hi guys, I've trying to achieve the following.

I want to have a div element floating on the right 100px from the top and the rest of content is filled with text.

PHP Code:
<div>[image]</div><p>text 1</p><p>text 2</p> 





I could do this easily with simple float:right but then the image would at 0px from top and if I try to move it down (using margin or padding) the text wouldn't reach above it (would get cut off at the width of the image form the right)

If I try to add another div with 100px height and 10px (for example) width above the image, the text overlaps over my image div

Any ideas how to achieve this?

Below is my full html code

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html > <head> <title>float</title> <style type="text/css"> .content { width: 400px; background: #FFFF00; padding: 5px; } .floatright { float: right; height: 100px; border: 1px solid #000; } .offset { width: 10px; } .imgholder { width: 100px; clear: right; } </style>  </head> <body>  <div class="content">  <div class="floatright offset"></div>  <div class="floatright imgholder"><h1>image</h1></div>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare. Vestibulum a nulla id velit elementum imperdiet. Nam a purus. Suspendisse non enim. Nullam id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas aliquet varius tellus. Aliquam sed nunc eu tortor semper vulputate. Nunc risus. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare. Vestibulum a nulla id velit elementum imperdiet. Nam a purus. Suspendisse non enim. Nullam id sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas aliquet varius tellus. Aliquam sed nunc eu tortor semper vulputate. Nunc risus. </p>  </div>  </body> </html> 

Hi,

link to wesbite

why doesn't the drop down menu, that works in IE6 not work in Firefox 0.8? It is pure CSS, no Javascript. OK, I know it doesn't validate and don't care too much about that. I know putting tables inside an anchor tag is frowned on but hey, it works and I didn't think it up.

I thought IE was the worst when it came to CSS compliance?

Any ideas how I can fix it?

Thanks,

John

My site works fine with Opera 7 but refuses to work properly with IE6 and Firefox. There's definately a problem with how each browser renders my CSS. I for one cannot figure out what to change so that the site would work with all three browsers. That being said, would anyone be grateful enough to help me out? Thanks!

URL: URL

I've included some screenshots of how the site looks like on all three browsers.

URL
URL
URL

Hi guys
Look here

www DOT clickemarketing DOT com

The date, before each article, should show at right. This date uses the .createdate css class, which is this

Code:

.createdate {
	color: #A9A9A9;
	vertical-align: top;
	padding-bottom:2px;
	float: right;
	font-size: 11px;
}

I don't know why IE shows it at left... FF shows ok

Is there any way to correct this class, and make date show at right in this pseudo browser, worm collector, spyware downloader called IE ?

Thanks

Hi All,

We develoepd an Application for a client.

This application uses CSS for all text including drop-down menu text and input box text.

My client is using XP as their OS and he tells me (sent a screen capture as well) he CANNOT read the drop-down boxes. Text is too small.

On our machines (Win 98) there are no problems. Have tested on about 15 different client computers with no problems.

Browser is not an issue as its the same for him on both Netscape and IE.

Does ANYONE have a clue how to fix this? Doesn't seem logical to me - one OS should be the same as the other. However, we're talkin about MS products and who knows with them.

Need urgent help on this one.. please.. anyone with ideas help me!

thanks all.

Peace.

Aaron

On my re-design of www.samuraiblog.com , I have a DIV that has quite a bit of text in it. I have it set to 100%, but it only goes about 1/4 of the way. You can see what I mean here, on a test server, http://samuraiblog.dreamhost.com/index.php

Thanks,
-Sam

Hi there,
Sorry for being silly and pathetic and crap at CSS, but I'm having an issue with a site I've been working on.
Site URL is here, and the issue that I am having is as follows:
I have a layer with a cloud as it's background. It's the one in the centre, called layer1 because I didn't bother renaming it. Because of the background being a cloud, the edges are curved, like a fluffy cloud would be. Obviously any text in this layer will overrun the edges of the cloud, and so I thought it would make sense to use padding to trim the text area down so it would all fit on the cloud.
Now the problem that I am having is that while padding the left side works, padding the right side appears to have no effect :-(
If anyone's got any hints or tips that might solve my proble, I'd be reeeeally grateful!
Regards,
Lawrence

I'm wondering why does the padding doesn't work for the <p> tag...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <style type="text/css">
p.pFrontPageTitle
{
  margin: 0px;
  padding: 200px 0xp 200px 0px;
  color: #000000;
  font-weight: bold;
  font-family: verdana;
  font-size: 12pt;
  font-style: normal;
  background-color: #FF0000;
} 
  </style>
 </head>
 <body>

  <p class="pFrontPageTitle">What Our Customers Say .....</p>

</body>
</html>