Page 1 of 2

CSS and IE issues - please help

Posted: Wed Apr 14, 2004 5:36 pm
by johnperkins21
I am very new to using CSS for my pages so I am putting together a little test site to see how everything works. I have set it up and it looks just peachy in Mozilla, but in IE I am having a problem. I have links in my menu that I am trying to change the background color on during a hover, but in IE somewhere it is getting mixed up. I have the a:hover elements different for different td.classes. It's hard to explain but here is the code:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
/*
	Default css file for mutedsound.com
	Created by: John Perkins Jr.
*/



/*	General page style */
body &#123;
	background-color: #777777;
&#125;

table.body &#123; background-color: #a8a8a8; border-width: 0px 1px 0px 1px; border-style: solid; border-color: #000; width: 600px; padding: 0px; &#125;

/* 	General fonts */
font,th,td,p &#123; font-size: 8px; color: #000000; font-family: arial,helvetica; &#125;
.gen &#123; font-size: 12px; &#125;
.genmed &#123; font-size: 11px; &#125;
.gensmall &#123; font-size: 10px; &#125;
.gentiny &#123; font-size: 9px; &#125;
.gen,.genmed,.gensmall,.gentiny &#123; color: #000000; &#125;
a.gen,a.genmed,a.gensmall,a.gentiny &#123; color: #0f0f0f; text-decoration: none; &#125;
a.gen:hover,a:genmed:hover,a.gensmall:hover,a.gentiney &#123; color: #2f2f2f; text-decoration: underline; &#125;

a:link,a:active,a:visited &#123; text-decoration: none; color: #0f0f0f;  &#125;
a:hover &#123; text-decoration: underline; color: #8e8e8e; &#125;
hr &#123; height: 0px; border: solid #8e8e8e; border-top-width: 1px; &#125;

/*	Menu Cells - for navigation */
td.menu &#123; background-color: #8e8e8e; margin: 0; padding: 0px; border-width: 1px 0px 1px 0px; border-style: solid; border-color: #000; color: #000000; font-size: 12px; font-weight: bold;  &#125;
td.menu a,a:link,a:active,a:visited &#123; background-color: #8e8e8e; text-decoration: none; color: #0f0f0f; &#125;
td.menu a:hover &#123; background-color: #ffffff; text-decoration: none; color: #475c7c; &#125;

/* td.menu:hover &#123; background-color: #e8e8e8; &#125; */ 

/* Header Cells */
th &#123; color: #8e8e8e; font-size: 11px; font-weight: bold; background-color: #c8c8c8; &#125;

/*	Data Cells - for data */
/*	Data Cells/Headers */
td.datahead &#123; background-color: #8e8e8e; margin: 0; padding: 2px; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #000; color: #000000; font-size: 12px; font-weight: bold;  &#125;
td.datahead a,a:link,a:active,a:visited &#123; background-color: #8e8e8e; text-decoration: none; color: #0f0f0f; &#125;
td.datahead a:hover &#123; background-color: #a8a8a8; text-decoration: underline; color: #475c7c; &#125;

/*	Data Cells/Data */
td.data &#123; background-color: #e8e8e8; margin: 0; padding: 2px; border-width: 0px 1px 1px 1px; border-style: solid; border-color: #000; color: #000000; font-size: 11px;   &#125;
td.data a,a:link,a:active,a:visited &#123; background-color: #e8e8e8; text-decoration: underline; color: #0f0f0f; &#125;
td.data a:hover &#123; background-color: #8e8e8e; text-decoration: underline; color: #475c7c; &#125;


</style>
<title>Test</title>
</head>

<body>
<table border=0 cellpadding=0 cellspacing=0 class="body" align=center>
  <tr>
    <td>
		<table border=0 cellpadding=0 cellspacing=0>
		  <tr>
		    <td>
			  <img src="images/mutedsound.gif" alt="MutedSound - a thirteen-twelve experiment" border=1>
			</td>
		  </tr>
		 </table>
	</td>
  </tr>
  <tr>
    <td>
		<table border=0 cellpadding=0 cellspacing=0 width="100%">
		  <tr align=left class="menu">
		    <td class="menu" align=left>&nbsp;<a href="test.php">Home</a>&nbsp;</td>
			<td class="menu" align=left>&nbsp;|&nbsp;</td>
			<td class="menu" align=left>&nbsp;<a href="test.php">Contact</a>&nbsp;</td>
			<td class="menu" align=right width="100%">&nbsp;</td>
		  </tr>
		</table>
    </td>
  </tr>
  <tr>
    <td>
		<table border=0 cellpadding=0 cellspacing=0>
	      <tr>
		    <td height=400>
				<table border=0 cellpadding=3 cellspacing=0 width="98%" align=center>
				  <tr>
				    <td class="datahead" width="50%"><span class="gen">This is a header</span></td>
				  </tr>
				  <tr>
				  	<td class="data" width="50%"><span class="genmed">This is some text inside of what will end up being a data box. <a href="http://yahoo.com" >Link Here</a> This is some text inside of what will end up being a data box. This is some text inside of what will end up being a data box. </span></td>
				  </tr>
				</table>
			</td>
		  </tr>
		</table>
    </td>
  </tr>
  <tr>
    <td>
		<table border=0 cellpadding=0 cellspacing=0 width="100%">
	      <tr>
		    <td class="menu" align=center><span class="gentiny">&copy;Thirteen-Twelve Technologies</span></td>
		  </tr>
		</table>
    </td>
  </tr>
  <tr>
    <td>
		<table border=0 cellpadding=0 cellspacing=0>
	      <tr>
		    <td><img src="images/mutedsoundbottom.gif" alt="What are you looking at?" border=1></td>
		  </tr>
		</table>
    </td>
  </tr>
</table>

</body>
</html>
Here is the site so you can see what I mean. It looks right in Mozilla, so you would need to use IE to see the problem.

http://www.mutedsound.com/test.php

Thank you for your time and help.

Posted: Wed Apr 14, 2004 6:58 pm
by Unipus
Did you fix the problem? It looks the same to me in FireFox and IE6.

For the record, however, IE has poor support for the :hover pseudo-class. It is (afaik) supported only on links without doing some hacking.

Posted: Thu Apr 15, 2004 10:36 am
by johnperkins21
Very strange, it works on my home machine just fine, but my work machine it doesn't. They're both WinXP Pro with IE 6 SP1. Weird.

Posted: Thu Apr 15, 2004 10:52 am
by Draco_03
look fine to me.. on your mom's computer did you clear the cach.. maybe that was that the probleme..

Posted: Thu Apr 15, 2004 11:11 am
by johnperkins21
Nope, cleared the cache, still weird.

Here is an image of the two browsers interpretation. I also re-installed SP1 for IE, I'm just confused.


Image

Posted: Thu Apr 15, 2004 11:17 am
by Draco_03
if you change that
on lign 37

Code: Select all

td.menu a,a:link,a:active,a:visited &#123; background-color: #8e8e8e; text-decoration: none; color: #0f0f0f; &#125;
for that

Code: Select all

td.menu a &#123; background-color: #8e8e8e; text-decoration: none; color: #0f0f0f; &#125;
does it work ?

Posted: Thu Apr 15, 2004 11:21 am
by johnperkins21
No, it doesn't.

Posted: Thu Apr 15, 2004 11:25 am
by Draco_03
i took your code it work on my computer localy.. the exact same source that you use on your test..
but on your test i see the difference.. what is different between my localhost and your webhost (other then the images.. cuz i havent any)

Posted: Thu Apr 15, 2004 11:28 am
by johnperkins21
The only thing I can think of that would be different is that it's .php file and I'm using an include for the .css which is stored in a default.css rather than using a <link> tag or an .html file with the css copied into it.

Other than that, I don't know what would be different on the server.

Posted: Thu Apr 15, 2004 11:31 am
by Draco_03

Posted: Thu Apr 15, 2004 11:32 am
by johnperkins21
That works! wtf?

Posted: Thu Apr 15, 2004 11:32 am
by Draco_03
hehe yeah thats why i find it akward

Posted: Thu Apr 15, 2004 11:33 am
by Draco_03
try copying my source (wich is the same) and creating a NEW FILE ..
then paste all the source and name it testing instead of test.. and try it again..

Posted: Thu Apr 15, 2004 11:35 am
by johnperkins21
Nope, I guess it could be my server but that seems kind of weird. I don't know what on the server would cause this sort of thing, and why it worked on my home machine.


http://www.mutedsound.com/testing.php

Posted: Thu Apr 15, 2004 11:38 am
by magicrobotmonkey
maybe its some weird setting in your IE - woops nope i guess not that link doesn't work on mine either