|
CSS - Link Hover In Netscape Not Opening Menu
I got this snippet from the Whateverhover website ...
Code:
li.folder:hover { z-index: 10 }
ul ul, li:hover ul ul { display: none }
li:hover ul, li:hover li:hover ul { display: block }
I've managed to get it to work properly in IE and Firefox, but not in Netscape. The problem (rather, the symptom) in Netscape is that when one hovers an anchor that's inside a line item (<li><a ...></a></li>), the submenues don't pop up, but when the line item that contains the anchor is hovered, the menu pops up but won't stay up as the mouse pointer is moved from the line item to the submenu's line item. Again, this works fine in IE and Firefox. Here's how I've used it: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
* { font-family: Tahoma,Arial,Verdana,Helvetica,sans-serif; font-size: 10px }
table.nav { border-width: 1px; border-color: #000000; background-color: #FFFFFF }
td.links { vertical-align: top; width: 155px }
ul,li,a { margin: 0; padding: 0; border: 0 }
ul { width: 155px; background-color: #E2E2EF; list-style: none }
li { position: relative; border: 1px solid #FFFFFF; text-indent: 3px; padding: 1px; z-index: 9 }
li.folder { }
li.folder ul { position: absolute; left: 150px; /* IE */ top: 0px }
li.folder>ul { left: 145px /* others */ }
a { }
a.submenu { }
li>a { width: auto } /* others */
li a.submenu { }
/* regular hovers */
a:hover { color: #FFFFFF; letter-spacing: 1px; font-variant: small-caps }
li.folder a:hover { background-color: #000080 }
/* hovers with specificity */
li.folder:hover { z-index: 10 }
ul ul, li:hover ul ul { display: none }
li:hover ul, li:hover li:hover ul { display: block }</style>
</head>
<body>
<table class="nav">
<tr>
<td class="links">
<!-- Start Navigation Menues -->
<table>
<tr>
<td nowrap>
<ul>
<li class="folder">
<a class="submenu" href="#">Kitchenware ></a>
<ul>
<li class="folder">
<a href="#" class="submenu">Cutlery ></a>
<ul>
<li><a class="submenu" href="#">Cased Sets</a> </li>
<li><a class="submenu" href="#">Poultry Shears</a> </li>
<li><a class="submenu" href="#">Scissors</a> </li>
<li><a class="submenu" href="#">Sets</a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I've replace the URLs with #s for readbility. How can I make it so that Netscape knows the mouse pointer is over the line item when it's hovering the anchor? Similar TutorialsHi guys, I've used a Dynamic Drive CSS script to create a drop down menu for my website... everything was working fine but now I've noticed that the script is now opening all links within the menus in a new browser window. I need to make sure all links open in the same window... other links within the pages that aren't part of the menu are working fine and not opening new windows... I'm not sure what I did to make this happen but I'm pretty sure this wasn't happening before. Any help would be greatly appreciated!! Thanks! Alright - so I just changed my Java Script based navigation menu over to a CSS based menu for better search engine crawling and easy of use. Here's what I want, and can't seem to do: The original font color of a the links is "white". Easy enough. When you mouse over the link it turns light grey. Looks great! This part works wonders. Here's the problem...When you visit a page in the navigation, the "hover: change color to grey" doesn't work anymore. Instead of remains solid white. Is there a fix/trick to making it work so that always always when you hover over these links they change to grey. Whether the link is active, or already visited, it turns grey during hover. Thank for your help! To see this in action visit Window Film and More.com and take a look at the left navigation. Hello! Here is a test page that I made up to show my problem, CSS Testpage. Viewing this page in IE, or Netscape will show you the differences in the two browsers. The setup: I am using images as links, and when you mouse over them I want the border to swap colors, extremely simple and plain action. I am just trying to get it too work in all browsers (current ones). The CSS code: Code: body {
margin: 0px;
padding: 0px;
text-align:center;
background-color:00aa00;
}
span {
padding: 1px;
}
#wrapper {
margin:0px auto;
width:740;
text-align:left;
}
#workOpera,#workNetscape,#workIE {
margin: 10px;
white-space:nowrap;
text-align:center;
border:0px solid #00f;
padding: 0px 5px 40px 5px;
float:left;
position:relative;
border: 1px solid #00f;
}
h2 {
color:#FFFF33;
}
h3 {
color:#00CCFF;
}
#workOpera img {
border:1px solid #ccc;
}
#workOpera a {
border:0px solid #CCCCCC;
}
#workOpera a:hover img{
border:1px solid #FFFFFF;
}
#workNetscape img {
border:1px solid #ccc;
}
#workNetscape a :link {
border:0px solid #CCCCCC;
}
#workNetscape a :hover {
border:1px solid #FFFFFF;
}
#workIE img {
border:0px solid #ccc;
}
#workIE a {
border:1px solid #CCCCCC;
}
#workIE a:hover {
border:1px solid #FFFFFF;
}
#largeImageIE img {
border:0px solid #ccc;
}
#largeImageIE a {
border:1px solid #ccc;
}
#largeImageIE a:hover {
border:1px solid #FFFFFF;
}
#largeImageNet img {
border:1px solid #ccc;
}
#largeImageNet a :link {
border:0px solid #ccc;
}
#largeImageNet a :hover {
border:1px solid #FFFFFF;
}
The HTML Code: Code: <div id="wrapper"> <div style="margin:15px; padding:5px; background-color:#99CC99; color:#663399; width:700px; display:block;"> <p>Okay, Now if you are viewing this is in IE, you can see that the IE mouseover is working. But the rest of them are not. The mouseover you are looking for is the border changes color.</p> <p>If you are viewing this in Opera or Netscape (new versions) you will see that everything except the IE section is working as it should.</p> <p>The IE section (if viewing from Opera or Netscape) shows the border off from the image, it doesn't "surround" the image like I think it should.</p> <p>Is there a way to combine the IE, and the Netscape/Opera versions so that what I want to accomplish will work no matter what browser the person is using.</p> </div> <div id="workOpera"> <h3>Works in Opera 7.5.4</h3> <span><a href="/" target="_top"><img src="gifs/glohome.gif" alt="Home Page" ></a></span> <span><a href="index.html" target="core"><img src="gifs/glohandbook.gif" alt="Employee Handbook"></a></span> </div> <div id="workNetscape"> <h3>Works in Netscape 7.2</h3> <span><a href="/" target="_top"><img src="gifs/glohome.gif" alt="GLO Agency Home Page" ></a></span> <span><a href="index.html" target="core"><img src="gifs/glohandbook.gif" alt="Employee Handbook"></a></span> </div> <div id="workIE"> <h3>Works In Internet Explorer 6.0</h3> <span><a href="/" target="_top"><img src="gifs/glohome.gif" alt="Home Page" ></a></span> <span><a href="index.html" target="core"><img src="gifs/glohandbook.gif" alt="Employee Handbook"></a></span> </div> <br clear="all"> <table border="0" cellpadding="10" cellspacing="0" align="center"> <tr> <td colspan="2" align="center"><h2>Right Side: IE | Left Side: Opera/Netscape</h2></td> </tr> <tr> <td align="center"> <div id="largeImageIE"> <h3>Internet Explorer<br>Transparent GIF 250X250</h3> <a href="/" target="_blank"><img src="gifs/250X250T.gif" width="250" height="250"></a> </div> </td> <td align="center"> <div id="largeImageNet"> <h3>Netscape / Opera<br>Transparent GIF 250X250</h3> <a href="/" target="_blank"><img src="gifs/250X250T.gif" width="250" height="250"></a> </div> </td> </tr> </table> </div> </div> What happens is the code that works in IE, for some reason doesn't surround the image correctly in Netscape or Opera (or Mozilla Firefox). It's like 3 pixels lower or something or the image is bumped up 3 pixels. It's strange. Viewing the testpage in IE and then in Netscape should show you what I am trying to explain and failing badly at. bpmann I am using an external CSS where I am defining the color of my links when un-visited, visited etc. The problem is in Netscape 7.1/7.2 those links which are calling my other pages, are being shown up as visited when clicked,. But those where I say href='javascript:void(0);my js function' are not being shown with the correct 'visited' link color. They are being shown in the color specified for 'un-visited' links!! Can someone help?? Just when I think I've finally seen it all, every way these browsers can **** up, there's always one more. This morning I discovered that Netscape 7 / Win does not properly render an a element with image content. My example demonstrates that both IE 6 / Win and Netscape 7 / Win both have issues rendering a elements with text content also. This seems like really basic stuff . . . how, HOW could Netscape 7 not be able to render the a with image content correctly??? (Another good question is why this forum doesn't allow you to upload HTML files . . . WTF?? -- you'll have to rename the file to .html) This side menu works great in MSIE, but in netscape and mozilla the top half of the menu is unfunctional (screenshots and above), it's very strange. here is the css for the menu Code:
#leftcolumn ul {
list-style: none;
margin: 0;
padding-top: 5px;
padding-left: 5px;
border: none;
}
#leftcolumn li {
margin: 0;
}
#leftcolumn li a {
display: block;
height: 12px;
text-align: left;
text-decoration: none;
color: #000;
}
html>body #leftcolumn li a {
width: auto;
}
#leftcolumn li a:hover {
color: #A03215;
}
#leftcolumn ul.subnav {
list-style: none;
margin: 0;
padding-top: 0px;
padding-left: 10px;
border: none;
}
#leftcolumn ul.subnav li {
margin: 0;
}
#leftcolumn ul.subnav li a {
display: block;
text-align: left;
height: 12px;
text-decoration: none;
padding-left: 3px;
margin-bottom: 1px;
border-left: 7px solid #B2B2B2;
color: #B2B2B2;
}
html>body #leftcolumn ul.subnav li a {
width: auto;
}
#leftcolumn ul.subnav li a:hover {
color: #000;
border-left: 7px solid #A03215;
}
here is the code for displaying it. PHP Code: <ul> <li><a href="">Register!</a></li> <li><a href="">News</a></li> <li><a href="">About us</a></li> <li><a href="">Forums</a></li> <ul class="subnav"> <li><a href="">General</a></li> <li><a href="">Quests</a></li> <li><a href="">Technical</a></li> <li><a href="">Off-topic</a></li> </ul> <li><a href="">Screenshots</a></li> <ul class="subnav"> <li><a href="">Official</a></li> <li><a href="">Beta Images</a></li> <li><a href="">Concept Art</a></li> </ul> <li><a href="">Beta Journals</a></li> <li><a href="">Information</a></li> <ul class="subnav"> <li><a href="">Guides</a></li> <li><a href="">Races</a></li> <li><a href="">Classes</a></li> </ul> <li><a href="">Downloads</a></li> <li><a href="">Contact</a></li> </ul> thanks! I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category. To view my problem, go to scannerparts.biz I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer. -Emerson Here is the code: hover.css Code:
<!--
body {
behavior: url(/images/csshover2.htc);
}
div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
position: relative;
margin: 0px;
padding: 2px 0px;
width: 178px;
}
div#categorynav ul.level1 li a {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level2 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level3 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level1 ul.level2 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
div#categorynav ul.level2 ul.level3 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
html>body div#categorynav ul.level1 ul.level2 a {
width: auto;
padding: 0px;
margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
width: auto;
padding: 0px;
margin: 0px;
}
div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;}
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level2 li a:hover {
background-color: #000000;
color: red;
}
div#categorynav ul.level3 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level3 li a:hover {
background-color: #000000;
color: red;
}
Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there) Code:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css">
<!--
/* Style Sheet */
body {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 1px;
background-image: url(/images/backgroundgray.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
border :0px solid #ffffff;
width :760px;
}
#categories{
background-color:#000000;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 5px 5px 1px 0px;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight :normal;
font-size: 9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width: 178px;
padding: 0px;
}
#cat1 a{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1 a:hover{
background-color:#000000;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
.leftnav {
background-color:#000000;
color:#ffffff;
text-decoration:none;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
padding : 2px 5px 1px 0px;
}
.leftnav A:link {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:visited {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:hover {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:active {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}
.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
-->
</style>
</head>
<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>
<tr valign="top">
<!-- left nav -->
<td bgcolor="#000000"> </td>
<td width="175" bgcolor="#000000">
<div class="leftnav">
<!-- store logo -->
</div>
<div class="leftnav">
<div style="border-bottom : 0px solid #666666;"> </div>
<!-- home -->
</div>
<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
<ul class="level1">
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '1'">
<ss:set name="hasSub" value="0"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/>
</ss:foreach>
<li class="submenu">
<div id="cat1"><ss:link source="$category"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level2">
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '2'">
<ss:set name="hasSub" value="1"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
<li class="submenu">
<div id="cat1"><ss:link source="$subcategory"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level3">
<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
</ss:foreach>
</ul>
</ss:if>
</ss:foreach>
</ul>
</ss:if></ss:foreach>
</li>
</ss:if></ss:if></ss:foreach>
<br>
</ul>
</div>
</div>
Not sure what this is referred to. I checked my dhtml book but its from 2000! I want to apply link, visited, hover, active to below code: Code: #print_category {
position: absolute;
left: 35%;
top: 30%;
font-size: 13px;
text-align: left;
line-height: 2 ;
margin-right: 5em;
}
Properties I want to apply: A:link {color: #000099; text-decoration: underline; } A:visited {color: #000099; text-decoration: none; } A:hover {color: #000099; text-decoration: none; } A:active {color: #000099; text-decoration: none; } How can this be done, Ive tried but to no avail: - A#print_category:active {color: #000099; text-decoration: none; } Thanks! Hello, The hover link looks good on IE7 and FF but not on IE6 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#header_navigation {
background-color:#0000FF;
position:absolute;
float:left;
font-size:11px;
color:#FFFFFF;
font-weight:bold;
left:190px;
top:130px;
width:145px
}
#header_navigation ul {
border:1px solid #FF0000;
float:left;
list-style-type:none;
margin:0 30px 0 0;
}
#header_navigation li {
width:145px
}
#header_navigation li:hover {
background-color:#FFFFFF;
}
#header_navigation a {
text-decoration:none;
color:#ffffff;
background-color:none;
}
#header_navigation a:hover {
color:#000000;
background-color:#FFFFFF;
width:145px
}
</style>
</head>
<body>
<div id="header_navigation"><!--begin of header_navigation-->
<ul>
<li><a href="index.asp">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Forum</a></li>
<li><a href="blog.asp">Blogs</a></li>
<li><a href="shoutbox.asp">Shoutbox</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</body>
</html>
Hello I would like to make a hover effect when my mouse is over a link, as shown in my attachment. What I want is, as shown in the attachment (at design time), when I hover on any link, two horizontal lines are added at the top and bottom of that specific link, and a slight black transparency appears as well as a highlighter (not the text of the link, and by default the background will be slightly grayed). Anyone can help me with this? Edit: even if the black transparency does not appear is not a problem, but how to implement the two lines? Am using only css and html here, no javascript or any other libraries. I wish to have links for the menu like this: http://www.tristarwebdesign.co.uk/templates/templates/karma/index.html However, I wish to have MY OWN font style on each links as it can be seen on: The only difference I want is that this guy has used "title" in order to display text on each "li" link, while I would like to use MY OWN font style instead as can be seen from my page on: http://members.lycos.co.uk/darsh25/Personal%20Website/contact.php i.e. the font style that can be seen in links like About, Services, Owner, Template & Contact. Code: <li><a title="link six" href="index.html">link six</a></li> <li><a title="link five" href="index.html">link five</a></li> <li><a title="link four" href="index.html">link four</a></li> <li><a title="link three" href="index.html">link three</a></li> <li><a title="link two" href="index.html">link two</a></li> <li><a title="link one" href="index.html">link one</a></li> My links are saved as an "image" (both background & the text on it) & as far as I'm aware, I couldn't possibly "hover" EACH INDIVIDUAL image of EACH of these links using CSS, could I ??? I know that I could "hover" change the background colour, but then what about the text on it ??? Is it possible to use the same fancy font AND being able to change the background colour when hover to "grey" (just as it could be seen from the "tristar" website. My CSS code so far is: Code: /* CSS Document */
body
{
background-color:black;
background-attachment:fixed;
}
/* .................................... HEADER & FOOTER ................................... */
#header
{
font-family:Georgia, "Times New Roman", Times, serif;
color:white;
text-align:center;
width:100%;
}
#header a
{
color:yellow;
text-decoration:none;
}
#header a:hover
{
text-decoration:underline;
}
#footer
{
font-family:Georgia, "Times New Roman", Times, serif;
color:white;
text-align:center;
border-top:3px solid fuchsia;
float:left;
background-color:black;
width:100%;
}
#footer a
{
color:yellow;
text-decoration:none;
}
#footer a:hover
{
text-decoration:underline;
}
/* ........................................ BANNER ........................................ */
#banner
{
width:100%;
border:none;
text-align:center;
background-color:none;
}
/* ......................................... TOP MENU .................................... */
#topMenu
{
width:100%;
float:right;
border:none;
}
#topMenu ul
{
float:left;
margin-left:4%;
}
#topMenu ul li
{
display:inline;
width:20%;
}
/* ................................... CONTENT ................................................ */
#leftContent
{
float:left;
width:10%;
border:1px solid red;
background-color:green;
}
#centerContent
{
background-color:white;
width:75%;
margin-left:1%;
float:left;
border:1px solid green;
}
#centerContent ul
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
list-style-type:decimal;
color:black;
}
#centerContent li
{
margin:3% 3%;
line-height:1.5em;
}
#rightContent
{
float:right;
background-color:fuchsia;
border:1px solid red;
width:10%;
}
/* ................................... STYLES ......................................... */
p.first-letter:first-letter
{
color:red;
margin-left:5%;
font-size:xx-large;
}
p
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
font-size:medium;
line-height:1.5em;
margin:2% 3%;
color:black;
}
h4
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
font-size:x-large;
color:green;
}
h5
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
font-size:medium;
margin:2% 3%;
color:blue;
}
h6
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
margin:0;
font-size:medium;
font-weight:normal;
color:red;
}
.italic
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:black;
font-style:italic;
}
.bold
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:black;
font-weight:bold;
}
.colorTextRed
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:red;
}
.colorTextBlue
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:blue;
}
.colorTextGreen
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:green;
}
/* ................................... TABLE ......................................... */
#contactTable
{
background-color:white;
border-spacing:2%;
margin:3% 3%;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:left;
}
#contactTable tr
{
border:none;
}
#contactTable th
{
color:fuchsia;
}
#contactTable td
{
font-size:medium;
color:black;
}
/* ................................... CLASSES ......................................... */
.table
{
background-color:white;
border-spacing:2%;
margin:3% 3%;
font-family:Georgia, "Times New Roman", Times, serif;
border-collapse:collapse;
text-align:left;
}
.tr
{
border:none;
}
.td
{
border:thin solid red;
font-size:medium;
padding:2px;
text-align:center;
color:black;
}
Thanks for taking the time to read my question. I have links on my page that when visited, change color. Simple enough. I also have in my css a hover line that says change the color to white. This works on the unvisited links, but not the visited ones. Why? Here is my css. @charset "iso-8859-1"; .text { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff } .textCopy { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #CCCCCC; hover: #ffffff } .textbigger { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; hover: #ffffff } a:hover { color: #ffffff; } a:link { color: #999999; } a:visited { color: #747474; } a:active { color: #CCCCCC; } body { margin-top: 0; background-color: #000000; } You can see this at work at www.pierced.ca Brad I am attempting to create a link on a page that will only appear when it is hovered upon. This is to direct an administrator to an admin page. Here is what I have attempted so far to no avail: Code: div.headleft {
text-align: right;
width: 100%;
}
div.headleft a:link {
display: none;
}
div.headleft a:visited {
display: none;
}
div.headleft a:hover {
display: block;
background: inherit;
color: #ff0000;
}
div.headleft a:active {
display: none;
}
I have tried a few variations to the above snippet of code and am at my wits end... My gratitude ahead of time... Is it possible to have a link where the user rolls their mouse over it, and an image appears on top of it? I tried setting it as a background image, but it only fills the background of the text. Thanks! My layout contains a vertical navigation bar. It is split up into individual images. I have created a table to organize the sliced images. I am using CSS to create a hover effect. When you mouseover the table cell, the backgroudn changes (and changes back when the mouse is removed.) This is all peachy, but is it possible for me to change the colors of the text within that table cell along with the background. Heres the CSS: Code:
.link_hover1{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:visited{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:hover{
background-image: url("images/link_img_01b.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:active{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
I tired implementing the font-color property. No use. does this have something to do with my 'td' selector? I have a feeling that this is the problem. I have the following code, but the CSS file that I have already defines link and hover to be something else Is there a way I can edit the div#hdr_cnt to have it's own definition of the hover and link? Thanks for the help Code: div#hdr_ctr { width:100%; min-width:670px; background-color:#FFF; overflow:hidden; margin:0; padding:0; text-align:center; color:#000000}
div#hdr_cnt { background: url('http://www.hobbyspeed.com/header/hobbyspeed.jpg') no-repeat center; width:670px; height:73px; margin:0 auto; padding:0;}
div#hdr_cnt ul.l { float:left; margin:15px 0 0 18px; padding:0; list-style-type:none; direction:rtl; text-align:right; color:#000000}
* html div#hdr_cnt ul.l { margin-left: 9px; color:#000000 }
div#hdr_cnt ul.r { float:right; margin:15px 0 0 20px; padding:0; list-style-type:none; direction:ltr; text-align:left;}
I'm trying to have a hover effect on a link within a <td> tag. In firefox it works fine, but in IE it's not working. I wasn't sure if there's a special property in CSS to get it working. My CSS code is: Quote: .leftblock a{display: block; border-top: 1px solid #ffffff; font-weight: bold; color: #21536A; text-decoration:none; background-color:#CCCCFF; } Quote: .leftblock a:hover{border-top: 1px solid #cccccc; background-color: #DDEEFF; font-weight: bold; text-decoration: none; } I added display:block to the a:hover class as well to try that to no avail. http://www.sassyproducts.com/hover.php is where you can see what I'm working on. If you hover over anywhere on the first link, Fundraising, it adds the hover effect, but the other ones will only show the hover effect if you hover over the text. This is in IE. In FF, it works properly. Any ideas what I may need to add or change?... Thanks. I have my links, and a:hover does not activate when the link has been visited. Is there any special for a hover visted link or any way to fix this? Whew, it's been a while sin'ce i've been here. Thanks in advance! ~Brendan This is the new site I'm working on: http://animalemergencybloomington.com/Index2.html Link and Visited Link colors work, but I can't get Active or Hover color to work. (Doesn't work in any of the browsers I've tested it in.) Right now I have this in the <head> css Code: Original - css Code <style type="text/css"> body { color: #000000; font-size: 12pt; font-family: Verdana; margin: 0px 0px; } A:link { text-decoration: none } A:visited { text-decoration: none } </style> <style type="text/css"> and this for the <body>: <body bgcolor="#FFFFFF" text="#000000" link="#0000FF" alink="#0000FF" vlink="#1E90FF"> adding a:active and a:hover colors to the style gives a "parse error" for those lines when I try to validate and doesn't work anyway as far as getting a color change on hover. I've been trying different combinations in the body and style all afternoon but get error warnings on everything I've tried except the above combo. I'm just trying for links that are never underlined (hate how cluttered that makes things look) but turn red on hoover. Help? Thanks, Ez |
|||||||